平安保险公司康养顾问 發表於 2020-2-24 21:51:00

前端学习(12)~css学习(六)：盒模型详解

<h2>盒子模型</h2>
<p>盒子模型，英文即box model。无论是div、span、还是a都是盒子。</p>
<p>但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。</p>
<h3>盒子中的区域</h3>
<p>一个盒子中主要的属性就5个：</p>
<ul>
<li>width和height：内容的宽度、高度（不是盒子的宽度、高度）。</li>
<li>padding：内边距。</li>
<li>border：边框。</li>
<li>margin：外边距。</li>
</ul>
<p>盒子模型的示意图：</p>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224202212744-1113307809.png"></p>
<p>代码演示：</p>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224202255835-1702897284.png"></p>
<p>上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。</p>
<h3>标准盒模型和IE盒模型</h3>
<p>我们目前所学习的知识中，以标准盒子模型为准。</p>
<p>标准盒子模型：</p>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224202507415-790400741.jpg"></p>
<p>IE盒子模型：</p>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224202611804-896547982.jpg"></p>
<p><strong>CSS盒模型和IE盒模型的区别</strong>：</p>
<ul>
<li>
<p><span style="background-color: rgba(255, 255, 0, 1)">在&nbsp;标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。</span></p>
</li>
<li>
<p><span style="background-color: rgba(255, 255, 0, 1)">IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。</span></p>
</li>
</ul>
<h3><code>&lt;body&gt;</code>标签也有margin</h3>
<p><code>&lt;body&gt;</code>标签有必要强调一下。很多人以为<code>&lt;body&gt;</code>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：<span style="background-color: rgba(255, 255, 0, 1)">整个网页最大的盒子是<code>&lt;document&gt;</code>，即浏览器。而<code>&lt;body&gt;</code>是<code>&lt;document&gt;</code>的儿子</span>。<span style="background-color: rgba(255, 255, 0, 1)">浏览器给<code>&lt;body&gt;</code>默认的margin大小是8个像素，此时<code>&lt;body&gt;</code>占据了整个页面的一大部分区域，而不是全部区域</span>。</p>
<h2>认识width、height</h2>
<p>真实占有宽度 = 左border + 左padding + width + 右padding + 右border</p>
<p><strong>如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding，加padding的时候就要减width</strong>。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。</p>
<h2>认识padding</h2>
<h3>padding区域也有颜色</h3>
<p>padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，<strong>background-color将填充所有border以内的区域</strong>。</p>
<p>效果如下：</p>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224203751778-1952459802.png"></p>
<h3>padding有四个方向</h3>
<p>padding是4个方向的，所以我们能够分别描述4个方向的padding。</p>
<p><strong>方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。</strong></p>
<p>小属性的写法：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">    padding-top: 30px;
    padding-right: 20px;
    padding-bottom: 40px;
    padding-left: 100px;</span></pre>
</div>
<p><strong>综合属性的写法：(上、右、下、左)</strong>（顺时针方向，用空格隔开。<strong>margin的道理也是一样的</strong>）</p>
<div class="cnblogs_code">
<pre>padding:30px 20px 40px 100px;</pre>
</div>
<p>如果写了四个值，则顺序为：上、右、下、左。</p>
<p>如果只写了三个值，则顺序为：上、右、下。左和右一样。</p>
<p>如果只写了两个值，比如说：</p>
<div class="cnblogs_code">
<pre>padding: 30px 40px;</pre>
</div>
<p>则顺序等价于：30px 40px 30px 40px;</p>
<p>要懂得，<strong>用小属性层叠大属性</strong>。比如：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">padding: 20px;
padding-left: 30px;</span></pre>
</div>
<p>上面的padding对应盒子模型为：</p>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224211221970-1100054254.png"></p>
<p>下面的写法：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">padding-left: 30px;
padding: 20px;</span></pre>
</div>
<p>第一行的小属性无效，因为被第二行的大属性层叠掉了。</p>
<h3>一些题目</h3>
<p>题目1：说出下面盒子真实占有宽高，并画出盒模型图。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">div{
      width: 200px;
      height: 200px;
      padding: 10px 20px 30px;
      padding-right: 40px;
      border: 1px solid #000;
    }</span></pre>
</div>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224211405866-2144383606.png"></p>
<p>题目2：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。</p>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224211603952-1125240977.png"></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">    width:123px;
    height:123px;
    padding:20px;
    padding-right:40px;
    border:1px solid red;</span></pre>
</div>
<h3>一些元素，默认带有padding</h3>
<p>一些元素，默认带有<code>padding</code>，比如ul标签。如下：</p>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224212036434-1501275978.png"></p>
<p>上图显示，不加任何样式的ul，也是有40px的padding-left。</p>
<p>所以，我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding。</p>
<p>可以使用<code>*</code>进行清除：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">      *{
            margin: 0;
            padding: 0;
      }</span></pre>
</div>
<p>但是，<code>*</code>的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}</span></pre>
</div>
<h2>认识border</h2>
<p>border就是边框。边框有三个要素：像素（粗细）、线型、颜色。</p>
<p>比如：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">.div1{
    width: 10px;
    height: 10px;
    border: 2px solid red;
}</span></pre>
</div>
<p>颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。</p>
<h3>border-style</h3>
<p>border的所有的线型如下：（我们可以通过查看<code>CSS参考手册</code>得到）</p>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224212540056-210225145.png"></p>
<p>所以，比较稳定的border-style就几个：solid、dashed、dotted。</p>
<h3>border拆分</h3>
<p>border是一个大综合属性。比如说：</p>
<div class="cnblogs_code">
<pre>border:1px solid red;</pre>
</div>
<p>就是把上下左右这四个方向的边框，都设置为 1px 宽度、线型实线、red颜色。</p>
<p>border属性是能够被拆开的，有两大种拆开的方式：</p>
<ul>
<li>
<p>（1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）</p>
</li>
<li>
<p>（2）按方向拆开：border-top、border-right、border-bottom、border-left。</p>
</li>
</ul>
<p>现在我们明白了：<strong>一个border属性，是由三个小属性综合而成的</strong>。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;</span></pre>
</div>
<p>效果如下：</p>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224214055695-2146357523.png"></p>
<p>（1）按三要素拆：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">border-width:10px;    //边框宽度
border-style:solid;   //线型
border-color:red;   //颜色。</span></pre>
</div>
<p>等价于：</p>
<div class="cnblogs_code">
<pre>border:10px solid red;</pre>
</div>
<p>(2)按方向来拆：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;</span></pre>
</div>
<p>等价于：</p>
<div class="cnblogs_code">
<pre>border:10px solid red;</pre>
</div>
<p>（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">    border-top-width:10px;
    border-top-style:solid;
    border-top-color:red;
    border-right-width:10px;
    border-right-style:solid;
    border-right-color:red;
    border-bottom-width:10px;
    border-bottom-style:solid;
    border-bottom-color:red;
    border-left-width:10px;
    border-left-style:solid;
    border-left-color:red;</span></pre>
</div>
<p>等价于：</p>
<div class="cnblogs_code">
<pre>border:10px solid red;</pre>
</div>
<h3>举例1：利用 border 属性画一个三角形（小技巧）</h3>
<p>完整代码如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">div{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: red;
    border-bottom: none;
}</span></pre>
</div>
<p>步骤如下：</p>
<p>（1）当我们设置盒子的width和height为0时，此时效果如下：</p>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224214502471-689741322.png"></p>
<p>（2）然后将border的底部取消：</p>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224214630852-1286881572.png"></p>
<p>（3）最后设置border的左边和右边为白色或者透明：</p>
<p><img src="https://img2018.cnblogs.com/common/1182288/202002/1182288-20200224214715811-797302703.png"></p>
<p>这样，一个三角形就画好了。</p><br><br>
来源：https://www.cnblogs.com/Vincent-yuan/p/12359055.html
頁: [1]
查看完整版本: 前端学习(12)~css学习(六)：盒模型详解