DIV相关的操作总结

由于有时候需要做网站项目，遇到CSS的问题总是需要百度或者google一下，比较麻烦，索性今天就来总结一下，这里就拿div开刀先。

DIV在HTML前端页面布局中，非常重要，我们经常遇到的问题是：DIV居中，DIV自适应高度等等，下面就来总结一下。

父DIV自动匹配子DIV高度的方法

方法一：使用固定的高度

<style type="text/css">
   .parentClass1
   {
       600px;
       border:1px solid red;
       height:120px;    /*这里是方法一：我们直接设置父Div的高度为一个固定值。 */
   }

   .childClass1
   {
       float:left;
       200px;
       height:100px;
       background-color:Blue;
   }

   .childClass2
   {
       float:right;
       300px;
       height:110px;
       background-color:wheat;
   }

   </style>

 

HTML代码如下：

 

<div class="parentClass1">
    <div class="childClass1"></div>
    <div  class="childClass2"></div>
</div>

这种方法是通过设置父DIV的固定高度来实现，这种方法比较死板，当子DIV的内容高度发生变化的时候，很容易导致父DIV的高度溢出，所以是最不推荐使用的方式。

 

方法二：清除浮动

CSS代码如下：

<style type="text/css">
   .parentClass1
   {
       600px;
       border:1px solid red;
   }

   .childClass1
   {
       float:left;
       200px;
       height:100px;
       background-color:Blue;
   }

   .childClass2
   {
       float:right;
       300px;
       height:110px;
       background-color:wheat;
   }

   .fitHeight
   {
       clear:both;
   }
   </style>

 

HTML代码如下：

<div class="parentClass1">
    <div class="childClass1"></div>
    <div  class="childClass2"></div>
    <div class="fitHeight"></div>
</div>

这种方式主要是通过清除浮动来实现父DIV自适应高度的，是一种比较好的解决方法，当子DIV高度进行变化的时候，父DIV的高度也随之变化，所以推荐使用。

方法三：通过OverFlow样式来解决

先看下CSS代码：

<style type="text/css">
   .parentClass1
   {
       600px;
       border:1px solid red;
       overflow:hidden;  /*这里通过添加本样式，实现父DIV高度的自适应*/
   }

   .childClass1
   {
       float:left;
       200px;
       height:100px;
       background-color:Blue;
   }

   .childClass2
   {
       float:right;
       300px;
       height:120px;
       background-color:wheat;
   }
   </style>

然后再来看一下HTML代码部分：

<div class="parentClass1">
    <div class="childClass1"></div>
    <div  class="childClass2"></div>
</div>

在这里，我们通过设置父DIV的overflow属性为Hidden来进行高度的自适应，这种方式非常简便，效果也很理想，推荐使用。

DIV居中或者居底的方法

首先,我们这里说一下一个DIV怎么在页面中居中,这里不存在父子的概念,所以对这种居中效果,我们直接可以通过添加 margin: 0 auto;来实现，意思是让上下间隔为0，左右间隔自动，随着页面的宽度自动进行居中设置。

CSS代码如下：

   <style type="text/css">
    .parentClass1
    {
        600px;
        border:1px solid red;
         margin:0 auto;
         height:100px;
    }
    </style>

HTML代码如下：

  <div class="parentClass1"></div>

其次，我们说下如何让父DIV中的子DIV居中。在这里，效果其实和上面是一样的，也是直接添加margin: 0 auto;来实现，具体代码我就不具体赘述了。

那么如果让子DIV在父DIV的底部，该怎么设置呢？这里就比较麻烦一点，不过我们可以将父DIV设置为：position:relative,子DIV设置为：position:absolute;的方式来解决：

CSS代码如下：

<style type="text/css">
   .parentClass1
   {
       600px;
       border:1px solid red;
       height:200px;
        margin:0 auto;
        position:relative;  /*父DIV需要设置为相对定位*/
   }

   .childClass1
   {
       200px;
       height:100px;
       background-color:Blue;
      position:absolute;  /*子DIV需要设置为绝对定位*/
      bottom:0;    /*加上这个属性，就可以实现子DIV移动到底部了*/
   }
   </style>

HTML代码如下：

  <div class="parentClass1">
    <div class="childClass1"></div>
  </div>

 

DIV最小高度及自适应方法

有时候我们在设计网页的时候，需要给DIV块一个最小高度，但是当DIV内部内容超过最小高度的时候，需要DIV能够随着高度的增加而增加。这个时候，我们就可以利用_height和min-height属性来解决。

下面是对二者说明：

_height:200px; /* css 注解： 仅IE6设别此属性，假定最低高度是200px ，设置高度200px，内容超出后IE6会自动撑高设定高度 */
min-height:200px; /* css注释： css最小高度为200px支持所有浏览器，IE6浏览器除外 */

CSS代码如下：

<style type="text/css">
   .parentClass1
   {
       600px;
       border:1px solid red;
        margin:0 auto;
        _height:200px;        /*添加上了_height和min-height属性，就限定了最小高度为200px*/
         min-height:200px;
         overflow:hidden; /*添加了这个属性，就可以保证当子DIV大于200px的时候，父DIV的高度能够随着子DIV的高度增加而增加*/
   }

   .childClass1
   {
       200px;
       height:100px;
       background-color:Green;
       float:left;
   }
       .childClass2
   {
       200px;
       height:330px;  /*这个子DIV的高度已经大于了200px*/
       background-color:Wheat;
       float:right;
   }
   </style>

HTML代码如下：

<div class="parentClass1">
   <div class="childClass1">内容高度没有超过200px的时候，div的高度为200px</div>
   <div class="childClass2">内容高度超过200px的时候，div的高度自动适应</div>
</div>

那么得到的结果如下图所示：