常规流(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称为文档流,也不用去纠正。因为一个错误理解如果已经被大多人接受,那它也是对的。
常规流(Normal flow)的更多相关文章
- CSS魔法堂:你一定误解过的Normal flow
前言 刚接触CSS时经常听到看到一个词"文档流",那到底什么是"文档流"呢?然后会看到"绝对定位和浮动定位能脱离文档流",从这句可以看到文 ...
- 前端必须了解的布局常识:普通流(normal flow)
目录 一.概述 二.块级元素和内联元素 常见的块级元素 BFC 常见的行内元素 IFC 三.哪些情况会脱离普通流 浮动 绝对定位 固定定位 display:none 四.总结 五.参考资料 一.概述 ...
- Openvswitch原理与代码分析(5): 内核中的流表flow table操作
当一个数据包到达网卡的时候,首先要经过内核Openvswitch.ko,流表Flow Table在内核中有一份,通过key查找内核中的flow table,即可以得到action,然后执行acti ...
- 2018.07.06 洛谷P2936 [USACO09JAN]全流Total Flow(最大流)
P2936 [USACO09JAN]全流Total Flow 题目描述 Farmer John always wants his cows to have enough water and thus ...
- HTML+CSS : 笔记整理(2 常规流,BFC,固定定位,z-index)
BFC和常规流的关系是什么:常规流遵循BFC,IFC规则. 定位规则总体来说三种: 常规流,浮动,绝对定位(CSS3里面新加了一种flex) 其中常规流包括BFC,IFC等规则,块级元素一个一排地从上 ...
- 洛谷P3128 [USACO15DEC]最大流Max Flow
P3128 [USACO15DEC]最大流Max Flow 题目描述 Farmer John has installed a new system of N-1N−1 pipes to transpo ...
- P3128 [USACO15DEC]最大流Max Flow(LCA+树上差分)
P3128 [USACO15DEC]最大流Max Flow 题目描述 Farmer John has installed a new system of pipes to transport mil ...
- luoguP3128 [USACO15DEC]最大流Max Flow 题解(树上差分)
链接一下题目:luoguP3128 [USACO15DEC]最大流Max Flow(树上差分板子题) 如果没有学过树上差分,抠这里(其实很简单的,真的):树上差分总结 学了树上差分,这道题就极其显然了 ...
- CSS学习(11)常规流
盒模型:规定单个盒子的规则 视觉格式化模型(布局规则):页面中多个盒子的排列规则 三种方式: 1.常规流 2.浮动 3.定位 常规流布局 常规流 也可以叫做 文档流.普通文档流.常规文档流 所 ...
随机推荐
- CSS实现模糊效果
HTML代码如下: <body> <h1>body设置了模糊效果</h1> <div id="aa"></div> &l ...
- Android 个推 踩坑小结
公司一个项目之前在手机上一直可以正常运行,后来在平板上运行了一下,在欢迎页面卡出了,一直没有反应. 于是我就将项目在电脑上用Android Studio往平板上运行了一遍,看了下打印的Log日志,发现 ...
- React服务器端渲染值Next.js
昨天leader给分配了新任务,让熟悉一下ssr,刚开始有点懵,啥玩意?百度了一下,不就是服务器端渲染(server side render,简称: ssr). ssr简介 服务端渲染一个很常见的场景 ...
- pytesseract使用
1.安装pip install pytesseract 2.安装tesseract-ocr,下载地址:https://github.com/UB-Mannheim/tesseract/wiki,我安装 ...
- Java语句语法
一.流程控制语句 1.分支语句 1)if else 语法:(写法1) if(条件1){ //写一次 满足条件1执行在代码 }else if(条件2){ //写0或n次 不满足条件1,满足 ...
- 实际应用中遇到TimedRotatingFileHandler不滚动的问题
需求: 程序每天晚上8点和10点定时运行,期望日志按日期记录 添加Handler部分代码如下: formatter = logging.Formatter("%(asctime)s %(fi ...
- 模块化编程node
众所周知,Node.js 的出现造就了全栈工程师,因为它让 JavaScript 的舞台从浏览器扩大到了服务端 而 Node.js 的强大也得益于它庞大的模块库,所以学习 Node.js 第一步还得从 ...
- expressjs 支持umeditor 的图片上传
umedtor 的文件上传 是form 提交. 请求的header Accept: text/html,application/xhtml+xml,application/xml;q=0.9,imag ...
- Wannafly模拟赛5 A Split 暴力 二分加速
你有一个大小为
- Python爬虫(十五)_案例:使用bs4的爬虫
本章将从Python案例讲起:所使用bs4做一个简单的爬虫案例,更多内容请参考:Python学习指南 案例:使用BeautifulSoup的爬虫 我们已腾讯社招页面来做演示:http://hr.ten ...