连我自己把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称为文档流,也不用去纠正。因为一个错误理解如果已经被大多人接受,那它也是对的。

常规流(Normal flow)的更多相关文章

  1. CSS魔法堂:你一定误解过的Normal flow

    前言  刚接触CSS时经常听到看到一个词"文档流",那到底什么是"文档流"呢?然后会看到"绝对定位和浮动定位能脱离文档流",从这句可以看到文 ...

  2. 前端必须了解的布局常识:普通流(normal flow)

    目录 一.概述 二.块级元素和内联元素 常见的块级元素 BFC 常见的行内元素 IFC 三.哪些情况会脱离普通流 浮动 绝对定位 固定定位 display:none 四.总结 五.参考资料 一.概述 ...

  3. Openvswitch原理与代码分析(5): 内核中的流表flow table操作

      当一个数据包到达网卡的时候,首先要经过内核Openvswitch.ko,流表Flow Table在内核中有一份,通过key查找内核中的flow table,即可以得到action,然后执行acti ...

  4. 2018.07.06 洛谷P2936 [USACO09JAN]全流Total Flow(最大流)

    P2936 [USACO09JAN]全流Total Flow 题目描述 Farmer John always wants his cows to have enough water and thus ...

  5. HTML+CSS : 笔记整理(2 常规流,BFC,固定定位,z-index)

    BFC和常规流的关系是什么:常规流遵循BFC,IFC规则. 定位规则总体来说三种: 常规流,浮动,绝对定位(CSS3里面新加了一种flex) 其中常规流包括BFC,IFC等规则,块级元素一个一排地从上 ...

  6. 洛谷P3128 [USACO15DEC]最大流Max Flow

    P3128 [USACO15DEC]最大流Max Flow 题目描述 Farmer John has installed a new system of N-1N−1 pipes to transpo ...

  7. P3128 [USACO15DEC]最大流Max Flow(LCA+树上差分)

    P3128 [USACO15DEC]最大流Max Flow 题目描述 Farmer John has installed a new system of  pipes to transport mil ...

  8. luoguP3128 [USACO15DEC]最大流Max Flow 题解(树上差分)

    链接一下题目:luoguP3128 [USACO15DEC]最大流Max Flow(树上差分板子题) 如果没有学过树上差分,抠这里(其实很简单的,真的):树上差分总结 学了树上差分,这道题就极其显然了 ...

  9. CSS学习(11)常规流

    盒模型:规定单个盒子的规则 视觉格式化模型(布局规则):页面中多个盒子的排列规则 三种方式: 1.常规流 2.浮动 3.定位 常规流布局 常规流   也可以叫做   文档流.普通文档流.常规文档流 所 ...

随机推荐

  1. 为什么我的子线程更新了 UI 没报错?借此,纠正一些Android 程序员的一个知识误区

    开门见山: 这个误区是:子线程不能更新 UI ,其应该分类讨论,而不是绝对的. 半小时前,我的 XRecyclerView 群里面,一位群友私聊我,问题是: 为什么我的子线程更新了 UI 没报错? 我 ...

  2. python常用数据结构

    0. 字典初始化 d = {'a':1,'b':2} 或 d={} d['a'] = 1 d['b'] = 2 是不是和json格式数据很相似,语法和JavaScript又很相似 1. 变量接受序列分 ...

  3. python实战===如何优雅的打飞机

    这是一个打飞机的游戏,结构如下: 其中images中包含的素材为 命名为alien.png    命名为ship.png 游戏效果运行是这样的: 敌军,也就是体型稍微大点的,在上方左右移动,并且有规律 ...

  4. 基于 HTML5 Canvas 的简易 2D 3D 编辑器

    不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成 ...

  5. 匿名HTTP透明HTTP高匿HTTP区别

    透明代理的意思是客户端根本不需要知道有代理服务器的存在,但是它传送的仍然是真实的IP.你要想隐藏的话,不要用这个. 普通匿名代理能隐藏客户机的真实IP,但会改变我们的请求信息,服务器端有可能会认为我们 ...

  6. 上班打卡--- 通过批处理命令执行jar文件来记录上班时间

    如果 一个程序员要记录自己上班工作时间的话 ,还需要靠手动去记录, 那就有点 不够范了, 程序员自然要有自己的极客范儿 , 下面就跟我一起来(zhuangbi); 先列一下整体的步骤: 1: 先做一个 ...

  7. QTP日期格式化

    '以下函数将日期参数进行格式转化,例如:2017-01-02 Function ShortDateToLongDate(strChangeDate)    b=split(strChangeDate, ...

  8. centos 下安装pptp (vpn) 的方法

    废话少说     01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...

  9. The authenticity of host 'github.com (192.30.253.113)' can't be established.

    在初始化git之后(git init),同时在github建立好仓库之后,本地也新增了ssh kye(ssh-keygen -t rsa -C 'mail address'),同时也在本地新增了远程仓 ...

  10. linux上kafka模拟客户端发送、接受消息

    producer   消息的生成者,即发布消息 consumer   消息的消费者,即订阅消息 broker     Kafka以集群的方式运行,可以由一个或多个服务组成,服务即broker zook ...