连我自己把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. python打包exe pyinstaller 简单使用

    源由 最近公司让做了一个小工具,使用python写的,写完之后要求能放在其它电脑上运行,于是就开始寻找方案; 按网上的说法 py2exe已经很久没更新了,资料也不多: 于是就采用pyinstaller ...

  2. windows下安装和redis主从配置(通过哨兵控制主从切换)

    首先自己先得了解什么是redis,这里就不详做介绍什么是redis了,这篇文章主要讲的是怎么样配置 redis怎样配置主从关系和哨兵控制主从服务器的配置以及应用,就当是给自己记笔记吧! 1.下载red ...

  3. 【jQuery插件】使用cropper实现简单的头像裁剪并上传

    插件介绍 这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头像上传功能,并且能够预览图片,和对图片进行简单的裁剪.旋转,花了不少时间才看到了这个插件,感觉 ...

  4. 魔术常量(Magic constants)

    魔术常量(Magic constants) PHP中的常量大部分都是不变的,但是有8个常量会随着他们所在代码位置的变化而变化,这8个常量被称为魔术常量. __LINE__,文件中的当前行号 __FIL ...

  5. java日期详解

    [TOC] 一.简介 java中的日期处理一直是个问题,没有很好的方式去处理,所以才有第三方框架的地位比如joda. 文章主要对java日期处理的详解,用1.8可以不用joda. 1. 相关概念 首先 ...

  6. SALM入门笔记(1):特征点的匹配

    SLAM 主要分为两个部分:前端和后端,前端也就是视觉里程计(VO),它根据相邻图像的信息粗略的估计出相机的运动,给后端提供较好的初始值.VO的实现方法可以根据是否需要提取特征分为两类:基于特征点的方 ...

  7. Django模型中value函数运用

    values(*fields) 这个方法返回的是ValuesQuerySet,是QuerySet 的子类,也就是说,你可以用QuerySet里的方法. 需要注意的是,返回的不是list,不要直接当li ...

  8. 》》初识移动端--rem

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  9. java.lang.RuntimeException: Canvas: trying to use a recycled bitmap android.graphics.Bitmap@412d7230

    近期遇到了如标题这种错误,再次记录解决方法.本文參考帖子: http://bbs.csdn.net/topics/390196217 出现此bug的原因是在内存回收上.里面用Bitamp的代码为: t ...

  10. Linux性能及调优指南(翻译)之Linux进程管理

    本文为IBM RedBook的Linux Performanceand Tuning Guidelines的1.1节的翻译原文地址:http://www.redbooks.ibm.com/redpap ...