關於overflow元素，hidden屬性「隱藏失效」問題的探究

時間 2020-08-07

標籤關於 overflow 元素 hidden 屬性隱藏失效問題探究简体版

原文原文鏈接

1.overflow元素屬性的簡單介紹。
正如w3c介紹的那樣……overflow總共有五個屬性。
overflow:visible;默認值，若是內容超出，則會呈如今盒子以外。
overflow:scroll;超出的內容會以滾動條的形式顯示。
overflow:auto;自適應，若是內容超出，自動以滾動條顯示方便查看。
overflow:inherit;繼承父類overflow屬性。
overflow:hidden;超出的部分隱藏且不可見。
這次主要探討overflow:hidden;屬性。
2.overflow:hidden;的通常應用。
（1）下面經過一個簡單的例子對overflow：hidden；屬性的做用進行說明。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: 200px;
background-color: red;
}
（設置父類的寬度爲200px，高度爲200px，背景色爲紅色）
.green {
width: 100px;
height: 400px;
background-color: green;
}
（設置子類的寬度爲100px，高度爲400px,背景色爲綠色）
</style>
</head>
<body>
<div class="red">
<div class="green"></div>
</div>
</body>
</html>
html

由效果圖很明顯能夠看出，綠色子類超出了紅色父類300px。
    （2）這時咱們給紅色父類設置overflow：hidden；屬性。效果以下：
    <!DOCTYPE html>

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: 200px;
background-color: red;
overflow:hidden;（給紅色父類設置overflow屬性）
}
.green {
width: 100px;
height: 400px;
background-color: green;
}瀏覽器

</style>

</head>
<body>
<div class="red">
<div class="green"></div>
</div>
</body>
</html>
（效果圖）：

能夠從圖中看出，綠色子類超出的300px被隱藏了
（3）下面咱們將紅色父類的高度設置爲auto。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: auto;（將紅色父類的高度設置爲自適應）
background-color: red;
overflow: hidden;
}
.green {
width: 100px;
height: 400px;
background-color: green;
}ide

</style>

</head>
<body>
<div class="red">
<div class="green"></div>
</div>
</body>
</html>
（效果圖）以下：

很明顯，紅色父類的高度在設置overflow：hidden;和auto組合屬性以後被子類的高度撐開。
這就是overflow：hidden；屬性在實際應用中最基礎的使用。
這時候你天然內心會嘀咕，逼逼半天，這誰不知到？別擔憂，這只是熱身。
3.overflow:hidden;「隱藏」失效。
（1）咱們給父類外層再增長一個黑色父類，再給黑色祖父類相對定位，子類絕對定位。來，咱們看效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
}
（設置父類寬度，高度爲200px，背景色爲紅色）
.green {
width: 100px;
height: 400px;
position: absolute;
background-color: green;
}
（設置子類寬度，高度爲100px和400px，背景色爲綠色，絕對定位）
.black{
width: 300px;
height: 300px;
background-color: black;
position: relative;
}
（設置祖父類寬度，高度爲300，300px，背景色爲黑色，相對定位）
</style>
</head>
<body>
<div class="black">
<div class="red">
<div class="green"></div>
</div>
</div>
</body>
</html>
（效果圖）以下：

看到效果圖是否是感受和你預想的截然不同呢？怎麼會這樣？到底什麼緣由？是什麼致使它「隱藏」失效呢？
還記得代碼怎麼寫的嗎？咱們給黑色祖父類相對定位，父類並無定位只是設置了overflow：hidden；屬性，但給子類設置了絕對定位讓子類脫離了父類的束縛，脫離了文本流。本來咱們預想的是綠色子類超出部分被紅色父類隱藏，可事實是它並無，並且超出了祖父類。
（2）下面咱們經過給祖父類設置overflow：hidden；來探究下。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
}
.green {
width: 100px;
height: 400px;
position: absolute;
background-color: green;
}
.black{
width: 300px;
height: 300px;
overflow: hidden;（給祖父類增長超出隱藏屬性）
background-color: black;
position: relative;
}3d

</style>

</head>
<body>
<div class="black">
<div class="red">
<div class="green"></div>
</div>
</div>
</body>
</html>
（效果圖）以下：

咱們看到調皮的綠色子類屬性在祖父類設置相對定位和overflow：hidden；屬性以後終於隱藏了，但咱們發現，它只不過是相對於相對定位的黑色祖父類隱藏了超出部分，但父類的超出部分隱藏的元素屬性它並無實現，可見它並非一個很聽話的孩子。
怎麼辦呢？孩子不聽話怎麼辦？很簡單，打一頓就行了。
（3）咱們再給父類也設置相對定位屬性看一看。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
position: relative;（給紅色祖父設置相對定位）
}
.green {
width: 100px;
height: 400px;
position: absolute;
background-color: green;
}（子類絕對定位）
.black{
width: 300px;
height: 300px;
overflow: hidden;
background-color: black;
position: relative;
}（祖父類也相對定位）code

</style>

</head>
<body>
<div class="black">
<div class="red">
<div class="green"></div>
</div>
</div>
</body>
</html>
（效果圖）以下;

哈哈哈……看到沒有，調皮的綠色子類終於在紅色父類設置相對定位以後終於聽話了，它隱藏了本身超出去的小尾巴。
好了。下面咱們總結一下。
在子類，父類，祖父類，祖祖父類等都沒有定位（即默認瀏覽器定位），父類設置overflow：hidden；屬性生效，即子類超出部分會被隱藏。
但只要子類絕對定位，想要子類生效overflow:hidden;屬性，那相應設置overflow:hidden;屬性的父類必須定位（即除了了瀏覽器默認定位）以後纔會生效，不然隱藏失效。若是父類和祖父類都設置了overflow:hidden;和定位屬性，則以父類的優先級最高，以此類推。htm

今天就先說到這裏，歡迎補充！(還不懂的小夥伴能夠複製代碼試驗哦！)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。