块级元素和行级元素

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 在排版时将元素忽略