1. 前言
CSS的盒模型是CSS的基础，同时也是难点，这个问题经常在面试中会被问到，属于经典问题了。很多博客里讲得也很模糊不清，于是，我在这里重新整理一下。
可以认为每个html标签都是一个方块，然后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒模型。
2. box-sizing 的定义和语法
- box-sizing 定义了某个元素以特定的方式去计算自身的总宽度和总高度
在CSS盒模型中，浏览器默认定义了元素为标准盒模型，对元素设置的 width 与 height 会应用到元素内容区域。
如果这个元素有任何的 border 与 padding ，都将为该元素加上设置的 border 与 padding ，这意味着当你调整一个元素的内容区域时，需要时刻注意该元素的边框和内边距
box-sizing 属性通过以下值进行调整：
- content-box：标准盒模型（默认值）
box-sizing: content-box;
width = content width
height = content height
元素的大小，会随着border和padding的变化进行绘制
- border-box：IE盒模型
box-sizing: border-box;
width = content width + border + padding
height = content height + border + padding
元素的content，包含了 border 和 padding
content的大小会随着border、padding的增大减小
注：元素的大小包括：边距，边框，填充，和内容。
3.box-sizing 使用场景
1.在form表单上的使用
在原生HTML标签中，元素会带有自身样式。
其中 input 都设置 widht: 100%，发现type为submit属性的 input 自身添加了 box-sizing: border-box;
该input与其他box-sizing的属性值不一样，导致元素宽度的不一致
2. 在div嵌套中使用
以上是 div 中包裹的 3个div，3个div 都添加了 box-sizing: border-box;
因此，只要 div 中的 padding 和 border 总宽度 或 总长度 不超过本身 div 的长度和宽度，就不会超出最大的div
一旦设置某个 div 的属性为 box-sizing: content-box;
此 div 的总高度则会加上 padding 以及 border，便会超出最大的 div
注：padding 和 border 都属于元素本身，不管是设置 content-box,还是 border-box
关于元素本身的事件都可以与之触发
结语
最后，对于新的web站点，你可能希望首先将box-sizing设置为border-box，如下所示：
* { box-sizing: border-box; }
这使得处理元素大小的工作变得容易得多，并且通常消除了在布局内容时可能遇到的许多陷阱。然而，在某些情况下，你应谨慎使用这个属性。例如： 你正在编写一个将由其他人使用的共享组件库，如果他们网站的其余部分没有设置此值，他们可能会发现很难使用你的组件库。
感谢
谢谢你读完本篇文章，希望对你能有所帮助，如有问题欢迎指正。
我是瑾江，如果觉得写得可以的话，请点个赞吧。
「点赞」+「在看」+「转发」 谢谢支持
