css标准文档流

css标准文档流

所谓的标准文档流指的是网页当中的一个渲染顺序，就如同人类读书一样，从上向下，从左向右。网页的渲染顺序也是如此。而我们使用的标签默认都是存在于标准文档流当中。

标准文档流当中的特性

1. 空格产生折叠

当在代码中存在多个空格的时候，空格会出现折叠现象。

2.元素默认底边对齐

当多个元素并排显示的时候，默认会采用底边对齐。

3.文字自动换行

当在一行范围内去输出文字的时候，当一行的宽度不够时，文字会发生自动换行。

块级元素和行内元素

在标准文档流当中，元素分为块级元素和行内元素。

如果想要区分块级元素和行内元素，可以参考下面的特点：

1） 块级元素

● 霸占一行，不能与其他任何元素并列

● 能接受宽、高

● 如果不设置宽度，那么宽度将默认变为父亲的100%。

2） 行内元素

● 与其他行内元素并排

● 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素和行内元素相互转换

在标准文档流当中，元素被分为块级元素和行内元素。并且两种元素严格的遵守着各自的特性和限制。但是标准文档流当中同样允许通过display属性来调整元素的类型。

常用的display的值：

display:none|inline|block|inline-block;

说明：

• none ,让元素消失，在网页不在显示并且不会保存网页当中的位置
• inline,将元素转换为行内元素。
• block,将元素转换为块级元素
• inline-block,将元素转换为行内块元素。

元素如果想要摆脱标准文档流的限制，就需要脱离标准文档流，而脱离标准文档流的方式常见的有浮动、绝对定位、固定定位等等。