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资源
