css 中的 box-sizing

此处总结一下 box-sizing 分别等于 content-box 和 border-box 值时的区别

1、border-box

如下在父容器中写了两个孩子 div

		<div class = "father">
            <div class = "child1"></div>
            <div class = "child2"></div>
        </div>

样式如下

            .child1 {
                width: 100px;
                height: 100px;
                padding: 10px;
                background-color: blanchedalmond;
                border: 10px solid black;
                float: left;
                  
            }
            .child2 {
                width: 100px;
                height: 100px;
                padding: 10px;
                background-color: rgb(228, 255, 205);
                border: 10px solid black;
                float: left;
            }

呈现如下图

在这个图中，我们检查发现，它的内容宽度为 100px ，左右 border 分别为10px，padding 也为 10px，就是说，此处的盒子内容宽度就为我们给定的 100px，这是一个标准的盒子模型

但当我们加上 box-sizing:border-box时，就会出现下面这种效果
（更改后的代码为）

.child1 {
                width: 100px;
                height: 100px;
                padding: 10px;
                background-color: blanchedalmond;
                box-sizing: border-box;
                border: 10px solid black;
                float: left;
                  
            }
            .child2 {
                width: 100px;
                height: 100px;
                padding: 10px;
                background-color: rgb(228, 255, 205);
                box-sizing: border-box;
                border: 10px solid black;
                float: left;
            }

更改后的效果为：在这里可以看到，盒子内容 content 变成了60px，为我们设定的 width 减去左右 padding、左右 border，为 content = width(100px) - 2padding(10px) - 2border(10px) ，这是一个怪异盒子模型

2、content-box

当设定 box-sizing:content-box时，就选择了标准盒子模型，因此拥有了标准盒子模型的特性，与第1点正好相反，你可以手动尝试着实践一下，加深印象

意义

在布局的时候使用标准（W3C）盒子模型时，需要时刻重新计算盒子的高度，会比较麻烦，但使用怪异盒子模型时，只需要固定大小，再分配盒子的内容大小，这样就不会打乱整个布局，因此使用好 box-sizing 十分重要