以德报德 發表於 2021-7-2 18:55:00

CSS 学习（3）

<h1 id="css-学习3">CSS 学习（3）</h1>
<h2 id="盒子模型">盒子模型</h2>
<h3 id="盒子的组成">盒子的组成</h3>
<p>border边框，content内容，padding内边距，margin外边距。</p>
<h4 id="边框border">边框（border）</h4>
<p>border-with：边框的粗细（一般情况下使用px为单位），未指定边框样式没法显示。</p>
<p>border-style：边框的样式（solid实线，dashed虚线，dotted点线）。</p>
<p>border-color：边框的颜色。</p>
<p>复合性写法：border：1px solid red；（三个属性可以不分顺序）</p>
<p>边框4条边分开写：border-top，border-bottom，border-left，border-right</p>
<p>用css替换原先html代码：</p>
<pre><code class="language-css">    &lt;table align="center" border="1" cellpadding="20" cellspacing="0" width="500px" height="249"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
            &lt;th&gt;名称&lt;/th&gt;
            &lt;th&gt;价格&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
            &lt;td&gt;苹果&lt;/td&gt;
            &lt;td&gt;10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
</code></pre>
<pre><code class="language-css">    &lt;style&gt;
      table {
            width: 500px;
            height: 249px;
      }
      table,
      td,
                                th {
            border: 1px solid pink;
            /* 合并相邻边框 */
            border-collapse: collapse;
      }
    &lt;/style&gt;
</code></pre>
<p>边框会影响盒子的实际大小，盒子实际的大小=边框大小+原本盒子大小。</p>
<h4 id="内边距padding">内边距（padding）</h4>
<p>padding-left，padding-right，padding-top，padding-bottom设置边框和内容的间隔。</p>
<p>复合写法：</p>
<ul>
<li>padding:5px;代表上下左右都有5px</li>
<li>padding:5px 10px;代表上下时5px，左右时10px</li>
<li>padding:5px 10px 20px;代表上5px，左右10px，下20px</li>
<li>Padding:5px 10px 20px 30px;代表上5px右10px下20px左30px（顺时针）</li>
</ul>
<p>内边距也会影响盒子的大小，盒子实际大小=内边距大小+原本盒子大小</p>
<p>如果盒子未指定width/height（继承父亲的width/height也算未指定），那么padding就不会撑大盒子。</p>
<h4 id="外边距margin">外边距（margin）</h4>
<p>margin-left，margin-right，margin-top，margin-bottom设置盒子和盒子之间的距离</p>
<p>复合写法和padding一样。</p>
<p>块级元素水平居中的方法：块级盒子设置width，然后使用margin: 0 auto;便可以实现块级盒子水平居中。</p>
<p>行内元素水平居中的话让其父亲添加：text-align:center;</p>
<h5 id="相邻块元素垂直合并问题">相邻块元素垂直合并问题</h5>
<p>上下两个块级元素上面有一个margin-bottom下面有一个margin-top，则两个块级元素间的外边距取最大的那个值，而不是相加后的值。</p>
<p>解决方法：上下块级元素只添加一个外边距。</p>
<h5 id="父元素的塌陷问题">父元素的塌陷问题</h5>
<p>对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。</p>
<p>解决方法：</p>
<ol>
<li>可以为父元素定义上边框</li>
<li>可以为父元素定义上内边距</li>
<li>可以为父元素添加overflow：hidden（推荐）</li>
</ol>
<h4 id="清除盒子的内外边距">清除盒子的内外边距</h4>
<p>网页元素可能带有默认的内外边距。</p>
<pre><code class="language-css">* {
        margin: 0;
        padding: 0;
}
</code></pre>
<p>行内元素比较特殊，为了照顾兼容性，尽量设置左右内外边距，不要设置上下内外边距。但转换为块级和行内块元素就可以了。</p>
<h4 id="圆角矩形css3新增">圆角矩形（CSS3新增）</h4>
<p>border-radius：length设置成圆角边框。</p>
<p>半径为length的圆放四个角落。</p>
<p>length可以是像素也可以是百分数。</p>
<p>如果要设置四个角为不同的圆角，则可以写为border-radius：10px 20px 30px 40px;分别表示左上、右上、右下、左下。</p>
<p>如果设置单独的一个角：border-top-left-radius</p>
<h4 id="盒子阴影css3新增">盒子阴影（CSS3新增）</h4>
<p>box-shadow：h-shadow（水平阴影位置，必须） v-shadow（垂直阴影位置，必须） blur（模糊距离，影子的虚实程度） spread（阴影尺寸，影子的大小） color（阴影颜色） inset（外部阴影改为内部阴影）;</p>
<h4 id="文字阴影css3新增">文字阴影（CSS3新增）</h4>
<p>text-shadow：h-shadow v-shadow blur color;</p>
<h2 id="css浮动">CSS浮动</h2>
<p>网页的三种传统布局方式：</p>
<ul>
<li>普通流（标准流/文档流）：块级元素和行内元素按找规定排序</li>
<li>浮动</li>
<li>定位</li>
</ul>
<h3 id="浮动float">浮动（float）</h3>
<p>浮动可以改变元素的默认排序方式，float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。</p>
<p>一般使用标准流的父元素排列上下布局，然后使用浮动元素在父元素中排列左右的布局。多个块级元素总想排列找标准流，多个块级元素横向排列找浮动。</p>
<p>float {float:属性值}         （属性值：none，left，right）</p>
<h3 id="浮动特性">浮动特性</h3>
<ul>
<li>浮动元素会脱离标准流（脱离标准流的控制（浮）移动到指定位置（动），（俗称脱标），不再保留原先的位置，浮动只会压住后面的标准流 ）</li>
<li>浮动的元素会一行内显示并且元素顶部对齐</li>
<li>浮动的元素会具有行内块元素的特性</li>
</ul>
<h3 id="清除浮动">清除浮动</h3>
<p>清除浮动的本质是清除浮动元素造成的影响，清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。</p>
<p>选择器{clear：属性值；}</p>
<p>left:不允许左侧有浮动元素</p>
<p>right：不允许右侧有浮动元素</p>
<p>both：同时清除左右两侧浮动的影响</p>
<p>清除浮动的方法：</p>
<ol>
<li>额外标签法也称为隔墙法，是W3C推荐的做法</li>
<li>父级添加overflow属性</li>
<li>父级添加after伪元素</li>
<li>父级添加双伪元素</li>
</ol>
<pre><code class="language-css">/* 方法一：在浮动元素的最后再添加一个额外元素（必须是块级元素），使用clear: both */
.clear {
        clear: both;
}
</code></pre>
<pre><code class="language-css">/* 方法二：给父元素添加代码 */
.father {
        /* 清除浮动，其中的值为hidden、auto、scroll都可以 */
        overflow: hidden;
}
</code></pre>
<pre><code class="language-css">/* 方法三： 给父元素添加代码（是隔墙法的升级版，由css生成了额外元素）*/
.clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}
.clearfix{
/* 兼容IE6和IE7 */
*zoom: 1;
}
</code></pre>
<pre><code class="language-css">/* 方法四：给父元素添加代码 */
.clearfix:before,
.clearfix:after {
        content: "";
        display: table;
}
.clearfix:after {
        clear: both;
}
.clearfix{
        *zoom: 1;
}
</code></pre>
<p>需要清除浮动的情况：</p>
<ol>
<li>父级没高度。</li>
<li>子盒子浮动了。</li>
<li>影响下面布局了，我们就应该清除浮动了。</li>
</ol><br><br>
来源：https://www.cnblogs.com/boniii/p/14964538.html
頁: [1]
查看完整版本: CSS 学习（3）