源:http://www.cnblogs.com/scy251147/p/3391228.html
由于有时候需要做网站项目,遇到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>
<div class="parentClass1">
<div class="childClass1"></div>
<div class="childClass2"></div>
</div>
方法二:清除浮动
<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>
<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>
那么得到的结果如下图所示: