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.