欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

1.overflow元素屬性的簡單介紹。
正如w3c介紹的那樣……overflow總共有五個屬性。
overflow:visible;默認(rèn)值，如果內(nèi)容超出，則會呈現(xiàn)在盒子之外。
overflow:scroll;超出的內(nèi)容會以滾動條的形式顯示。
overflow:auto;自適應(yīng)，如果內(nèi)容超出，自動以滾動條顯示方便查看。
overflow:inherit;繼承父類overflow屬性。
overflow:hidden;超出的部分隱藏且不可見。
此次主要探討overflow:hidden;屬性。
2.overflow:hidden;的一般應(yīng)用。
（1）下面通過一個簡單的例子對overflow：hidden；屬性的作用進(jìn)行說明。
<!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屬性“隱藏失效”問題的探究

創(chuàng)新互聯(lián)建站自成立以來，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營銷服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開發(fā)管理經(jīng)驗(yàn)、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開發(fā)工程師團(tuán)隊(duì)及專業(yè)的網(wǎng)站設(shè)計(jì)師團(tuán)隊(duì)。

    由效果圖很明顯可以看出，綠色子類超出了紅色父類300px。
    （2）這時我們給紅色父類設(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屬性“隱藏失效”問題的探究
可以從圖中看出，綠色子類超出的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屬性“隱藏失效”問題的探究
很明顯，紅色父類的高度在設(shè)置overflow：hidden;和auto組合屬性之后被子類的高度撐開。
這就是overflow：hidden；屬性在實(shí)際應(yīng)用中最基礎(chǔ)的使用。
這時候你自然心里會嘀咕，逼逼半天，這誰不知到？別擔(dān)心，這只是熱身。
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;
}
（設(shè)置父類寬度，高度為200px，背景色為紅色）
.green {
width: 100px;
height: 400px;
position: absolute;
background-color: green;
}
（設(shè)置子類寬度，高度為100px和400px，背景色為綠色，絕對定位）
.black{
width: 300px;
height: 300px;
background-color: black;
position: relative;
}
（設(shè)置祖父類寬度，高度為300，300px，背景色為黑色，相對定位）
</style>
</head>
<body>
<div class="black">
<div class="red">
<div class="green"></div>
</div>
</div>
</body>
</html>
（效果圖）如下：
關(guān)于overflow元素，hidden屬性“隱藏失效”問題的探究
看到效果圖是不是感覺和你預(yù)想的大相徑庭呢？怎么會這樣？到底什么原因？是什么導(dǎo)致它“隱藏”失效呢？
還記得代碼怎么寫的嗎？我們給黑色祖父類相對定位，父類并沒有定位只是設(shè)置了overflow：hidden；屬性，但給子類設(shè)置了絕對定位讓子類脫離了父類的束縛，脫離了文本流。原本我們預(yù)想的是綠色子類超出部分被紅色父類隱藏，可事實(shí)是它并沒有，而且超出了祖父類。
（2）下面我們通過給祖父類設(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;
}
.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屬性“隱藏失效”問題的探究
我們看到調(diào)皮的綠色子類屬性在祖父類設(shè)置相對定位和overflow：hidden；屬性之后終于隱藏了，但我們發(fā)現(xiàn)，它只不過是相對于相對定位的黑色祖父類隱藏了超出部分，但父類的超出部分隱藏的元素屬性它并沒有實(shí)現(xiàn)，可見它并不是一個很聽話的孩子。
怎么辦呢？孩子不聽話怎么辦？很簡單，打一頓就好了。
（3）我們再給父類也設(shè)置相對定位屬性看一看。
<!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è)置相對定位）
}
.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屬性“隱藏失效”問題的探究
哈哈哈……看到?jīng)]有，調(diào)皮的綠色子類終于在紅色父類設(shè)置相對定位之后終于聽話了，它隱藏了自己超出去的小尾巴。
好了。下面我們總結(jié)一下。
在子類，父類，祖父類，祖祖父類等都沒有定位（即默認(rèn)瀏覽器定位），父類設(shè)置overflow：hidden；屬性生效，即子類超出部分會被隱藏。
但只要子類絕對定位，想要子類生效overflow:hidden;屬性，那相應(yīng)設(shè)置overflow:hidden;屬性的父類必須定位（即除了了瀏覽器默認(rèn)定位）之后才會生效，否則隱藏失效。如果父類和祖父類都設(shè)置了overflow:hidden;和定位屬性，則以父類的優(yōu)先級最高，以此類推。

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

網(wǎng)站名稱：關(guān)于overflow元素，hidden屬性“隱藏失效”問題的探究
鏈接URL：http://chinadenli.net/article38/ppdspp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、App開發(fā)、全網(wǎng)營銷推廣、網(wǎng)站改版、外貿(mào)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)