下面我们以<div><div>为例子。<div></div>标签被浏览器解析后会生成div元素并添加到document tree中，但CSS作用的对象并不是document tree，而是根据document tree生成的render tree，而盒子模型就是render tree的节点。
* 注意:
* 1. CSS作用的是盒子(Box), 而不是元素(Element);
* 2. JS无法直接操作盒子。
盒子模型的结构
由于块级盒子在验证效果时干扰信息更少，便于理解盒子模型，因此下面将以块级盒子模型来讲解。
注意： 行级盒子模型与块级盒子模型结构一致，只是行级盒子在此基础上有自身特性而已。
从上面两幅图说明盒子模型其实就是由以下4个盒子组成：
1. content box：必备，由content area和4条content/inner edge组成；
2. padding box：可选，由padding和4条padding edge组成。若padding宽度设置为0，则padding edge与content edage重叠；
3. border box：可选，由border和4条border edge组成。若border宽度设置为0，则border edge与padding edage重叠；
4. margin box：可选，由margin和4条margin/outer edge组成。若margin宽度设置为0，则margin edge与border edage重叠。
对于刚接触CSS的同学，经常会将"通过width/height属性设置div元素的宽/高"挂在口边，其实这句话是有误的。
1. 首先css属性width和height作用于div元素所产生的盒子，而不是元素本身;
2. 另外盒子模型由4个盒子组成，那width和height到底是作用于哪些盒子呢？
这里就分为IE盒子模型和标准盒子模型了。
IE5.5(怪异模式)采用IE盒子模型，其它将使用W3C标准盒子模型。
width = content-width + padding-width + border-width height = content-height + padding-height + border-height
标准盒子模型
width = content-width
height = content-height
我们看到存在两种width/height的划分方式，到底哪种才对呢？其实两种都对，具体看如何使用而已。另外IE8开始支持CSS3属性box-sizing，让我们可以自由选择采用哪种盒子:)
box-sizing:content-box/border-box/inherit
content-box——默认值，采用Standard box model
border-box——采用IE box model
inherit——继承父元素属性值
IFC
IFC(Inline Formatting Context),直译为“行内格式化上下文”。我们简单理解为每个盒子都有一个FC特性，不同的FC值代表一组盒子不同的排列方式。有的FC值表示盒子从上到下垂直排列，有的FC值表示盒子从左到右水平排列等等。而IFC则是表示盒子从左到右的水平排列方式，仅此而已(注意：一个盒子仅且仅有一个FC值)。而inline-level box的FC特性值固定为IFC。另外仅处于in-flow的盒子才具有FC特性，也就是positioning scheme必须为Normal flow的盒子才具有FC特性。
除了IFC外，对于inline-level box排版而言还有另一个重要的对象，那就是line box。line box是一个看不见摸不着的边框，但每一行所占的垂直高度其实是指line box的高度，而不是inline-level box的高度。
line box的特点：
1. 同一行inline-level box均属于同一个line box；
2. line box高度的计算方式https://www.w3.org/TR/CSS21/visudet.html#line-height
行级盒子小结
**就盒子模型而言**
1. inline-level box与block-level box结构一致;
2. content box的高度仅能通过属性font-size来设置，content box的宽度则自适应其内容而无法通过属性width设置;
3. 当inline-level box的宽度大于containing block，且达到内容换行条件时，会将inline-level拆散为多个inline-level box并分布到多行中，然后当属性direction为ltr时，margin/border/padding-left将作用于第一个的inline-level box，margin/border/padding-right将作用于最后一个的inline-level box;若属性direction为rtl时，margin/border/padding-right将作用于第一个的inline-level box，margin/border/padding-left将作用于最后一个的inline-level box。
**垂直排版特性**
inline-level box排版单位不是其本身，而是line box。重点在于line box高度的计算。
1. 位于该行上的所有in-flow的inline-level box均参与该行line box高度的计算;(注意：是所有inline-level box，而不仅仅是子元素所生成的inline-level box)
2. replaced elements, inline-block elements, and inline-table elements将以其对应的opaque inline-level box的margin box高度参与line box高度的计算。而其他inline-level box则以line-height的实际值参与line box高度的计算;
3. 各inline-level box根据vertical-align属性值相对各自的父容器作垂直方向对齐;
4. 最上方的box的上边界到最下方的下边界则是line box的高度。（表述不够清晰，请参考实例理解）
IFC布局规则：
框会从包含块的顶部开始，一个接一个地水平摆放。
摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。
行框一定会高到足以容纳它所包含的全部框。然而，它也可能比它所包含的最高的框还要高（例如：这些框是以基线对齐）。当框 B 的高度小于包含它的行框时，则 B 在行框中垂直对齐的位置由’vertical-align’ 属性来决定。当几个行级框在水平方向上无法塞得进同一个行框时，它们会被分布在两个或多个垂直堆放的行框中。行框会以既没有垂直间距 也没有重叠的方式被垂直堆放起来。
通常，行框的左边紧贴其包含块的左边，而行框的右边紧贴其包含块的右边。然而，浮动框可以插在包含块边缘与行框边缘之间。因此，尽管在同一个IFC中的行框通常有同样的宽度（也就是其包含块的宽度），但它们的宽度也可能受浮动让水平可用空间减少的影响而有所改变。在同一个IFC中，行框的高度通常是变化的（例如：某一行包含了一个比较高的图片，而其它行只包含文本）。
当一行上的行级框的总宽度小于包含它们的行框的宽度，则它们在行框内的水平分布由’text-align’属性来决定。
当一个行内框的宽度超过了行框的宽度，则它会被分割成几个框，而这些框会分布在几个行框。如果此行内框不可分割（例如：单个字符、或语言指定的文字打断规则不允许在此行内框中出现打断、或该行内框受 white-space 属性为 nowrap或 pre 的影响），那么该行内框溢出该行框。
行内框被分割的时候，外边距、边框和内边距在出现分割的地方都没有视觉效果。
**行高计算 ― ‘line-height’ 与 ‘vertical-align’ 属性**
计算行框里的各行内级框的高度。对于置换元素、行内块元素、行内表格元素来说，这是边界框的高度，对于行内框来说，这是其 ‘line-height’。
行内级元素根据其 ‘vertical-align’ 属性垂直对齐。
行框的高是最顶端框的顶边到最底端框的底边的距离。
BFC
BFC(Block Formatting Context)块级格式化上下文
BFC则是表示盒子从上到下的垂直排列方式，仅此而已(注意：一个盒子仅且仅有一个FC值)。
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
实现BFC：
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
