溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下css溢出機制怎么使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
溢出
當一個盒子（blockcontainerbox）的內容（子元素、孫子元素等后裔）超過盒子本身的大小的時候，就會出現溢出。這個時候CSS屬性overflow決定如何處理溢出。這個css屬性大家都知道，在這里不討論了，在這里指出需要注意的幾點：
overflow會影響所在元素的所有內容的裁剪、滾動，但是有一種情況例外："Itaffectstheclippingofalloftheelement'scontentexceptanydescendantelements(andtheirrespectivecontentanddescendants)whosecontainingblockistheviewportoranancestoroftheelement."也就是說，overflow的所在元素必須是內容元素的直接或間接containingblock，這時overflow屬性才會影響這個內容元素。比如<B><C><C/><B/>，一般來說，B的overflow會影響C，但是如果C是相對于viewport或者A定位的（比如使用了position:absolute），那么C的顯示就不受B的裁剪、滾動的影響。
當需要滾動條的時候，滾動條會放在border與padding之間。父元素產生滾動條以后，它產生的containingblock的尺寸會減少，以便給滾動條騰出空間。
在<html>和<body>上的overflow屬性存在冒泡現象:"UAsmustapplythe'overflow'propertysetontherootelementtotheviewport.WhentherootelementisanHTML"HTML"elementoranXHTML"html"element,andthatelementhasanHTML"BODY"elementoranXHTML"body"elementasachild,useragentsmustinsteadapplythe'overflow'propertyfromthefirstsuchchildelementtotheviewport,ifthevalueontherootelementis'visible'.The'visible'valuewhenusedfortheviewportmustbeinterpretedas'auto'.Theelementfromwhichthevalueispropagatedmusthaveausedvaluefor'overflow'of'visible'."
可以推斷出：
一般來說只有元素才能擁有滾動條（更準確地說，只有產生blockcontainerbox的元素才能擁有滾動條）。但visualviewport是個例外。它雖然不是一個元素，但是也可以擁有滾動條。如果在<html>和<body>上都沒有設置overflow屬性而使用默認值visible（大部分場景都是這樣），那么，visualviewport的overflow就是auto：當網頁中有內容超出visualviewport時，visualviewport上會出現滾動條。
<html>的最終overflow永遠都是visible。也就是說，<html>元素永遠不可能擁有滾動條。
如果你想要為<body>設置非visible的overflow，需要先為<html>設置一個非visible的值來冒泡，從而<body>的overflow不會被冒泡。
小練習
小練習：利用以上原理，使visualviewport和<body>都擁有橫、豎滾動條，總共4個滾動條。不能使用overflow:scroll（這樣就太簡單了）。
步驟：
使visualviewport和<body>的最終overflow值都為auto，從而可以出現滾動條。
觸發visualviewport和<body>的溢出。通過【為內容設置一個更大的尺寸】來做到。
代碼+注釋：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="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的尺寸始終與visualviewport相同（即使你縮放、調整瀏覽器窗口的大小），從而body可以設置一個比visualviewport還大的尺寸(110%)。
對于默認為block的元素可以省略width:100%;*/
width:100%;
height:100%;
/*非visible的值冒泡到visualviewport上，使visualviewport可以出現滾動條*/
overflow:auto;
border:15pxsolidred;
}
body{
/*使得body可以出現滾動條*/
overflow:auto;
/*body溢出html，從而溢出initialcontainningblock，從而溢出visualviewport，使得visualviewport出現滾動條。
當然，你也可以通過很多其他的方式來觸發visualviewport的溢出，比如增大html元素，或者在body中弄一個position:absolute的p*/
width:110%;
height:110%;
border:15pxsolidgreen;
}
main{
/*main溢出body，使得body出現滾動條*/
width:110%;
height:110%;
border:15pxsolidblue;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>
以上就是“css溢出機制怎么使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
