CSS入门系列(六)CSS的布局
上一节我们说完盒子,光有盒子是不行的,我们还需要布局,这一节开始我们来描述一下css的布局。
目录
1. 漂浮float
- none:默认不漂浮
- left:文本流向对象的右边,注意是右边,因为对象固定在了左边,所以文本只能在这个对象的右边。
- right:文本流向对象的左边,原理同上。
演示:
原图
当我在div1的属性中加入float时,盒子2就跑到盒子1的右边了:
#div_1{
background-color:#F90;
float:left;
}
2. 定位position
有四个值:
- static: 默认,无特殊定位;
- absolute: 绝对,脱离文档流,使用left,right,top,bottom等属性相对于其最近的一个具有定位设置的父对象进行绝对定位,如果没有父对象,则依据body对象。
- relative: 对象不可层叠, 将依据left,right,top,bottom等属性在正常文档流中偏移位置。
首先演示一下absolute:
原始的网页是这样的:
代码如下:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border:#09F solid 1px;
height:100px;
width:200px;
}
#div_1{
background-color:#F90;
}
#div_2{
background-color:#5F0;
}
#div_3{
background-color:#09F;
}
</style>
</head>
<body>
<div id="div_1">
这是盒子1
</div>
<div id="div_2">
这是盒子2
</div><div id="div_3">
这是盒子3
</div>
</body>
我们在这个的基础上做一个父类的盒子,然后移动,我们可以看到效果是,大盒子移动了,小盒子跟着大盒子。设置了大盒子是absolute,且他没有父对象,所以是相对body移动的:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border:#09F solid 1px;
height:100px;
width:200px;
}
#div_0{
background-color:#F9F;
height:400px;
width:400px;
position:absolute;
top:100px;
left:100px;
}
#div_1{
background-color:#F90;
}
#div_2{
background-color:#5F0;
}
#div_3{
background-color:#09F;
}
</style>
</head>
<body>
<div id="div_0">
<div id="div_1">
这是盒子1
</div>
<div id="div_2">
这是盒子2
</div><div id="div_3">
这是盒子3
</div>
</div>
</body>
这时候,我们设置盒子1,让他相对大盒子移动:
改动的代码为:
#div_1{
background-color:#F90;
position:absolute;
top:100px;
left:100px;
}
注意看,盒子1出文档流后,盒子2填充了盒子1的位置了,这就是出文档流的原因。这里就用和relative区别开,如果设置relative,这里盒子2就不会填充盒子1的位置,因为盒子1没出流。