DIV相关的操作总结

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

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

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

方法一：使用固定的高度

 <style type="text/css">

    .parentClass1

    {

        width:600px;

        border:1px solid red;      

        height:120px;    /*这里是方法一：我们直接设置父Div的高度为一个固定值。 */

    }

    .childClass1

    {

        float:left;

        width:200px;

        height:100px;

        background-color:Blue;

    }

    .childClass2

    {

        float:right;

        width: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

    {

        width:600px;

        border:1px solid red;      

    }

    .childClass1

    {

        float:left;

        width:200px;

        height:100px;

        background-color:Blue;

    }

    .childClass2

    {

        float:right;

        width: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

    {

        width:600px;

        border:1px solid red;      

        overflow:hidden;  /*这里通过添加本样式，实现父DIV高度的自适应*/

    }

    .childClass1

    {

        float:left;

        width:200px;

        height:100px;

        background-color:Blue;

    }

    .childClass2

    {

        float:right;

        width: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

    {

        width: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

    {

        width:600px;

        border:1px solid red;      

        height:200px;

         margin:0 auto;

         position:relative;  /*父DIV需要设置为相对定位*/

    }

    .childClass1

    {

        width: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

    {

        width:600px;

        border:1px solid red;      

         margin:0 auto;

         _height:200px;        /*添加上了_height和min-height属性，就限定了最小高度为200px*/

          min-height:200px;

          overflow:hidden; /*添加了这个属性，就可以保证当子DIV大于200px的时候，父DIV的高度能够随着子DIV的高度增加而增加*/

    }

    .childClass1

    {

        width:200px;

        height:100px;

        background-color:Green;

        float:left;

    }

        .childClass2

    {

        width: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>

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