众所周知,一个页面可能包含多个div,如何对这些div进行排列,以便具有较好的显示效果呢?
css提供了浮动和定位两个属性进行div的排列,下面主要针对浮动和定位进行详细地阐述。
(一)何为浮动?
浮动即是让div块向左或者向右靠拢,向左浮动(float:left);向右浮动(float:right).
向左或者向右浮动时,当浮动块碰到前一个块或者边框时,则停止浮动。
例如:1、向左浮动
想左浮动,即是div块向左边移动,直到div块碰到左边框或者另一个div块,如上图右侧所示,代码如下
html文件:
<!--左浮动排列-->
<div class="div1">
<div class="div21" style="height:204px;width:304px">左浮动1</div>
<div class="div21">左浮动2</div>
<div class="div21">左浮动3</div>
<div class="div21">左浮动4</div>
<div class="div21">左浮动5</div>
<div class="div21">左浮动6</div>
<div class="div21">左浮动7</div>
<div class="div21">左浮动8</div>
<div class="div21">左浮动9</div>
</div>
css文件:
.div1{
width:600px;
height:600px;
border:1px solid red;
margin-top:5px;
margin-left:5px;
float:left;
padding-top:5px;
padding-left:5px;
padding-right:5px;
}
.div21{
width:150px;
height:100px;
border:1px solid blue;
background-color:pink;
text-align:center;
float:left;
margin-left:2px;
margin-top:2px;
}
2、向右浮动
向右浮动,即是div块向右边移动,直到div块碰到右边框或者另一个div块,如上图左侧所示,代码如下
html文件:
<!--右浮动排列-->
<div class="div1">
<div class="div2" id="special">右浮动1</div>
<div class="div2">右浮动2</div>
<div class="div2">右浮动3</div>
</div>
css文件:
.div1{
width:600px;
height:600px;
border:1px solid red;
margin-top:5px;
margin-left:5px;
float:left;
padding-top:5px;
padding-left:5px;
padding-right:5px;
}
.div2{
width:150px;
height:100px;
border:1px solid blue;
background-color:pink;
text-align:center;
margin-left:2px;
margin-top:2px;
}
#special {
float:right;
}
(二)何为定位?
只进行div块左右浮动,显然不能满足我们对网页的排版要求,这就要求我们对div的位置进行定位,利用div块的位置,进行排列。
div块的位置可以分为:静态位置、相对位置、绝对位置、固定位置。
1、 针对相对定位:
2、绝对定位
(三)优先级的属性z-index
number 的值越大,优先级越高,越靠上。number的值可以为负。