成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css溢出機(jī)制探究

wangbinke / 2510人閱讀

摘要：為什么需要深入學(xué)習(xí)溢出機(jī)制在實際開發(fā)的過程中，內(nèi)容溢出是經(jīng)常見到的。溢出當(dāng)一個盒子的內(nèi)容子元素孫子元素等后裔超過盒子本身的大小的時候，就會出現(xiàn)溢出。這個時候?qū)傩詻Q定如何處理溢出。

為什么需要深入學(xué)習(xí)CSS溢出機(jī)制？

在實際開發(fā)的過程中，內(nèi)容溢出是經(jīng)常見到的。如果不深入了解這個機(jī)制，你經(jīng)常會碰到這樣的問題：為什么這個元素沒有受到祖先元素的overflow:hidden的影響？這里出現(xiàn)的滾動條是哪個元素的？如何消除這個滾動條？如何在指定的元素上增加滾動功能？
在這篇文章，我們將會從CSS標(biāo)準(zhǔn)出發(fā)，討論CSS溢出機(jī)制的細(xì)節(jié)。

溢出

當(dāng)一個盒子（block container box）的內(nèi)容（子元素、孫子元素等后裔）超過盒子本身的大小的時候，就會出現(xiàn)溢出。這個時候CSS屬性overflow決定如何處理溢出。這個css屬性大家都知道，在這里不討論了，在這里指出需要注意的幾點：

overflow會影響所在元素的所有內(nèi)容的裁剪、滾動，但是有一種情況例外："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，這時overflow屬性才會影響這個內(nèi)容元素。比如，一般來說，B的overflow會影響C，但是如果C是相對于viewport或者A定位的（比如使用了position:absolute），那么C的顯示就不受B的裁剪、滾動的影響。

當(dāng)需要滾動條的時候，滾動條會放在border與padding之間。父元素產(chǎn)生滾動條以后，它產(chǎn)生的containing block的尺寸會減少，以便給滾動條騰出空間。

CSS3文檔："When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent may offer a scrolling mechanism." 即，visual viewport可以擁有滾動條。

在和上的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". "
意思是：viewport的overflow屬性是從或者元素竊取來的：如果的overflow不是"visible"（默認(rèn)值），那就從竊??；否則，從竊取。如果viewport竊取來的overflow是"visible"，那么將它視為"auto"（因為不可能在viewport之外顯示內(nèi)容）。被竊取的元素，它的overflow被設(shè)置為"visible"。

可以推斷出：

一般來說只有元素才能擁有滾動條（更準(zhǔn)確地說，只有產(chǎn)生block container box的元素才能擁有滾動條）。但visual viewport是個例外。它雖然不是一個元素，但是也可以擁有滾動條。如果在和上都沒有設(shè)置overflow屬性而使用默認(rèn)值visible（大部分場景都是這樣），那么，visual viewport的overflow就是auto：當(dāng)網(wǎng)頁中有內(nèi)容超出visual viewport時，visual viewport上會出現(xiàn)滾動條。

關(guān)于viewport的討論在【響應(yīng)式布局】initial containing block、viewport以及相關(guān)尺寸。

的最終overflow永遠(yuǎn)都是visible。也就是說，元素永遠(yuǎn)不可能擁有滾動條。

如果你想要為設(shè)置非visible的overflow，需要先為設(shè)置一個非visible的值來冒泡，從而的overflow不會被冒泡。

小練習(xí)

小練習(xí)：利用以上原理，使visual viewport和都擁有橫、豎滾動條，總共4個滾動條。不能使用overflow: scroll（這樣就太簡單了）。
步驟：

使visual viewport和的最終overflow值都為auto，從而可以出現(xiàn)滾動條。

觸發(fā)visual viewport和的溢出。通過【為內(nèi)容設(shè)置一個更大的尺寸】來做到。

代碼+注釋：





  
  
  test

結(jié)果：

自己在chrome中打開以上代碼，能更加清晰地看出是怎么做到的。

也可以通過absolute的方式來溢出initial containing block：





  
  
  test

結(jié)果：

自己在chrome中打開以上代碼，能更加清晰地看出是怎么做到的。
如何看出某個滾動條是屬于哪個元素的？

通過Chrome DevTools就可以看出滾動條的所屬元素。
前面已經(jīng)說過，滾動條的位置在元素的border與padding之間。當(dāng)你使用Chrome DevTools選中某個元素，發(fā)現(xiàn)滾動條恰好在高亮區(qū)域（border）內(nèi)部時，滾動條就屬于當(dāng)前元素。

要判斷滾動條是否屬于visual viewport，首先先將右邊、下邊的滾動條分別滾動到最下、最右（這一步很重要，它保證沒有內(nèi)容藏在滾動條下面）。然后，Ctrl+Shift+C選擇右邊或下邊的滾動條，如果高亮的區(qū)域不包含這個滾動條，就說明這個滾動條不屬于任何元素，也就是屬于visual viewport。

JavaScript獲取滾動距離

https://developer.mozilla.org...
https://developer.mozilla.org...
獲取或設(shè)置元素的內(nèi)容被滾動的距離。這兩個屬性適用于所有Element。

如果想要獲取visual viewport的滾動距離，除了這個方法以外，還有更多等效的方法。見【響應(yīng)式布局】initial containing block、viewport以及相關(guān)尺寸。

參考資料

css2.1標(biāo)準(zhǔn)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116954.html

相關(guān)文章

  • 【響應(yīng)式布局】initial containing block、viewport以及相關(guān)尺寸

    摘要：影響著其中元素的尺寸和定位。在標(biāo)準(zhǔn)中，元素的稱為。當(dāng)?shù)膶挾雀叨仁褂冒俜謹(jǐn)?shù)的值時，這個百分?jǐn)?shù)的基準(zhǔn)就是的尺寸。例子其中就溢出了的區(qū)域。造成以上不同的原因是，在桌面端的縮放和在移動端的縮放有不同的性質(zhì)。這兩個數(shù)值的單位是設(shè)備獨立像素。 前言 本篇文章修改、整理自我以前寫的一篇文章。 在閱讀這篇文章之前，你需要了解設(shè)備像素、邏輯像素（設(shè)備獨立像素）和CSS像素的區(qū)別，見我的前一篇文章理解設(shè)備...

    weknow619 評論0 收藏0

  • 你真的知道什么情況下text-overflow:ellipsis才會生效嗎？

    摘要：但是究竟什么情況才會觸發(fā)文本溢出，大部分人肯定沒有探究過。也不會出問題，但是誰也沒想到當(dāng)時，居然生效了。使用對象截取片段后獲取到的對象的才是內(nèi)容的真正寬度。并不是內(nèi)容區(qū)域的真正寬度也就是說當(dāng)加是應(yīng)為成立時才是觸發(fā)真正的條件。 text-overflow:ellipsis是我們用來設(shè)置文本溢出的一個常用屬性。 但是究竟什么情況才會觸發(fā)文本溢出，大部分人肯定沒有探究過。我以前也沒有注意，反...

    meislzhua 評論0 收藏0

  • 從布局看css基礎(chǔ)

    摘要：布局學(xué)習(xí)的主要目的是為了記住各種屬性么，最重要的是理解的定位機(jī)制與盒子模型。它是一個獨立的渲染區(qū)域，只有參與，它規(guī)定了內(nèi)部的如何布局，并且與這個區(qū)域外部毫不相干。 css布局 學(xué)習(xí)css的主要目的是為了記住各種屬性么？NO，最重要的是理解css的定位機(jī)制與盒子模型。 接下來，從布局的角度來學(xué)習(xí)css的定位機(jī)制和盒子模型，學(xué)習(xí)之前還是先來提幾個問題 1.進(jìn)行css布局前為什么要學(xué)習(xí)定位...

    thekingisalwaysluc 評論0 收藏0

  • 元素auto寬高的影響因素

    摘要：關(guān)于內(nèi)聯(lián)元素之前討論的多是塊級元素，而沒有考慮到內(nèi)聯(lián)元素的情況。但巧合的是，在普通流定位中，內(nèi)聯(lián)元素寬度和高度規(guī)則卻和塊級元素絕對定位差不多，都只受內(nèi)容大小影響。 我們知道，元素在沒有設(shè)置寬高的情況下，默認(rèn)的寬高值都為auto。而這個auto到底是如何讓元素自動擁有寬高的呢，也就是說，元素的寬度和高度到底會受到什么因素的影響？本文將通過一個例子來對這一問題一探究竟，HTML結(jié)構(gòu)和初始c...

    crelaber 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<