常规流(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   ,如需转载请自行联系原作者

相关文章
|
7月前
|
数据库
大事件后端项目25-------更新文章分类和添加文章分类---分组校验
大事件后端项目25-------更新文章分类和添加文章分类---分组校验
|
8月前
Pyglet控件的批处理参数batch和分组参数group简析
Pyglet控件的批处理参数batch和分组参数group简析
61 0
Input 标签监听内容输入(change、input 事件区别)
Input 标签监听内容输入(change、input 事件区别)
223 0
UE4/5 使用Sequence录制功能,实现自定义蓝图逻辑的运行
UE4/5 使用Sequence录制功能,实现自定义蓝图逻辑的运行
379 0
UE4/5 使用Sequence录制功能,实现自定义蓝图逻辑的运行
|
数据采集 移动开发 数据可视化
空间转录组|Load10X_Spatial函数修改适配多形式数据 + 空转标准流程
空间转录组|Load10X_Spatial函数修改适配多形式数据 + 空转标准流程
671 0
|
并行计算
CUDA stream默认流与非默认流
CUDA stream默认流与非默认流
391 0
CUDA stream默认流与非默认流
|
SQL 存储 运维
FLIP-147:支持包含结束任务的 Checkpoint 操作与作业结束流程修正
为了完善流执行模式对有限数据流的支持,所进行的改动以及更详细的实现。
FLIP-147:支持包含结束任务的 Checkpoint 操作与作业结束流程修正
SAP WM 2-Step Picking流程里创建的Group的分析
SAP WM 2-Step Picking流程里创建的Group的分析
SAP WM 2-Step Picking流程里创建的Group的分析
|
机器学习/深度学习 存储 人工智能
TensorFlow 2.0将把Eager Execution变为默认执行模式,你该转向动态计算图了
8 月中旬,谷歌大脑成员 Martin Wicke 在一封公开邮件中宣布,新版本开源框架——TensorFlow 2.0 预览版将在年底之前正式发布。今日,在上海谷歌开发者大会上,机器之心独家了解到一个重大的改变将会把 Eager Execution 变为 TensorFlow 默认的执行模式。这意味着 TensorFlow 如同 PyTorch 那样,由编写静态计算图全面转向了动态计算图。
211 0
TensorFlow 2.0将把Eager Execution变为默认执行模式,你该转向动态计算图了
重构——45将查询函数和修改函数分离(Separate Query from Modifier)
将查询函数和修改函数分离(Separate Query from Modifier):某个函数即返回对象状态,又修改对象状态;建立两个不同的函数,其中一个负责查询,另一个负责修改
1900 0