文档流
什么是文档流?
文档流:页面从上往下一行一行,其中每行从左至右的顺序,这种排列方式成为文档流。
什么是脱离了文档流?
脱离文档流意味着 它的排列顺序不遵循正常情况下文档的排列顺序,已经脱离了文档流,它不占用空间,处于浮动状态,脱离了文档流的元素的定位相对于其正常情况下的文档流,所以处于正常文档流的元素会占用原先的空间。
脱离文档流的几种情况?
首先是float
1.先说一下,float使得元素脱离文档流,该元素也可以理解为不占用空间了,那么处于正常情况下的元素就占用了它的空间,所以通过下面的例子演示一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float学习</title>
<style type="text/css">
.firstDiv
{
width: 100px;
height: 100px;
background-color: #FF0000;
float: left;
}
.secondDiv
{
width: 150px;
height:150px; /*为了更能看到效果设置两者宽度不一样*/
background-color: #7FFFD4;
}
</style>
</head>
<body>
<div class="firstDiv">
红框
</div>
<div class="secondDiv">
蓝绿
</div>
</body>
</html>
效果展示:
给红div加上了float效果,红div就脱离了文档流,蓝绿div是还遵循正常的文档流,所以占据正常的文档流。
其次是absolute(绝对定位)
absolute(绝对定位),他是根据父级的对位而定位的,如果父级的没有定位会向更高级的父级查看,值得注意得是这个,absolute的父级定位不能是static属性,(不加定位的默认属性)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float学习</title>
<style type="text/css">
.firstDiv
{
width: 100px;
height: 100px;
background-color: #FF0000;
position: absolute;
top: 20px;
}
.secondDiv
{
width: 150px;
height:150px;
background-color: #7FFFD4;
}
</style>
</head>
<body>
<div class="firstDiv">
红框
</div>
<div class="secondDiv">
蓝绿
</div>
</body>
</html>
效果展示:
可见absolute和float还是有一定区别的,absolute的会完全脱离文档流,包括容器中的内容,absolute定位是相对于父级来定位的。
再者就是fixed定位
fixed脱离文档流,位置与文档流无关,相对浏览器窗口也就是(html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float学习</title>
<style type="text/css">
.firstDiv
{
width: 100px;
height: 100px;
background-color: #FF0000;
position: fixed; /*相对浏览器窗口*/
top: 50px;
}
.secondDiv
{
width: 150px;
height:1500px;
background-color: #7FFFD4;
}
</style>
</head>
<body>
<div class="firstDiv">
红框
</div>
<div class="secondDiv">
蓝绿
</div>
</body>
</html>
效果展示:
可见position中的fixed完全脱离了文档流,相对于窗口位置固定。