理解border-box

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

 div {
     width: 100px;
     height: 100px;
     background-color: lightgreen;
     border: 10px solid lightcoral;
     padding: 50px;
}

我给div指定了100px的宽度，同时设置了border和padding，最后你会发现盒子的宽度最后变成了220px。

原因是div的box-sizing默认属性值是 content-box， 它的特点是，你设置的width仅仅是实际内容区域的宽度，而元素的实际宽度是 width+padding+border 。

如果要让实际宽度为100px，同时保留padding和border值，就必须调整width属性的值。

当然，还有另一种办法就是使用box-sizing的另一个属性：border-box该属性的行为表现为：当你设置width：200px， 这个元素的实际宽度就是200px，这个值是内容的宽度+内边距以+边框之和， 因此，这时候再设置内边距只会减少内容的宽度，因为总宽度已经是固定值了。

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

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

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