關(guān)于overflow元素，hidden屬性“隱藏失效”問(wèn)題的探究

發(fā)布時(shí)間：2020-06-30 16:06:51 來(lái)源：網(wǎng)絡(luò) 閱讀：1490 作者：前端二弟欄目：web開發(fā)

1.overflow元素屬性的簡(jiǎn)單介紹。
正如w3c介紹的那樣……overflow總共有五個(gè)屬性。
overflow:visible;默認(rèn)值，如果內(nèi)容超出，則會(huì)呈現(xiàn)在盒子之外。
overflow:scroll;超出的內(nèi)容會(huì)以滾動(dòng)條的形式顯示。
overflow:auto;自適應(yīng)，如果內(nèi)容超出，自動(dòng)以滾動(dòng)條顯示方便查看。
overflow:inherit;繼承父類overflow屬性。
overflow:hidden;超出的部分隱藏且不可見(jiàn)。
此次主要探討overflow:hidden;屬性。
2.overflow:hidden;的一般應(yīng)用。
（1）下面通過(guò)一個(gè)簡(jiǎn)單的例子對(duì)overflow：hidden；屬性的作用進(jìn)行說(shuō)明。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: 200px;
background-color: red;
}
（設(shè)置父類的寬度為200px，高度為200px，背景色為紅色）
.green {
width: 100px;
height: 400px;
background-color: green;
}
（設(shè)置子類的寬度為100px，高度為400px,背景色為綠色）
</style>
</head>
<body>
<div class="red">
<div class="green"></div>
</div>
</body>
</html>
關(guān)于overflow元素，hidden屬性“隱藏失效”問(wèn)題的探究

    由效果圖很明顯可以看出，綠色子類超出了紅色父類300px。
    （2）這時(shí)我們給紅色父類設(shè)置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;（給紅色父類設(shè)置overflow屬性）
}
.green {
width: 100px;
height: 400px;
background-color: green;
}

</style>

</head>
<body>
<div class="red">
<div class="green"></div>
</div>
</body>
</html>
（效果圖）：
關(guān)于overflow元素，hidden屬性“隱藏失效”問(wèn)題的探究
可以從圖中看出，綠色子類超出的300px被隱藏了
（3）下面我們將紅色父類的高度設(shè)置為auto。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: auto;（將紅色父類的高度設(shè)置為自適應(yīng)）
background-color: red;
overflow: hidden;
}
.green {
width: 100px;
height: 400px;
background-color: green;
}

</style>

</head>
<body>
<div class="red">
<div class="green"></div>
</div>
</body>
</html>
（效果圖）如下：
關(guān)于overflow元素，hidden屬性“隱藏失效”問(wèn)題的探究
很明顯，紅色父類的高度在設(shè)置overflow：hidden;和auto組合屬性之后被子類的高度撐開。
這就是overflow：hidden；屬性在實(shí)際應(yīng)用中最基礎(chǔ)的使用。
這時(shí)候你自然心里會(huì)嘀咕，逼逼半天，這誰(shuí)不知到？別擔(dān)心，這只是熱身。
3.overflow:hidden;“隱藏”失效。
（1）我們給父類外層再增加一個(gè)黑色父類，再給黑色祖父類相對(duì)定位，子類絕對(duì)定位。來(lái)，我們看效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style >
.red{
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
}
（設(shè)置父類寬度，高度為200px，背景色為紅色）
.green {
width: 100px;
height: 400px;
position: absolute;
background-color: green;
}
（設(shè)置子類寬度，高度為100px和400px，背景色為綠色，絕對(duì)定位）
.black{
width: 300px;
height: 300px;
background-color: black;
position: relative;
}
（設(shè)置祖父類寬度，高度為300，300px，背景色為黑色，相對(duì)定位）
</style>
</head>
<body>
<div class="black">
<div class="red">
<div class="green"></div>
</div>
</div>
</body>
</html>
（效果圖）如下：
關(guān)于overflow元素，hidden屬性“隱藏失效”問(wèn)題的探究
看到效果圖是不是感覺(jué)和你預(yù)想的大相徑庭呢？怎么會(huì)這樣？到底什么原因？是什么導(dǎo)致它“隱藏”失效呢？
還記得代碼怎么寫的嗎？我們給黑色祖父類相對(duì)定位，父類并沒(méi)有定位只是設(shè)置了overflow：hidden；屬性，但給子類設(shè)置了絕對(duì)定位讓子類脫離了父類的束縛，脫離了文本流。原本我們預(yù)想的是綠色子類超出部分被紅色父類隱藏，可事實(shí)是它并沒(méi)有，而且超出了祖父類。
（2）下面我們通過(guò)給祖父類設(shè)置overflow：hidden；來(lái)探究下。
<!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;
}

</style>

</head>
<body>
<div class="black">
<div class="red">
<div class="green"></div>
</div>
</div>
</body>
</html>
（效果圖）如下：
關(guān)于overflow元素，hidden屬性“隱藏失效”問(wèn)題的探究
我們看到調(diào)皮的綠色子類屬性在祖父類設(shè)置相對(duì)定位和overflow：hidden；屬性之后終于隱藏了，但我們發(fā)現(xiàn)，它只不過(guò)是相對(duì)于相對(duì)定位的黑色祖父類隱藏了超出部分，但父類的超出部分隱藏的元素屬性它并沒(méi)有實(shí)現(xiàn)，可見(jiàn)它并不是一個(gè)很聽話的孩子。
怎么辦呢？孩子不聽話怎么辦？很簡(jiǎn)單，打一頓就好了。
（3）我們?cè)俳o父類也設(shè)置相對(duì)定位屬性看一看。
<!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;（給紅色祖父設(shè)置相對(duì)定位）
}
.green {
width: 100px;
height: 400px;
position: absolute;
background-color: green;
}（子類絕對(duì)定位）
.black{
width: 300px;
height: 300px;
overflow: hidden;
background-color: black;
position: relative;
}（祖父類也相對(duì)定位）

</style>

</head>
<body>
<div class="black">
<div class="red">
<div class="green"></div>
</div>
</div>
</body>
</html>
（效果圖）如下;
關(guān)于overflow元素，hidden屬性“隱藏失效”問(wèn)題的探究
哈哈哈……看到?jīng)]有，調(diào)皮的綠色子類終于在紅色父類設(shè)置相對(duì)定位之后終于聽話了，它隱藏了自己超出去的小尾巴。
好了。下面我們總結(jié)一下。
在子類，父類，祖父類，祖祖父類等都沒(méi)有定位（即默認(rèn)瀏覽器定位），父類設(shè)置overflow：hidden；屬性生效，即子類超出部分會(huì)被隱藏。
但只要子類絕對(duì)定位，想要子類生效overflow:hidden;屬性，那相應(yīng)設(shè)置overflow:hidden;屬性的父類必須定位（即除了了瀏覽器默認(rèn)定位）之后才會(huì)生效，否則隱藏失效。如果父類和祖父類都設(shè)置了overflow:hidden;和定位屬性，則以父類的優(yōu)先級(jí)最高，以此類推。

        今天就先說(shuō)到這里，歡迎補(bǔ)充！(還不懂的小伙伴可以復(fù)制代碼試驗(yàn)哦！)

向AI問(wèn)一下細(xì)節(jié)

關(guān)于overflow元素，hidden屬性“隱藏失效”問(wèn)題的探究

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

關(guān)于overflow元素，hidden屬性“隱藏失效”問(wèn)題的探究