|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。 本篇文章給大家?guī)淼膬?nèi)容是關(guān)于css溢出機(jī)制是什么？css溢出的詳細(xì)介紹（附實(shí)例），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你有所幫助。為什么需要深入學(xué)習(xí)CSS溢出機(jī)制？在實(shí)際開發(fā)的過程中，內(nèi)容溢出是經(jīng)常見到的。如果不深入了解這個(gè)機(jī)制，你經(jīng)常會(huì)碰到這樣的問題：為什么這個(gè)元素沒有受到祖先元素的overflow:hidden的影響？這里出現(xiàn)的滾動(dòng)條是哪個(gè)元素的？如果消除這個(gè)滾動(dòng)條？如何在指定的元素上增加滾動(dòng)功能？ 溢出當(dāng)一個(gè)盒子（block container box）的內(nèi)容（子元素、孫子元素等后裔）超過盒子本身的大小的時(shí)候，就會(huì)出現(xiàn)溢出。這個(gè)時(shí)候CSS屬性overflow決定如何處理溢出。這個(gè)css屬性大家都知道，在這里不討論了，在這里指出需要注意的幾點(diǎn)：
可以推斷出：
小練習(xí)小練習(xí)：利用以上原理，使visual viewport和<body>都擁有橫、豎滾動(dòng)條，總共4個(gè)滾動(dòng)條。不能使用overflow: scroll（這樣就太簡單了）。
代碼+注釋： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>test</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
/* 使html的尺寸始終與visual viewport相同（即使你縮放、調(diào)整瀏覽器窗口的大小），從而body可以設(shè)置一個(gè)比visual viewport還大的尺寸(110%)。
對于默認(rèn)為block的元素可以省略width: 100%; */
width: 100%;
height: 100%;
/* 非visible的值冒泡到visual viewport上，使visual viewport可以出現(xiàn)滾動(dòng)條 */
overflow: auto;
border: 15px solid red;
}
body {
/* 使得body可以出現(xiàn)滾動(dòng)條 */
overflow: auto;
/* body溢出html，從而溢出initial containning block，從而溢出visual viewport，使得visual viewport出現(xiàn)滾動(dòng)條。
當(dāng)然，你也可以通過很多其他的方式來觸發(fā)visual viewport的溢出，比如增大html元素，或者在body中弄一個(gè)position: absolute的p */
width: 110%;
height: 110%;
border: 15px solid green;
}
main {
/* main溢出body，使得body出現(xiàn)滾動(dòng)條 */
width: 110%;
height: 110%;
border: 15px solid blue;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>結(jié)果：
也可以通過absolute的方式來溢出initial containing block： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>test</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
/* 使html的尺寸始終與visual viewport相同（即使你縮放、調(diào)整瀏覽器窗口的大小），從而body可以設(shè)置一個(gè)比visual viewport還大的尺寸(110%)。
對于默認(rèn)為block的元素可以省略width: 100%; */
width: 100%;
height: 100%;
/* 非visible的值冒泡到visual viewport上，使visual viewport可以出現(xiàn)滾動(dòng)條 */
overflow: auto;
border: 15px solid red;
}
body {
/* 使得body可以出現(xiàn)滾動(dòng)條 */
overflow: auto;
/* 為body設(shè)置一個(gè)尺寸，從而main可以設(shè)置一個(gè)比body還大的尺寸(110%)。
對于默認(rèn)為block的元素可以省略width: 100%; */
height: 100%;
border: 15px solid green;
}
main {
/* main溢出body，使得body出現(xiàn)滾動(dòng)條 */
width: 110%;
height: 110%;
border: 15px solid blue;
}
.abs {
/* 通過absolute的方式來溢出initial containing block，從而溢出viewport */
position: absolute;
width: 100px;
height: 100px;
right: -100px;
bottom: -100px;
border: 15px solid blueviolet;
}
</style>
</head>
<body>
<main>
</main>
<p class="abs"></p>
</body>
</html>結(jié)果：
如何看出某個(gè)滾動(dòng)條是屬于哪個(gè)元素的？通過Chrome DevTools就可以看出滾動(dòng)條的所屬元素。
要判斷滾動(dòng)條是否屬于visual viewport，首先先將右邊、下邊的滾動(dòng)條分別滾動(dòng)到最下、最右（這一步很重要，它保證沒有內(nèi)容藏在滾動(dòng)條下面）。然后，
以上就是css溢出機(jī)制是什么？css溢出的詳細(xì)介紹（附實(shí)例）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！ 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個(gè)人學(xué)習(xí)測試使用，請?jiān)谙螺d后24小時(shí)內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請及時(shí)通知我們(peng896066052@126.com),我們會(huì)及時(shí)處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
