artdong
commented
4 years ago CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。 为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。
标准盒模型和IE盒模型
标准盒子模型和IE盒子模型的区别在于其对元素的width和height的不同解析：元素的width和height的大小指的就是我们给元素设置的width和height的大小。
标准盒模型：元素的width和height = content
IE盒模型：元素的width和height = content+border+padding
由于不同盒子模型对元素的大小的不同解析从而导致整个元素框的大小有不同的解析
标准盒模型：
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度； 元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
IE盒模型：
元素框的总宽度 = 元素（element）的width + margin的左边距和右边距的值； 元素框的总高度 = 元素（element）的height + margin的上下边距的值。
box-sizing：设置盒子模型
CSS3中新增的属性：box-sizing模拟了标准盒子模型和IE盒子模型box-sizing:content-box | bordrer-box | padding-box | inherit。
默认值：content-box:标准盒子模型(border和padding不计算入width之内)
border-box:IE盒子模型(border和padding计算入width之内，其实就是怪异模式了~)
padding-box:padding计算入width内
浏览器支持
ie8+浏览器、Opera 、Safari以及 Chrome支持content-box和border-box； Firefox则支持全部三个值,只有Firefox支持padding-box。
介绍一下css盒子模型