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

資訊專欄INFORMATION COLUMN

關(guān)于CSS中設(shè)置overflow屬性的值為hidden的相關(guān)理解

codercao / 911人閱讀

摘要：非根元素，且其屬性是和的元素的包含塊它的包含塊是由最近的祖先塊容器盒的內(nèi)容區(qū)域創(chuàng)建的。如何觸發(fā)只需要保證滿足下面至少一條就會觸發(fā)根元素設(shè)置了值不為的元素設(shè)置了屬性不為的元素設(shè)置了屬性不為和的元素設(shè)置了的值為和中的任何一個的元素。

作者：心葉
時間：2018-04-18 17:53

包裹元素剪裁條件

是不是包裹元素overflow設(shè)置為hidden以后，內(nèi)部元素如果超過包裹元素的話就會被剪裁？答案是不一定，這要看此刻的CSS環(huán)境。

根據(jù)對CSS2.1規(guī)范的理解，可以這樣表述：如果一個元素的包含塊的overflow屬性設(shè)置為hidden，那么超過這個包含塊部分的內(nèi)容就會被剪裁。

因此我們需要學(xué)會尋找一個元素的包含塊，不過在這之前，讓我們先簡單的知道如果一個元素的overflow屬性設(shè)置為hidden，被其包裹的內(nèi)容如果溢出需要同時滿足的條件：

擁有overflow:hidden樣式的塊元素不具有position:relative和position:absolute樣式；

內(nèi)部溢出的元素是通過position:absolute絕對定位或position:fixed固定定位。

尋找包含塊 什么是包含塊？

根據(jù)CSS2.1規(guī)范里面的說明，簡單的說就是：用來確定一個元素的盒子的位置和尺寸的矩形就叫這個元素的包含塊。

尋找規(guī)則

因此包含塊是一個非常有意義而且涉及屬性很多的概念，至于如何確定一個元素的盒子的包含塊是誰，遵循下面幾條規(guī)則：

根元素的包含塊

其包含塊又叫初始包含塊，可以先認(rèn)為就是可視區(qū)域（其實不準(zhǔn)確，姑且這樣說比較簡單）。

非根元素，且其position屬性是relative和static的元素的包含塊

它的包含塊是由最近的祖先塊容器盒的內(nèi)容區(qū)域創(chuàng)建的。

非根元素，且其position屬性是absolute的元素的包含塊

它的包含塊由最近的position不為static的祖先元素創(chuàng)建（如果沒有找到這樣的祖先元素，這個絕對定位的元素的包含塊為初始包含塊）；具體創(chuàng)建方法如下：

如果這個祖先元素是行內(nèi)元素，包含塊的范圍是這個祖先元素中的第一個和最后一個行內(nèi)盒的padding box圍起來的區(qū)域；

如果這個祖先元素不是行內(nèi)元素，包含塊的范圍是這個祖先元素的內(nèi)邊距+width區(qū)域。

為什么會清除浮動造成的影響

一個有趣的現(xiàn)象是：一個沒有設(shè)置高度的父元素包裹一個子元素，父元素應(yīng)該會被子元素撐起來，也就是有高了，不過如果你給子元素設(shè)置了浮動，顯然原來父元素撐起來的高就塌了，到這里好像都很正常；接著，你給父元素加了一個overflow:hidden，發(fā)現(xiàn)父元素的高又有了，好像浮動被清除了一樣，為什么會這樣？

其實歸根結(jié)底，這里的浮動沒有清除，只是因為overflow屬性的值是hidden的時候會形成一個BFC，而BFC就是一個隔離的渲染區(qū)域，因此浮動造成的高崩塌會導(dǎo)致對外部布局的影響，為了消除這種不益的表現(xiàn)，計算高度的時候浮動元素也計算進去了。

如果說到這里就停止，你可能會非常好奇，除了這里的情況還有什么情況會產(chǎn)生BFC，而BFC環(huán)境下具體會有哪些規(guī)則？接著下段來講。

BFC（塊級格式化上下文）

BFC是一個非常有用的環(huán)境，如果用一句話來說明它是什么樣的存在：一個隔離的渲染區(qū)域，容器里面的子元素不會在布局上影響到外面的元素，反之也是如此。

如何觸發(fā)BFC?

只需要保證滿足下面至少一條就會觸發(fā)BFC：

根元素body；

設(shè)置了float值不為none的元素；

設(shè)置了overflow屬性不為visible的元素；

設(shè)置了屬性position不為relative和static的元素；

設(shè)置了display的值為flex、table-cell、table-caption和inline-block中的任何一個的元素。

可以看出來，就是一個比較獨立的塊，因為是一個獨立的環(huán)境，在開發(fā)時候適度使用會有效降低開發(fā)和維護難度。

BFC環(huán)境下的特性或規(guī)則

大致可以歸納為三個方面：獨立性、垂直分布規(guī)則和水平分布規(guī)則。

獨立性：BFC是頁面上一個隔離的容器，和外面的關(guān)系是不會互相影響，對浮動而言也是，不會和浮動元素發(fā)生重疊，高也和上面提到的一樣不會崩塌；

垂直分布規(guī)則：BFC的內(nèi)部里面的一個個盒子在垂直方向一個接著一個排放，位置由margin決定，兩個相鄰的盒子margin會發(fā)生重疊；

水平分布規(guī)則：BFC里面的盒子的左外邊緣和包含塊的左邊相接觸，簡單的理解就是水平方向不會發(fā)生margin重疊。

上面只是大體上說明一下BFC，具體使用的時候還有很多沒有說明的，比如上面垂直方向上的重疊如何控制發(fā)生與否？如果重疊那么是如何計算的？不過本篇文章到這里就結(jié)束了。

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

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

相關(guān)文章

  • 深入理解css中的margin屬性（最新瀏覽器支持）

    摘要：豎直方向的外邊距合并兩個豎直方向的盒子相遇時，其豎直方向的距離等于上方盒子的下外邊距和下方盒子的上外邊距中較大的一個。 本文啟發(fā)于博客園一篇2016年的深入理解css中的margin屬性文章，根據(jù)當(dāng)前瀏覽器（chrome 71.0.3578.98（正式版本） （64 位）），加上自己的理解，每個例子都是親測過 這篇博文主要分為以下幾個部分： margin--基礎(chǔ)知識margin--在同...

    bingo 評論0 收藏0

  • 深入理解css中的margin屬性（最新瀏覽器支持）

    摘要：豎直方向的外邊距合并兩個豎直方向的盒子相遇時，其豎直方向的距離等于上方盒子的下外邊距和下方盒子的上外邊距中較大的一個。 本文啟發(fā)于博客園一篇2016年的深入理解css中的margin屬性文章，根據(jù)當(dāng)前瀏覽器（chrome 71.0.3578.98（正式版本） （64 位）），加上自己的理解，每個例子都是親測過 這篇博文主要分為以下幾個部分： margin--基礎(chǔ)知識margin--在同...

    pingan8787 評論0 收藏0

  • CSS: 潛藏著的BFC

    摘要：而就潛藏在其中，當(dāng)你修改樣式時，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識到的神奇之處。實例解決侵占浮動元素的問題我們知道浮動元素會脫離文檔流，然后浮蓋在文檔流元素上。 在寫樣式時，往往是添加了一個樣式，又或者是修改了某個屬性，就達到了我們的預(yù)期。而BFC就潛藏在其中，當(dāng)你修改樣式時，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識到BFC的神奇之處。 一、什么是BFC（Block Form...

    learn_shifeng 評論0 收藏0

  • CSS布局相關(guān)基本概念

    摘要：當(dāng)一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間基于文檔流，理解定位模式相對定位，即相對于元素在文檔流中位置進行偏移。絕對定位，即完全脫離文檔流，相對于屬性非值的最近父級元素進行偏移。 主要參考文檔：http://www.zhangxinxu.com/wor...https://www.cnblogs.com/dojo-... 測試?yán)樱篽ttps...

    wangxinarhat 評論0 收藏0

發(fā)表評論

0條評論

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