2分钟掌握网页文档流、布局和定位

什么是文档流

文档流是 HTML 元素在网页上的排列方式。

HTML 元素分为块级元素和行内元素。块级元素在浏览器中会占满容器的宽度，后面的块级元素会在新的一行进行排列，例如 div 和 p 元素都是块级元素。

行内元素的宽度是根据内容宽度来决定的，后面如果有剩余空间，会被其它文本或者行内元素占据。

这种浏览器默认的排列方式，称为正常文档流（Normal Flow）。

修改文档流

如果要实现精美、复杂的布局，修改网页的文档流就不可避免了。

修改文档流主要通过 display 属性、multi-column 布局、float 布局和 postion 定位来实现。

它们其中有的会使元素脱离正常的文档流，可以理解为把这个元素放到了新的图层里，之前它占据的空间会被后面的元素补上。

通过 display 属性，我们可以把块级元素改为行内元素，把行内元素改为块级元素，或者行内、块级兼具的元素：

display: inline;
display: block;
display: inline-block;

还可以设置全新的布局方式：flexbox 和 grid，子元素的布局会根据它们的设置而改变：

display: flexbox;
display: grid;

老一代的 table 布局也是类似的：

display: table;
display: table-row;
display: table-cell;

这些设置都不会让元素脱离正常的文档流。

CSS multi-column layout 可以进行多列布局，它也不会让元素脱离正常的文档流。

column-count: 3;

Float 布局可以把元素移动到左侧或右侧，会使元素脱离正常文档流：

float: left;
float: right;

对于 Postion 属性，它是针对单个元素设置定位，进行位置微调。默认为 static，即遵守正常文档流或布局设置：

postion: static;

relatvie 可以让元素根据最近的，设置了 position 为非 static 值的父级容器，进行偏移，但不会脱离文档流：

postion: relative;
top: 20px;
left: 12px;

接下来几个定位值，会脱离正常文档流。

• absolute
• fixed
• sticky

absolute 绝对定位，与 relative 类似，可以根据最近的，设置了 position 为非 static 值的父级容器，进行偏移，但是元素会脱离文档流：

position: absolute;
top: 20px;
left: 12px;

fixed 固定定位，可以基于浏览器可视区域进行偏移和定位，并且永久保持在那个位置：

position: fixed;
right: 0;
bottom: 0;

sticky 粘滞定位，它会在浏览器滚动到设置的偏移位置后，脱离文档流，并保持在这个位置：

position: sticky;
top: 20px;

小结

好了， 这个就是网页文档流的概念，以及修改文档流的方法，你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！