常规流(Normal flow)

简介:

连我自己把float和绝对定位,都称为脱离文档流,想想概念又不那么清晰,于是寻找了W3C资料来理解,才发觉不应该叫文档流。

资料

英文:https://www.w3.org/TR/CSS22/visuren.html#normal-flow

中文:http://w3help.org/zh-cn/kb/010/

PS:资料中文翻译为常规流,我觉得直译为普通流也行。

常规流

这个概念定义了什么东西,它决定了什么?它决定元素的布局方式,是基本的布局模式!

盒子模型

盒子模型,是DOM元素的抽象定义。盒子模型里,元素有margin、border、padding、content,分为块元素和内联元素两种。

块级元素(block)

块级元素会一个接一个地被垂直放置,起点是包含块的顶部。

内联元素(inline)

内联元素会一个接一个地水平排列,起点是包含块的顶部。

常规流布局

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

PS:float、absolute是另外布局方式,position:relative属于常规流。

总结

其实也是简单东西,理解模糊时想复杂了。另外,即使别人将normal flow称为文档流,也不用去纠正。因为一个错误理解如果已经被大多人接受,那它也是对的。

\


本文转自 海角在眼前 博客园博客,原文链接:http://www.cnblogs.com/lovesong/p/8052322.html   ,如需转载请自行联系原作者

相关文章
yolov8在进行目标追踪时,model.track()中persist参数的含义
yolov8在进行目标追踪时,model.track()中persist参数的含义
|
6月前
Pyglet控件的批处理参数batch和分组参数group简析
Pyglet控件的批处理参数batch和分组参数group简析
41 0
|
数据采集 移动开发 数据可视化
空间转录组|Load10X_Spatial函数修改适配多形式数据 + 空转标准流程
空间转录组|Load10X_Spatial函数修改适配多形式数据 + 空转标准流程
622 0
|
调度 开发者
Flow file 生成器2 | 学习笔记
快速学习 Flow file 生成器2
113 0
Flow file 生成器2 |  学习笔记
|
负载均衡 数据处理 开发者
Flow File 操作2 | 学习笔记
快速学习 Flow File 操作2
Flow File 操作2  |  学习笔记
|
开发者
Flow File 操作1 | 学习笔记
快速学习 Flow File 操作1
|
SQL 存储 运维
FLIP-147:支持包含结束任务的 Checkpoint 操作与作业结束流程修正
为了完善流执行模式对有限数据流的支持,所进行的改动以及更详细的实现。
FLIP-147:支持包含结束任务的 Checkpoint 操作与作业结束流程修正
|
调度
仿Flow构建器创建数据流
仿Flow构建器创建数据流
137 0
仿Flow构建器创建数据流
SAP SD基础知识之凭证流(Document Flow)
SAP SD基础知识之凭证流(Document Flow)
SAP SD基础知识之凭证流(Document Flow)