HTML元素脱离文档流的三种方法
一、什么是文档流?
将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流。
这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成了文档流。
二、什么是脱离文档流?
元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。
脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
三、怎么脱离文档流?
1:float
使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在该元素的周围。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first {
width: 200px;
height: 200px;
border: 3px solid red;
float: left;
}
.second {
width: 200px;
height: 100px;
border: 3px solid blue;
}
</style>
</head> <body> <div class="first">123</div>
<div class="second">456</div> </body>
</html>
运行效果:
这段代码中把红色的框设置为了左浮,所以红色的框称为了浮动状态(浮动在蓝色框的上面),而蓝色框占用了原来空色框的位置。
注意到,蓝色框中的文本依然认为红色框存在,所以为红色框让出了位置。
由于div是块状元素,所以456出现在下方。
2:absolute
absolute称为绝对定位,觉得应该称为相对定位,
因为使用absolute脱离文档流后的元素,是相对于该元素的父类(及以上,如果直系父类元素不满足条件则继续向上查询)元素进行定位的,
并且这个父类元素的position必须是非static定位的(static是默认定位方式)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first {
width: 200px;
height: 200px;
border: 3px solid red;
}
.second {
width: 200px;
height: 100px;
border: 3px solid blue;
position: absolute;
}
.third {
width: 200px;
height: 200px;
border: 3px solid green;
}
</style>
</head> <body> <div class="first">123</div>
<div class="second">456</div>
<div class="third">789</div> </body>
</html>
运行效果:
通过把蓝色的框的position设置为absolute使蓝色的框变为浮动状态,可以看到绿色的框被蓝色的框遮挡。
emmm...,看起来貌似没有问题,但是还记得前面说的absolute是相对谁定位的吗?
相对非static元素的父级定位的,这里蓝框的父级就是html,所以应该是相对于html定位,
但是代码中没有提供相对位置,所以只能浮动在原来该元素在文档流中的位置上方。
3:fixed
完全脱离文档流,相对于浏览器窗口进行定位。(相对于浏览器窗口就是相对于html)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first {
width: 200px;
height: 200px;
border: 3px solid red;
}
.second {
width: 200px;
height: 100px;
border: 3px solid blue;
position: fixed;
right: 0;
top: 0;
}
.third {
width: 200px;
height: 200px;
border: 3px solid green;
}
html {
border: dotted;
}
</style>
</head> <body> <div class="first">123</div>
<div class="second">456</div>
<div class="third">789</div> </body>
</html>
可以很明显的看出,蓝色的框是相对于html进行定位的。
如果不提供相对位置的话,蓝色的框会浮动在其原先在文档流中的位置上方。
HTML元素脱离文档流的三种方法的更多相关文章
- float的元素脱离文档流,但不完全脱离,只是提升了半层;
float的元素脱离文档流,但不完全脱离,只是提升了半层:
- CSS-position 属性&元素脱离文档流引发父级边框塌陷问题
CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中 ...
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
- html/css 关于脱离文档流的几种情况
所谓的文档流 顾名思义就是按照顺序流下来,指的是html元素从上往下 从左往右的流式排列, 比如说写了5个Div,正常的文档流是依次显示这5个div块: 脱离文档流就是指它所显示的位置和文档代码就不一 ...
- HTML文档流和脱离文档流
文档流:也就是我们通常看到的由左到右.由上而下的元素排列形式,在网页中每个元素都是默认按照这个顺序进行排序和显示的. 脱离文档流:元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理 ...
- css脱离文档流
作者:张秋怡链接:http://www.zhihu.com/question/24529373/answer/29135021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- css中哪些属性会脱离文档流
一共有三个属性会使元素脱离文档流: (1)浮动 (2)绝对定位 (3)固定定位 元素脱离文档流会导致父元素高度塌陷,要修复高度塌陷问题,可以将子元素与父元素放在同一个BFC中
- CSS脱离文档流&浮动
什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...
- CSS中脱离文档流是什么意思?
如果一个元素脱离文档流了,是不是只是显示上脱离而已?在html中是否也会脱离?我用js取这个元素的父节点的childNodes还能否取到这个元素:同时,这个元素的parentNode还是不是html中 ...
随机推荐
- java 获取用户输入
import java.util.Scanner; public class Sample { public static void main(String[] args) { int num; Sc ...
- cocos游戏: 不规则响应区域处理
1.问题:平时使用的按钮之类的都是规则图形,但是有些比如一些世界地图之类的,地图块是不规则的,边缘都是弯弯曲曲的,而且有些有交叉,处理这样的点击块就比较麻烦了2.几点解决思路2.1 如果地图块之间有点 ...
- Javascript笔记:作用域和执行上下文
一.作用域 Javascript的作用域规则是在编译阶段确定的,有声明时的位置决定. JS中有全局作用域,函数作用域,块级作用域(ES6引入). 1. 全局作用域 在整个程序生命周期内都是有效的,在任 ...
- C++ 类中的3种访问权限和继承方式
访问权限:public 可以被任意实体访问,protected 只允许子类(无论什么继承方式)及本类的成员函数访问,private 只允许本类的成员函数访问.三种继承方式分别是 public 继承,p ...
- BCompare注册文件+密钥被撤销解决方案
注册码: rssAPVg2OpBjDVo3E0DhGWrjPIq0hsTSuNz13wTuzVHfb2mRgO9bZKn9Bl42D5YEyMSYPXsxzcb08dqbRlbzWNJzJXE6YVa ...
- Linux record
1.设置ubuntu密码刚安装好的ubuntu系统,没有root密码,需要用户去手动设置的. sudo passwd root 输入2次密码即可. 2. Linux下is not in the sud ...
- antd Table 可伸缩列没有效果
把antd 中的Table可伸缩示例代码,下载到自己的代码中发现,鼠标放到表格的边框上,并没有出现可伸缩鼠标样式,最后的解决方法是在css样式中添加下面的样式,就解决问题了. .react-resiz ...
- Server SQL2008对文件的基础操作—01
1.一个文件的基本框架为:文件名.文件地址.文件大小.文件最大的大小.文件的增量(Filegrowth). 2.文件有mdf.ndf.ldf 三种文件的区别. 3.文件组可以进行文件的管理 FileG ...
- selenium登录爬取知乎出现:请求异常请升级客户端后重试的问题(用Python中的selenium接管chrome)
一.问题使用selenium自动化测试爬取知乎的时候出现了:错误代码10001:请求异常请升级客户端后重新尝试,这个错误的产生是由于知乎可以检测selenium自动化测试的脚本,因此可以阻止selen ...
- C# - Winform - DevExpress - GridControl 任意条件控制Row背景色。
private void gvSendConfirm_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCusto ...