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.

发表评论:

WwW.JintANg114.OrG
margin:-100px 0 0 100px;

到底是什么意思?
WwW.JintANg114.OrG2012-2-9 20:51:12 回复
水泥大瓦机
写的不错,支持你!
水泥大瓦机2012-2-3 16:45:01 回复
不在
说的好
不在2012-1-31 17:47:39 回复