连我自己把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. 线性回归,附tensorflow实现

    本文同步自:https://zhuanlan.zhihu.com/p/30738405 本文旨在通过介绍线性回归来引出一些基本概念:h(x),J(θ),梯度下降法 有一组数据: x=[1,2,3,4, ...

  2. 2943:小白鼠排队-poj

    2943:小白鼠排队 总时间限制:  1000ms 内存限制:  65536kB 描述 N只小白鼠(1 < N < 100),每只鼠头上戴着一顶有颜色的帽子.现在称出每只白鼠的重量,要求按 ...

  3. Akka(39): Http:File streaming-文件交换

    所谓文件交换指的是Http协议中服务端和客户端之间文件的上传和下载.Akka-http作为一种系统集成工具应该具备高效率的数据交换方式包括文件交换和数据库表行的上传下载.Akka-http的数据交换模 ...

  4. Ubuntu下编译Bilibili/ijkplayer

    在做Android客户端视频播放器的过程中熟悉ijkplayer.他在视频支持协议上要比Android原生的mediaplayer做的要好.因此,自己也基于Bilibili/ijkplayer的重新编 ...

  5. 【java提高】---HashMap解析(一)

    HashMap解析(一) 平时一直再用hashmap并没有稍微深入的去了解它,自己花点时间想往里面在深入一点,发现它比arraylist难理解很多,好多东西目前还不太能理解等以后自己知识更加丰富在过来 ...

  6. 项目实战7—Mysql实现企业级数据库主从复制架构实战

    Mysql实现企业级数据库主从复制架构实战 环境背景:公司规模已经形成,用户数据已成为公司的核心命脉,一次老王一不小心把数据库文件删除,通过mysqldump备份策略恢复用了两个小时,在这两小时中,公 ...

  7. 方格取数洛谷p1004

    题目描述 设有N*N的方格图(N<=9),我们将其中的某些方格中填入正整数,而其他的方格中则放 人数字0.如下图所示(见样例): A 0 0 0 0 0 0 0 0 0 0 13 0 0 6 0 ...

  8. CDH集群搭建部署

    1. 硬件准备     使用了五台机器,其中两台8c16g,三台4c8g.一台4c8g用于搭建cmServer和NFS服务端,另外4台作为cloudera-manager agent部署CDH集群. ...

  9. python 3.6 +pyMysql 操作mysql数据库

    版本信息:python:3.6 mysql:5.7 pyMysql:0.7.11 ########################################################### ...

  10. jsp内置对象 的使用范围和类型【说明】

    jsp内置对象 jsp内置对象有以下9种,我们会在后面的章节中分别介绍他们.这9种对象例如以下: 名称 类型 使用范围 request javax.servlet.http.HttpServletRe ...