国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關于CSS中設置overflow屬性的值為hidden的相關理解

codercao / 894人閱讀

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

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

包裹元素剪裁條件

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

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

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

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

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

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

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

尋找規則

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

根元素的包含塊

其包含塊又叫初始包含塊，可以先認為就是可視區域（其實不準確，姑且這樣說比較簡單）。

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

它的包含塊是由最近的祖先塊容器盒的內容區域創建的。

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

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

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

如果這個祖先元素不是行內元素，包含塊的范圍是這個祖先元素的內邊距+width區域。

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

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

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

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

BFC（塊級格式化上下文）

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

如何觸發BFC?

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

根元素body；

設置了float值不為none的元素；

設置了overflow屬性不為visible的元素；

設置了屬性position不為relative和static的元素；

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

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

BFC環境下的特性或規則

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

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

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113097.html

相關文章

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

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

    bingo 評論0 收藏0

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

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

    pingan8787 評論0 收藏0

  • CSS: 潛藏著的BFC

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

    learn_shifeng 評論0 收藏0

  • CSS布局相關基本概念

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

    wangxinarhat 評論0 收藏0

發表評論

0條評論

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