所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
- css盒子模型 又称框模型 (Box Model)，是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子，所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小，每个框影响着其他元素框的位置和大小。它包括：外边距（margin），内边距（padding），边框（border），内容（content）。
- 标准w3c盒子模型和IE盒子模型
盒子模型的本质是将页面上的一个个元素看做是一个个盒子，渲染器通过分析这些盒子的大小从而来对整个网页进行布局。标准盒子模型和IE盒子模型的区别在于其对元素的width和height的不同解析：（元素的width和height的大小指的就是我们给元素设置的width和height的大小）。
标准w3c盒子模型：元素的width和height = content
IE盒子模型：元素的width和height =( content+border+padding )
如下：
标准w3c盒子模型
标准w3c盒子模型.jpg
标准w3c盒子模型的width = content的widht
标准w3c盒子模型的height = content的height
// 所占区域
标准w3c盒子模型所占区域的总宽度 = content的widht + padding的左右边距和 + 左右border和 + margin的左右边距和
标准w3c盒子模型所占区域的总高度 = content的height + padding的上下边距和 +上下border和 + margin的上下边距和
IE盒子模型
IE盒子模型.jpg
IE盒子模型的width = content的widht + padding的左右边距和 + 左右border和
IE盒子模型的height = content的height + padding的上下边距和 +上下border和
// 所占区域
IE盒子模型所占区域的总宽度 = content的widht + margin的左右边距和
IE盒子模型所占区域的总高度 = content的height + margin的上下边距和
- box-sizing
CSS3中新增的属性：
box-sizing模拟了标准盒子模型和IE盒子模型box-sizing:content-box | bordrer-box | padding-box | inherit。
默认值：content-box:标准盒子模型
border-box:IE盒子模型(怪异模式)
padding-box:padding计算入width内
此处只列举常用的两种模式
//标准盒子模型
div{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
//IE盒子模型
div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
兼容：ie8+浏览器支持content-box和border-box，ff则支持全部三个值,只有ff支持padding-box，IE浏览器在getComputedStyle得到width/height是按照标准模式计算的，而不论box-sizing的取值。
建议：使用w3c标准盒子，对浏览器的兼容度较高，是网页兼容各浏览器
-
盒子模型空间结构
盒子模型空间结构.png
如图，盒子模型的空间结构可以理解为，从上到下依次是,
1. border
2. content+padding
3. background-image
4. background-color
5. margin
相关文章：
https://www.jianshu.com/p/6e7d830a5102
https://www.jianshu.com/p/366665ab9c1c
今天的成功是因为昨天的积累，明天的成功则依赖于今天的努力。成功需要一个过程。
网友评论