淺談css溢出機(jī)制探究
我要評(píng)論為什么需要深入學(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)功能？
在這篇文章，我們將會(huì)從CSS標(biāo)準(zhǔn)出發(fā)，討論CSS溢出機(jī)制的細(xì)節(jié)。
溢出
當(dāng)一個(gè)盒子（block container box）的內(nèi)容（子元素、孫子元素等后裔）超過盒子本身的大小的時(shí)候，就會(huì)出現(xiàn)溢出。這個(gè)時(shí)候CSS屬性overflow決定如何處理溢出。這個(gè)css屬性大家都知道，在這里不討論了，在這里指出需要注意的幾點(diǎn)：
overflow會(huì)影響所在元素的所有內(nèi)容的裁剪、滾動(dòng)，但是有一種情況例外："It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element." 也就是說，overflow的所在元素必須是內(nèi)容元素的直接或間接containing block，這時(shí)overflow屬性才會(huì)影響這個(gè)內(nèi)容元素。比如<A><B><C><C/><B/><A/>，一般來說，B的overflow會(huì)影響C，但是如果C是相對(duì)于viewport或者A定位的（比如使用了position:absolute），那么C的顯示就不受B的裁剪、滾動(dòng)的影響。
當(dāng)需要滾動(dòng)條的時(shí)候，滾動(dòng)條會(huì)放在border與padding之間。父元素產(chǎn)生滾動(dòng)條以后，它產(chǎn)生的containing block的尺寸會(huì)減少，以便給滾動(dòng)條騰出空間。
在<html>和<body>上的overflow屬性存在冒泡現(xiàn)象: "UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'. "
可以推斷出：
一般來說只有元素才能擁有滾動(dòng)條（更準(zhǔn)確地說，只有產(chǎn)生block container box的元素才能擁有滾動(dòng)條）。但visual viewport是個(gè)例外。它雖然不是一個(gè)元素，但是也可以擁有滾動(dòng)條。如果在<html>和<body>上都沒有設(shè)置overflow屬性而使用默認(rèn)值visible（大部分場景都是這樣），那么，visual viewport的overflow就是auto：當(dāng)網(wǎng)頁中有內(nèi)容超出visual viewport時(shí)，visual viewport上會(huì)出現(xiàn)滾動(dòng)條。
<html>的最終overflow永遠(yuǎn)都是visible。也就是說，<html>元素永遠(yuǎn)不可能擁有滾動(dòng)條。
如果你想要為<body>設(shè)置非visible的overflow，需要先為<html>設(shè)置一個(gè)非visible的值來冒泡，從而<body>的overflow不會(huì)被冒泡。小練習(xí)
小練習(xí)：
利用以上原理，使visual viewport和<body>都擁有橫、豎滾動(dòng)條，總共4個(gè)滾動(dòng)條。不能使用overflow: scroll（這樣就太簡單了）。
步驟：
- 使visual viewport和<body>的最終overflow值都為auto，從而可以出現(xiàn)滾動(dòng)條。
- 觸發(fā)visual viewport和<body>的溢出。通過【為內(nèi)容設(shè)置一個(gè)更大的尺寸】來做到。
代碼+注釋：
<!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%)。
對(duì)于默認(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的div */
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é)果：
自己在chrome中打開以上代碼，能更加清晰地看出是怎么做到的。
也可以通過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)整瀏覽器窗口的大?。瑥亩鴅ody可以設(shè)置一個(gè)比visual viewport還大的尺寸(110%)。
對(duì)于默認(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%)。
對(duì)于默認(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>
<div class="abs"></div>
</body>
</html>
結(jié)果：
自己在chrome中打開以上代碼，能更加清晰地看出是怎么做到的。
如何看出某個(gè)滾動(dòng)條是屬于哪個(gè)元素的？
通過Chrome DevTools就可以看出滾動(dòng)條的所屬元素。
前面已經(jīng)說過，滾動(dòng)條的位置在元素的border與padding之間。當(dāng)你使用Chrome DevTools選中某個(gè)元素，發(fā)現(xiàn)滾動(dòng)條恰好在高亮區(qū)域（border）內(nèi)部時(shí)，滾動(dòng)條就屬于當(dāng)前元素。
要判斷滾動(dòng)條是否屬于visual viewport，首先先將右邊、下邊的滾動(dòng)條分別滾動(dòng)到最下、最右（這一步很重要，它保證沒有內(nèi)容藏在滾動(dòng)條下面）。然后，Ctrl+Shift+C選擇右邊或下邊的滾動(dòng)條，如果高亮的區(qū)域不包含這個(gè)滾動(dòng)條，就說明這個(gè)滾動(dòng)條不屬于任何元素，也就是屬于visual viewport。
參考資料
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
css實(shí)現(xiàn)單行文本溢出顯示省略號(hào)的示例代碼
這篇文章主要給大家介紹了使用CSS中的text-overflow屬性來實(shí)現(xiàn)單行文本溢出顯示省略號(hào),文章中有詳細(xì)的實(shí)現(xiàn)代碼，感興趣的同學(xué)可以自己動(dòng)手嘗試一下2023-09-07
純CSS實(shí)現(xiàn)“文本溢出截?cái)嗍÷浴钡膸追N方法
這篇文章主要介紹了純CSS實(shí)現(xiàn)“文本溢出截?cái)嗍÷浴钡膸追N方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-03-30css多行文本溢出時(shí)出現(xiàn)省略號(hào)的示例
這篇文章主要介紹了css多行文本溢出時(shí)出現(xiàn)省略號(hào)的示例的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-13
本篇文章主要介紹了純CSS定制文本省略的方法大全，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-16css實(shí)現(xiàn)文本溢出顯示省略號(hào)
這篇文章主要介紹了css實(shí)現(xiàn)文本溢出顯示省略號(hào)的方法和示例分享，推薦給大家。2014-12-23css實(shí)現(xiàn)li中文本超出行寬自動(dòng)隱藏
li中的文本超出行寬自動(dòng)隱藏，在一些新聞?lì)惖牧斜響?yīng)用中還是比較實(shí)用的，具體的實(shí)現(xiàn)css樣式如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-09-29css overflow溢出隱藏(文字溢出時(shí)的自動(dòng)隱藏處理)
css溢出隱藏一般用于當(dāng)內(nèi)容太大以至于無法適應(yīng)指定的區(qū)域時(shí)，通過設(shè)置css下的overflow屬性來隱藏其內(nèi)容2013-03-07標(biāo)題長度溢出時(shí)，自動(dòng)顯示為省略“...”的Css text-overflow
內(nèi)容超出后自動(dòng)隱藏并加省略標(biāo)記(...)引號(hào)的Css text-overflow:ellipsis; o...2011-07-27CSS教程:關(guān)于文字溢出問題的研究-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
首先引起對(duì)這個(gè)溢出問題進(jìn)行研究是因?yàn)榭吹揭粋€(gè)朋友的帖子，里面提到ie7下出現(xiàn)的文字溢出問題； 于是又重新翻了以前懌飛斑竹的帖子，他提到的是注釋引起的文字溢出問題2008-10-17- 設(shè)置text-overflow: ellipsis;即可實(shí)現(xiàn)文本溢出省略的效果，本文主要介紹了CSS 文字溢出:ellipsis在IE上不起效果的解決，具有一定的參考價(jià)值，感興趣的可以了解一下2023-11-23
