前端学习笔记之CSS文档流
9.3 Positioning schemes
In CSS 2.1, a box may be laid out according to three positioning
schemes:
- Normal flow. In CSS 2.1, normal
flow includes block formatting
of block-level boxes,
inline formatting
of inline-level boxes, and relative positioning of
block-level and inline-level boxes.- Floats. In the float model,
a box is first laid out according to the normal flow, then
taken out of the flow and shifted
to the left or right as far as possible. Content may
flow along the side of a float.- Absolute positioning.
In the absolute positioning model, a box is removed from
the normal flow entirely (it has no impact on later siblings)
and assigned a position with respect to a containing block.An element is called out of
flow if it is floated, absolutely positioned, or is the
root element. An element is called in-flow if it is not out-of-flow. The
flow of an element
A is the set consisting of A and all in-flow
elements whose nearest out-of-flow ancestor is A.
Q: 脱离文档流就不占据空间了吗?
A: 可以这么说。更准确地一点说,是一个元素脱离文档流(out of normal flow)之后,其他的元素在定位的时候会当做没看见它,两者位置重叠都是可以的。
Q: 脱离文档流是不是指该元素从dom树中脱离?
A: 不是,用浏览器的审查元素就可以看到脱离文档流的元素(例如被float了)依然会出现在dom树里,下面的截图里也可以看到。
那么脱离文档流是什么样子的呢?下面是上锤子的时间~ 以前面文档里写的三种布局方式为例
下文中文档的HTML代码如下:
<body>
<div id="outofnormal">
Out of normal:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi esse impedit autem praesentium magni culpa, amet corporis, veniam consequatur voluptates temporibus. Voluptates eius similique asperiores cupiditate fugit hic atque quisquam?
</div>
<h2>Normal Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium nam tempora beatae quis nobis laboriosam alias aliquid, tenetur exercitationem. Odio, aperiam, illo! Eveniet natus dignissimos architecto velit eligendi id!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem reprehenderit velit nam delectus distinctio at unde aliquid officia illo, tempore vitae et incidunt non, ut eos nesciunt quaerat. Enim, minus.</p>
</body>
CSS代码如下,为了看得更清楚,加一个padding
#outofnormal {
width: 200px;
background-color: cyan;
padding: 10px;
}
首先普通情况下(也就是在normal flow里)是这样的
要被玩的div:
第二种情况加上float:left之后:
加上float:left了之后,蓝色的div就脱离文档流了,变成了这样:
第三种情况:absolute positioning。
删掉float: left,加上postion: absolute。和float一样的是,旁边的盒子无视了蓝色div的存在,也是顶着左边边框定位。但是~ 文本也无视了蓝色div的存在,顶着左边边框定位!
总结:
脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用absolute
positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。
参考
前端学习笔记之CSS文档流的更多相关文章
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- CSS文档流、块级元素、内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- 前端学习 -- Css -- 文档流
文档流 文档流处在网页的最底层,它表示的是一个页面中的位置, 我们所创建的元素默认都处在文档流中 元素在文档流中的特点 块元素 块元素在文档流中会独占一行,块元素会自上向下排列. 块元素在文档流中默认 ...
- 前端学习笔记之CSS网页布局
CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...
- css 文档流中块级非替换元素水平区域的计算规则(1)
最近在读<Basic Visual Formatting in CSS>,结合以前看的<css权威指南>和css标准.今天就做个笔记. 以前在遇到一些宽度不明确指明的一些布局的 ...
- 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理
在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...
- CSS文档流
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
- 前端学习笔记之CSS知识汇总
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
随机推荐
- Nginx.conf 配置文件详细说明
在此记录下Nginx服务器nginx.conf的配置文件说明, 部分注释收集与网络. #运行用户user www-data; #启动进程,通常设置成和cpu的数量相等worker_process ...
- discuz 文档说明
Discuz 文档说明 基于7.0的标准程序,部分与插件无关的文件不作说明 文件颜色说明: 红色:程序核心文件,修改这类文件时千万要注意安全! 橙色:做插件几乎不会用到的文件,大概了解功能就可以了, ...
- 为什么setinterval和settimeout越点击越快以及响应的解决办法
setinterval大家都很了解,但是如果时间长的话,误差也会越来越大,所以我习惯上使用settimeout的递归,闲来没事,写了一个定时器的递归 <!DOCTYPE html> < ...
- 图解利用vmware工具进行虚拟机克隆
在vmware上创建一台完整的虚拟机,在该创建的虚拟机上进行克隆,先关闭创建的虚拟机,然后选中你要克隆的虚拟机,右击->管理->克隆,然后点击下一步,如下图所示: 2 然后点击下一步,如下 ...
- ReactNative For Android 项目实战总结
版权声明:本文由王少鸣原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/159 来源:腾云阁 https://www.qclo ...
- python 进行抓包嗅探
一.绪论 最近一直想弄一个代理,并且对数据包进行解读,从而完成来往流量的嗅探.于是今天学习了一下如何使用Python抓包并进行解包. 首先要用到两个模块 dpkt(我这边ubuntu16.04 LTS ...
- MS17-010永恒之蓝验证
一.安装MSF,windows下安装也可以,直接安装kali也可以,我是kali是攻击主机,win7是靶机,都在虚拟机里. 1.windows下安装MSF请参考:http://blog.csdn.ne ...
- nginx repos
vim /etc/yum.repos.d/nginx.repo 然后将下面的内容复制进去: [nginx] name=nginx repo baseurl=http://nginx.org/packa ...
- ASP.netMVC文件下载的几种方法
第一种:最简单的超链接方法,标签的href直接指向目标文件地址,这样容易暴露地址造成盗链,这里就不说了 第二种:后台下载 在后台下载中又可以细分为几种下载方式 首先,在前台,我们需要一个标签 &quo ...
- Linux eventfd分析
2017-07-20 eventfd在linux中是一个较新的进程通信方式,和信号量等不同的是event不仅可以用于进程间的通信,还可以用户内核发信号给用户层的进程.eventfd在virtIO后端驱 ...