理解border-box

box-sizing 可以控制盒模型的行为，默认值是content-box， 另一个属性值是 border-box。在理解 border-box 的作用前，先来看一个例子。

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

容器盒子里面有两个子元素，我们希望两个元素的左右布局，显示在一行。

我们给他配上样式

.container {

    background-color: #aaa;
    width: 600px;
    margin: 10px auto;
    border: 1px solid #000;

}

.left {
    background-color: #fff;
    width: 400px;
    float: left;
    height:200px;
    border: 1px solid #ccc;
}

.right{
    width:200px;
    float:left;
    background-color: #fff;
    border: 1px solid #ccc;
    height:200px;
}

.container::after{
    content: "";
    display: block;
    clear:both;
}

container容器的宽度是600px，子元素 left 的宽度400px，right 的宽度是200px。使用浮动的方式让两个div显示在一行，但结果是右边的div换行了。

原因就是div的box-sizing默认属性值是 content-box， 它的特点是，你设置的width是内容的宽度，如果加上外边距、内边距、和边框的宽度，元素的实际宽度是 width+margin+padding+border 。

所以这里右边的子元素实际宽度是202，因为边框左右各有1px。如果要使得这两个元素放在一行，必须将其中一个元素的 width 减少2px。

除此之外，第二种方式就是将box-sizing的值改成border-box， 该属性的行为表现为：当你设置width：200px， 这个元素的实际宽度就是200px，这个值是内容的宽度+内外边距以及边框之和， 因此，这时候再设置边距只会减少内容的宽度，因为总宽度已经是固定值了。

设置为boder-box后， left 400， right200 加起来宽度正好是600。 所以他们就能显示在一行了。这也是通用做法

同时为了将该属性设置为通用行为，让所有元素的行为表现一致，可以设置全局样式

*;
::before,
::after{
    box-sizing: border-box;
}

有问题可以扫描二维码和我交流

关注公众号「Python之禅」，回复「1024」免费获取Python资源