跳到主要内容位置

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;

小结

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

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买