(三)css之浮动&定位

  众所周知,一个页面可能包含多个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的值可以为负。

 

posted @ 2015-06-24 11:26  咸稀饭  阅读(320)  评论(0编辑  收藏  举报