连我自己把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. Chapter 7:Linking

    概述: 在linux上,从c源码到可执行文件主要需要经历translator(compiler.assembler)生成object file,再经由linker连接成executable objec ...

  2. nomad的简易集群

    启动服务器 第一步是为服务器创建配置文件.无论是从下载的文件github,或粘贴到一个名为server.hcl: vim server.hcl # Increase log verbosity log ...

  3. C#检测获取移动硬盘盘符

    最近做一个小工具,  C# 对 移动硬盘的检测, var arr = DriveInfo.GetDrives(); 得出的所有磁盘,发现对于移动硬盘,DriveType 不是 Removable 类型 ...

  4. codeforces #447 894A QAQ 894B Ralph And His Magic Field 894C Marco and GCD Sequence

    A.QAQ 题目大意:从给定的字符串中找出QAQ的个数,三个字母的位置可以不连续 思路:暴力求解,先找到A的位置,往前扫,往后扫寻找Q的个数q1,q2,然 后相乘得到q1*q2,这就是这个A能够找到的 ...

  5. 蓝桥杯第七届C/C++B省赛凑算式

    第三题: 凑算式 B      DEF A + --- + ------- = 10        C     GHI (如果显示有问题,可以参见[图1.jpg]) 这个算式中A~I代表1~9的数字, ...

  6. CCF-201312-1-出现次数最多的数

    问题描述 试题编号: 201312-1 试题名称: 出现次数最多的数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个正整数,找出它们中出现次数最多的数.如果这样的数有 ...

  7. Awk,Cat,Head分析Nginx日志常用命令

    Nginx 日志分析   1.根据访问IP统计UV   awk '{print $1}'  access.log|sort | uniq -c |wc -l   2.统计访问URL统计PV   awk ...

  8. rabbitmq(中间消息代理)在python中的使用

    在之前的有关线程,进程的博客中,我们介绍了它们各自在同一个程序中的通信方法.但是不同程序,甚至不同编程语言所写的应用软件之间的通信,以前所介绍的线程.进程队列便不再适用了:此种情况便只能使用socke ...

  9. 深入研究-webkit-overflow-scrolling:touch及ios滚动

    1. -webkit-overflow-scrolling:touch是什么? MDN上是这样定义的: -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效 ...

  10. 参加完Rocket MQ Meetup深圳站,回顾和想法

    最近一段时间才开始关注云栖社区的公众号,在两周前看到要在深圳科兴科学园办一场Rocket MQ的Meetup.因为从来没有参加过这种线下活动,而且对Rocket MQ比较感兴趣,所以就立即报名参加. ...