1、每个块级元素生成一个主块级盒(principal block-level box),用它来包含子级盒
2、每个行级元素生成一个行级盒,行级盒分布于多行
3、块级盒子的子级盒子
- 块级盒子中可以包含多个子块级盒子
- 也可以包含多个行级盒子
- 不在行级元素里面的文字,会生成匿名行级盒。比如
<p>Some <em>Text</em></p>
- 块级盒子中不能同时包含块级和行级盒子。遇到这种情况时,会生成匿名块级盒来包含行级盒。比如
<div><h1>标题</h1><span>2016-12-12</span></div>
4、行级盒子的子盒子
- 行级盒子内可以包含行级盒子
- 行级盒子包含一个块级盒子时,会被块级盒子拆成两个行级盒子,这两个盒子又分别被匿名块级盒包含
5、display属性
- block 生成块级盒
- inline 生成行级盒
- inline-block 生成行级盒,为其内容生成块级盒
- none 在排版时将元素忽略