1. 标准文档流是什么？
标准文档流(normal-flow)是学习css的重要概念之一，css是用来装饰html元素的样式，标准文档流指的就是css规定的html元素之间排布方向的标准流向，即css规定html元素之间为从左到右、从上到下的流向排布，如下图所示排布：
2. 文档流中的元素分类
由上图可看出，有的元素是横向排布直至占满一行后才换行，而有的元素是自己就占了一行，新增元素直接占据下一行，这样的排布将元素分成了两大类。
内联元素
内联即inline元素，特点是元素大小由其内联内容(如文字)的长宽决定的，典型的有span元素，其排布顺序为从左到右、从上到下排布，不浪费空间，直到达到最右边才换行，因此会存在将元素分成两半的情况，如下图所示：
特点：
- 无法设置其宽width和高height，只能由其内联内容的大小决定，即不接受自定义宽高。
- 该元素下的自定义上下margin值没有用，左右margin值有用。
- padding的左右值会改变实际宽度，但padding的上下值只是会改变可视高度，不会改变文档流中定义的元素的实际高度。可能有点抽象，我也觉得有点难以理解，看图解释如下：给内联元素设置了padding从视觉上看其变大了，但是文档流认识其宽度，但不认识其高度，还是以其原来的高度来定位其位置，因此给下一个div元素分配空间时也是以span占据的原来的高度往下分配的，因此称为padding只是改变内联元素视觉高度，不改变其实际高度。内联元素的实际大小只能由其内联内容决定。
- 内联元素的实际高度由其行高属性间接决定，即{line-height: 100px}，与height的值无关，如下图所示设置了span元素的行高后，实际高度变高，但视觉高度没有变高。之所以说是间接影响，是因为如果换个字体，高度就会改变了。(css的属性间不正交引起的)
块级元素
块级即block元素，特点是每一个元素都自己占一行，典型的有div元素，其排布顺序默认是从上往下一行行排布，新增一个就向下排布一个，如下图所示：
特点：
- 默认高度由其包含的文档流内容的高度决定，若里面的内容不是文档流元素，如脱离了文档流的元素，则不归块级元素管，不包含在块级元素的高度范围内。 默认宽度为auto，即要多宽有多宽，默认占满一行，但宽度不是100%。
- 可以自定义宽度和高度，宽度不满一行整个元素也占一行。即只要是块级元素，即属性值为block，则就是自己独占一行。
实际不区分
实际上，html元素根本没有内联元素和块级元素之分，只是如果不自行设置，某些元素会被浏览器默认以某种类型展示，如span元素即默认是内联类型，div元素默认是块级类型。但其实任何一个html元素都可通过设置对应的css属性来设置其需要的流动类型。这个css属性就是{display: inline / block / inline-block}，每个属性值解释为：
display: inline：设置为该属性值后，元素即拥有内联的属性，排布样式和特点即为上述内联元素的排布样式和特点。
display: block：设置该属性值后，元素即成了块级元素，遵循块级元素的排布顺序和特点。
display: inline-block：内联块，这个属性值是综合了内联元素和块级元素的特点，不会将一个元素分成两半，始终维持元素成块的特点，即inline值下的元素直至铺满才换行，存在元素分成两半的情况，但inline-block值下的元素若该行放不下该元素就会另起一行，如下图所示：
与此同时，其拥有的特点也区分于inline，继承了block的一些特点，具体如下：
特点：
- 和inline元素一样默认大小为内联内容大小，但是inline-block元素允许设置width、height来自定义宽度和高度。
- 自定义margin的上下左右值均有效。
- padding值会改变元素的实际大小。如下图所示：
3. 补充说明
以上所指的在文档流中的元素分为实际大小和视觉大小，其中的实际大小是指，css按照标准文档流规则排布元素时看到的元素所占据的大小，除去元素占据的大小，将剩余的空间再次分配。而视觉高度是指，加了border后人眼看到的元素大小，可能因为和实际大小不符合而遮盖下面的元素。
若有收获，就点个赞吧
0 人点赞
