在css中，为每个元素生成了包含元素的盒子。盒子由 内容区域 + 内边距 + 边框 + 外边距组成

注：css中box-sizing属性值可用于设定其盒子模型。默认值为 content-box （width = 内容区域宽度）；border-box（width = content + padding + border）

css在执行渲染的过程中，将由元素转化为的盒子，由左至右，有上而下的排列形成文档流。在正常的文档流中，根据盒子的不同类型进行布局。

盒子的类型：

主要分为块级盒子和行内级盒子。

块级盒子：不与其余盒子共享一行，垂直排列。在同一个BFC中，会有上下边距重叠现象。

行内级盒子：由左向右排列，由行内元素构成，组成IFC。行内元素分为可替换元素和不可替换元素。可替换元素，是指浏览器根据元素的属性来判断显示的元素，例如input，select，img...，这类元素布局时 可设置宽高，padding，border，margin计入计算。

相关基础概念：

    visual formatting model 视觉格式化模型：将文档树根据css盒模型转化为一个个盒子

    块（block 垂直方向上依次堆叠），包含块（包含其他盒子的块），盒子（box）

    块级元素（block-level element 元素本身的属性），块级盒子（由块级元素生成）,块盒子（是块容器的块级盒子），匿名块盒子（Anonymous block box 不能用CSS选择符选中），块容器盒子（用于确定子元素的定位）

    行内级元素（inline-level element display 为 inline、inline-block、inline-table 的元素）,行内级盒子（由行内级元素生成），行内盒子，具名行内盒子，匿名行内盒子，原子行内级盒子（不参与行内格式化上下文创建的行内级盒子，原子行内级盒子的内容不会拆分成多行显示） 

    Formatting Context 格式化上下文：拥有一套渲染规则的渲染区域

    替代元素：浏览器通过标签的元素以及属性来判断显示的内容，比如<input> <img> ...

解析：

    1 diaplay:block|list-item|table 的元素为块级元素    被格式化为至少一个 块级盒子（参与BFC的创建）

    2 匿名块盒子：

     块包含盒子中的块级盒子时，在相邻的行内级盒子外创建匿名块盒子  该盒子的样式从父元素继承能被继承的属性，不能继承的被设置为initial

    行内级盒子内包含块级盒子时

3 display:inline|inline-block|inline-tabel 的元素为行内元素 参与IFC的创建

格式化上下文

BFC 块格式化上下文

        根元素 html  |  浮动元素 | 绝对定位元素 | overflow不为visible | dispaly：inline-block，tabel-*| 父元素display:flow-root

        外边距叠加只会出现在在同一BFC内的块级元素之间

IFC 行内格式化上下文

    行框：包含来自同一行的盒子的矩形区域，并不实际渲染(计算行高时，非替换元素的内外边距和边框不计入计算，而替换元素以及display:inline-block按照margin box参与计算)

    行内级盒宽<行宽  水平分布按照text-align

    行内级盒宽>行宽  可分割情况下，分为多行展示 ,内外边距，边框在分割处没有效果；无法分割（inline-block，white-space），溢出

注： 行框的baseline是由匿名行内框的x底部的位置决定的

        行内框vertical为baseline时  代表其基线与行框的基线对齐

         inline-block中有内容时，以内容的基线对齐