# 盒模型
盒模型又名框模型，是一种网页设计思维模型，它把文档节点看成一个盒子。
在HTML文档解析过程中，每个节点都会被描述为一个盒模型，然后一个盒子套进另一个盒子中，再依据各个节点对应的CSS规则，最后渲染成一个井井有条的页面。
组成
盒模型由以下属性组成，由外到内用公式表示就是：
box = margin + border + padding + content。除了content(不是属性，作为盒模型扩展理解使用)，其余属性都包含left、right、top和bottom等扩展属性。
margin：边距，外部透明区域，负责隔离相邻盒子border：边框，内部着色区域，负责隔离边距和填充，包含width、style、color三个扩展属性padding：填充，内部着色区域，负责扩展盒子内部尺寸content：内容，以文本或节点存在的占用位置
重点提醒，padding着色随
background-color而变，可用background-clip隔离，该情况在第10章背景与遮罩中会详细讲解。
节点由外到内一层一层深入，通过上述公式组成了一个完整的盒模型。所以在理解盒模型时记住这4个属性及其从外到内的顺序即可。换另一种方式理解，可把它看做你的快递包裹。两个快递包裹间的距离就是margin，快递包裹的纸皮就是border，打开快递包裹，填充物料就是padding，把填充物料打开看到了你的物品，那就是content。这样理解是不是特别容易呢？
类型
由于历史原因，盒模型分化成两种类型，分别是标准盒模型和怪异盒模型。具体原因在第2章浏览器有提及。
所以CSS3里提供一个属性用于声明盒模型的类型，它就是box-sizing
content-box：标准盒模型(默认)border-box：怪异盒模型
它不具备继承性，若全局统一盒模型，那只能使用*声明box-sizing了。建议使用reset.css里的方式声明。
标准盒模型
标准盒模型是W3C规范的标准，由
margin + border + padding + content组成。与上述提到的公式一模一样，节点的width/height只包含content，不包含padding和border。
- 节点的尺寸计算公式如下。
- 横向：
margin-[left/right] + border-[left/right]+ padding-[left/right] + width - 纵向：
margin-[top/bottom] + border-[top/bottom]+ padding-[top/bottom] + height
- 横向：
- 节点的宽高计算公式如下。
- 横向：
width = width - 纵向：
height = height
- 横向：
怪异盒模型
怪异盒模型又名IE盒子模型，是IExplore制定的标准，由margin + content组成。与上述提到的公式一不同，节点的width/height包含border、padding和content。
- 节点的尺寸计算公式如下
- 横向：
margin-[left/right] + width(包含border-[left/right]和padding-[left/right]) - 纵向：
margin-[top/bottom] + height(包含border-[top/bottom]和padding-[top/bottom])
- 横向：
- 节点的宽高计算公式如下
- 横向：
width = border + padding + width - 纵向：
height = border + padding + height
- 横向：
在IExplore中，若HTML文档缺失
<!doctype html>声明则会触发怪异盒模型
两者区别
通过代码演示可能会更清晰，width和height的范围也一目了然，其实两者区别在于width和height包不包含border和padding。把上述公式记清楚，两者区别就迎刃而解了
.content-box {
box-sizing: content-box;
margin: 100px;
padding: 50px;
border: 10px solid #66f;
width: 80px;
height: 80px;
background-color: #f66;
}
.border-box {
box-sizing: border-box;
margin: 100px;
padding: 50px;
border: 10px solid #66f;
width: 80px;
height: 80px;
background-color: #f66;
}
# 视觉格式化模型
- 上述盒模型都是平时了解到的概念，若使用display对这个简单盒模型稍微加工则会进化到视觉格式化模型
- 视觉格式化模型指在视觉媒体上处理和显示文档而使用的计算规则。它是一种CSS机制，由大量CSS规范组成，规定了节点在页面中的排版。
块级元素
- 当节点的display声明为block、list-item、table、flex或grid时，该节点被标记为块级元素。块级元素默认宽度为100%，在垂直方向上按顺序放置，同时参与块格式化上下文。
- 每个块级元素都至少生成一个块级盒，或一个块容器盒，块级盒描述它与兄弟节点间的表现方式，块容器盒描述它与子节点间的表现方式。
- 一个块容器盒只包含其他块级盒，或生成一个行内格式化上下文只包含行内盒。或许一段代码中某一个块容器盒同时包含块级盒和行内盒的情况，但实质上在这种情况下会产生一种新的匿名块盒解决该问题。
行内元素
- 当节点的display声明为inline、inline-
