CSS的box-sizing

大家肯定都遇到过如下问题：

width: 100%;
border: solid #5b6dcd 10px;
padding: 5px;

显示结果如下：

本来100%结果却超出了父容器

这时候加下面一行就可以了：

box-sizing: border-box;

显示结果如下：

那box-sizing是干什么的呢？

box-sizing是盒子的尺寸类型，定义了应该如何计算一个盒子的总宽度和总高度

它有两个值：

• content-box：大部分浏览器的默认值，content盒子类型，width和height只包括content的宽和高，不包括padding、border
• border-box：当文档处于 Quirks 模式 时 IE 的默认值，border盒子类型，width和height包括content、padding、border

因此上面的示例100%却超出了父容器，是因为box-sizing默认是content-box，width: 100%只是content是100%，padding和border增加了元素的总宽度，所以超出了父容器。定义了box-sizing: border-box后width: 100%包含了content、padding、border，元素的总宽度就是100%，因此刚好撑满父容器

在我们开发中大部分使用的是border-box，因此最好给元素默认加上border-box