1、什么是文档流

将窗体自上而下分成一行一行, 块级元素从上至下、 行内元素在每行中按从左至右的挨次排放元素,即为文档流。

2、行内元素、块级元素、行内块级元素

2.1、行内元素

span、em、i，以及有sub和sup这两个标签可以直接做出平方的效果sub sup。

特征：

• 设置宽高无效
• 对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
• 不会自动进行换行

2.2、块级元素

div、p、h1-h6，以及有html5里面的header, section, footer, aside, nav, main, article, figure。

特征：

• 能够识别宽高
• margin和padding的上下左右均对其有效
• 可以自动换行
• 多个块状元素标签写在一起，默认排列方式为从上至下。

行内块级元素

结合行内元素和块级元素的特性

特征：

• 不自动换行
• 能够识别宽高
• 默认排列方式为从左到右