div中overflow的一些用法

1.嵌套元素中使用负边界

举例:

<div class="main">

<div class="content">子元素,注意自元素中的内容,这将有助于理解负边界的含义</div></div>

 

.main{

padding:50px 0 0 100px;

width:350px;

height:150px;

background:#999999;

}

.content{

margin:-100px 0 0 100px;

width:100px;

height:100px;

background:#cccccc;

}

实现效果是:子元素的上边界-100px,而父元素有50个像素的补白,故子元素将会向上移动50个像素.

但ie会隐藏子元素中的超出部分,而firefox则显示超出的部分.

 

2.使用overflow来固定长度和宽度

overflow:visible|hidden|auto|sroll;

visible:不剪切内容也不产生滚动条;

hidden:不显示超出的内容部分;

auto:在需要的时候产生滚动条;

sroll:总是显示滚动条;

 

3.控制高度属性 min-height,max-height

min-height:auto|长度值；

定义了元素的最小高度，当元素中的内容没有达到最小高度时，元素显示最小高度；当大于最小高度时，高度自适应。

注：IE浏览器不支持这两个属性值，它会理解为没有定义高度，也就是高度自适应auto.