-1文档流与非文档流。
一、首先,按照普通流和非普通流来分类:
①普通流:就是按照上下左右的顺序一行一行排列的,长度不够就会自动挤到下一行。
②非普通流:顾名思义就是脱离普通流的,在普通流上面是不占据位置的。css有position的样式,position包括:static,relative,absolute,fixed四种值。其中static是属于普通流;relative也是属于特殊的普通流,详细下面有介绍;absolute和fixed以及float就是属于非普通流的,加载的时候,也会顺序加载,但是会脱离普通流的位置。
看代码:
普通的文档流:
<html>
<head>
<title></title>
<meta content="text/html; charset=GB2312" />
<style>
.a{border:1px solid red;width:960px;margin:0 auto;}
.b{
height:100px;width:100px;background-color:#aaa;
top: 0;left: 0;
}
.c{height:50px;background-color:#ddd;}
</style>
</head>
<body>
<div class = "a">
<div class = "b"></div>
<div class = "c"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
显示如图:
2个DIV都是文档流,都是行级元素,所有都占一行。
脱离文档流:
<html>
<head>
<title></title>
<meta content="text/html; charset=GB2312" />
<style>
.a{border:1px solid red;width:960px;margin:0 auto;}
.b{
height:100px;width:100px;background-color:#aaa;
top: 0;left: 0;
float: left;
}
.c{height:50px;background-color:#ddd;}
</style>
</head>
<body>
<div class = "a">
<div class = "b"></div>
<div class = "c"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
这里的用浮动脱离文档流,所以在父DIV中,当它不存在宽和高。
- 2float和绝对定位的区别
CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。
- 1
- 2
需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。
而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。
就别就是文本的区别:
浮动:
<html>
<head>
<title></title>
<meta content="text/html; charset=GB2312" />
<style>
.a{border:1px solid red;width:960px;margin:0 auto;}
.b{
height:100px;width:100px;background-color:#aaa; float: left;
}
.c{height:50px;background-color:#ddd;}
</style>
</head>
<body>
<div class = "a">
<div class = "b"></div>i am float
<div class = "c"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
可以看到文本会环绕浮动的盒子。
绝对定位:
<html>
<head>
<title></title>
<meta content="text/html; charset=GB2312" />
<style>
.a{border:1px solid red;width:960px;margin:0 auto;position: relative;}
.b{
position: absolute;height:100px;width:100px;background-color:#aaa; top: 0; left: 0;
}
.c{height:50px;background-color:#ddd;}
</style>
</head>
<body>
<div class = "a">
<div class = "b"></div> position: absolute
<div class = "c"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
可以看到文本是无视绝对定位的盒子的。。。。。