CSS在默认的条件下,是按照正常文档流的排列,即为块元素占一行,内联元素依次排列;使用浮动布局(float)可以使布局变得非常灵活,但是不容易掌控,定位布局则可以随心所欲的排列。
布局方式
固定定位:fixed
说明:相对于浏览器的排列,四边的距离都是相对于浏览器而言,无论是否拖动滚条,所处的位置始终不改变。相对定位:relative
说明:相对于改元素当前的位置。绝对定位:absolute
说明:若是父容器没有特殊布局,那么同固定定位;若是父容器已设置为相对定位,那么边距就是到达父容器边界的距离。静态定位:static
语法:
position:布局方式(例:fixed)
top:
right:
bottom:
left:
实例
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
* {margin:0;}/*外边距清零*/
#p_1 {
position:fixed;
left:200px;
background-color:red;
}
#p_2 {
position:absolute;/*段落2父元素无特殊布局*/
top:50px;
left:60px;
background-color:green;
}
div {
position:relative;/*段落3父元素相对定位*/
width:300px;
height:300px;
background-color:gray;
margin:0 auto;/*水平居中*/
}
#p_3 {
position:absolute;
top:50px;
left:60px;
background-color:blue;
}
#p_4 {
background-color:yellow;
}
#p_5 {
position:relative;/*按照正常文档流,段落5应当紧随段落4的下方,但在此处设置了相对布局*/
background-color:black;
top:90px;
left:60px;
color:white;
}
</style>
</head>
<body>
<p id="p_1">段落1</p>
<p id="p_2">段落2</p>
<div>
<p id="p_3">段落3</p>
</div>
<p id="p_4">段落4</p>
<p id="p_5">段落5</p>
</body>
</html>