一個通俗小故事告訴你溢出隱藏（overflow:hidden）失效的原因

2024-07-11 08:30:52

字體：大中小

來源：轉載

供稿：網友

其實看似不合理的現象背后都會有其合理的解釋。

我們知道，overflow屬性值有這幾種：

復制代碼

代碼如下:
visible：聲明內容不會被剪裁。比如內容可能被渲染到容器外面。
hidden：聲明內容將被剪裁，并且也甭想使用滾動條來查看剪裁掉的內容。
scroll：聲明內容將被剪裁，但有可能出現滾動條來查看被剪裁掉的內容。滾動條出現的位置在inner border adge和outer padding adge之間。
auto：聲明決策將依賴于客戶端，優(yōu)先使用scroll。

W3C標準中指明：
通常一個盒子的內容是被限制在盒子邊界之內的。但有時也會產生溢出，即部分或全部內容跑到盒子邊界之外。溢出將在滿足下列條件之一時出現：

復制代碼

代碼如下:
1. 一個不換行的行元素寬度超出了容器盒子寬度。
2. 一個寬度固定的塊元素放在了比它窄的容器盒子內。
3. 一個元素的高度超出了容器盒子的高度。
4. 一個子孫元素，由負邊距值引起的部分內容在盒子外部。
5. text-indent屬性引起的行內元素在盒子的左右邊界外。
6. 一個絕對定位的子孫元素，部分內容在盒子外。但超出的部分不是總會被剪裁。子孫元素的內容就不會被子孫元素和其包含塊之間的祖先元素的overflow的設置所剪裁。

當溢出發(fā)生時，overflow屬性約定了容器盒子是否剪裁掉超出其內邊界的部分，并且決定是否出現滾動條來訪問被剪裁掉的內容。它會影響到元素所有內容的剪裁，但有個例外情況，即上面第6條所提到的：元素的子孫元素的包含塊（Containing blocks）是整個視窗（viewport）或是該元素的祖先元素，內容將不會被剪裁。包含塊是什么呢？簡單的說，就是可以決定一個元素位置和大小的塊。通常一個元素的包含塊由離它最近的塊級祖先元素的內容邊界決定。但當元素被設置成絕對定位時，包含塊由最近的position不是static的祖先元素決定。

看起來有點繞，讓我們來聽個簡單的故事吧。

html片段:

復制代碼

代碼如下:
<div class=”ocean”>
<div class=”land”>
<p class=”joke”>
Mrs. Smith couldn’t get her husband to exercise.
She asked Mrs. Jones what she should do. Jones replied,
“Tape the remote control between his toes.”
</p>
</div>
</div>

style:

復制代碼

代碼如下:
div.ocean{
position:relative;
background-color:blue;
width:120px;
height:120px;
}
div.land{
width:100px;
height:100px;
background-color:red;
overflow:hidden;
}
p.joke{
width:150px;
height:110px;
margin-top:30px;
margin-left:30px;
background-color:yellow;
}

上一篇：用CSS讓按鈕居中顯示的思路及代碼

下一篇：IE6與CSS樣式兼容問題匯總

發(fā)表評論

共有條評論