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

資訊專欄INFORMATION COLUMN

FC及BFC

layman / 1198人閱讀

摘要：什么是塊級格式化上下文是布局的對象和基本單位，直觀點來說，就是一個頁面是由很多個組成的。的用途可以阻止元素被浮動元素覆蓋實現(xiàn)自適應(yīng)兩欄布局可以包含浮動元素清除內(nèi)部浮動不同的可以阻止重疊思維導(dǎo)圖

1.什么是FC

2.BFC塊級格式化上下文(Block formatting context) 
　Box 是 CSS 布局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內(nèi)的元素會以不同的方式渲染。讓我們看看有哪些盒子：
block-level box:display 屬性為 block, list-item, table 的元素，會生成 block-level box。并且參與 block fomatting context；
inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box。并且參與 inline formatting context；
run-in box: css3 中才有。

(1)定義:它是一個獨立的渲染區(qū)域,只有block-level-box參與.它規(guī)定了塊級盒子內(nèi)部子元素的布局.
(2)BFC常見觸發(fā)條件:

1>.根元素，即HTML元素
2>.float不為none
3>.position不為static或者是relative
4>.overflow的值為hidden,auto或者scroll
5>.display的值為table-cell,table-caption或者inline-block

(3)BFC布局規(guī)則:
1>.BFC內(nèi)部的盒子在垂直方向一個接一個的放置
2>.同一個BFC中相鄰盒子的margin會發(fā)生合并

3>.每個元素盒子的左外邊緣(margin-box)和包含它的容器的border-box接觸(對于從右往左的排版則相反，是右邊接觸),即使存在浮動也是如此
抽象1>,2>,3>:盒子排列方式,盒子緊鄰時外邊距會合并,盒子嵌套時內(nèi)部元素的外邊距盒子和外部容器的border-box緊鄰
eg:


說明:img圖片的margin-box和class為first塊元素的border-box的內(nèi)側(cè)接觸.

4>.BFC區(qū)域不會和float-box重疊
5>.BFC是頁面上一個獨立的容器,它其中的子元素不會影響到外面得元素,外面得元素也不會影響到內(nèi)部
6>.計算BFC的高度時,浮動元素也參與計算

簡單記錄順序:獨立的(5>)渲染(3>,1>,2>,4>)區(qū)域(區(qū)域的計算方式6>)

(4).重疊的計算方式
1>當(dāng)兩個margin都是正值的時候，取兩者的最大值；
2>當(dāng)margin都是負值的時候，取的是其中絕對值較大的，然后，從 0 位置，負向位移；
3>當(dāng)有正有負的時候，先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。

(5).BFC的用途
1>.可以阻止元素被浮動元素覆蓋
2>.實現(xiàn)自適應(yīng)兩欄布局
3>.可以包含浮動元素——清除內(nèi)部浮動
4>.不同的BFC可以阻止margin重疊

(6)思維導(dǎo)圖

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/52891.html

相關(guān)文章

  • FC及BFC

    摘要：什么是塊級格式化上下文是布局的對象和基本單位，直觀點來說，就是一個頁面是由很多個組成的。的用途可以阻止元素被浮動元素覆蓋實現(xiàn)自適應(yīng)兩欄布局可以包含浮動元素清除內(nèi)部浮動不同的可以阻止重疊思維導(dǎo)圖 1.什么是FC showImg(https://segmentfault.com/img/bVbfrN8?w=808&h=286); 2.BFC塊級格式化上下文(Block formatting...

    魏明 評論0 收藏0

  • CSS中重要的BFC

    摘要：中有個重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實分為定位流浮動流普通流三種。使用包含浮動元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介 在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為定位...

    plus2047 評論0 收藏0

  • CSS之BFC

    摘要：比如說最常見的塊級元素內(nèi)聯(lián)元素文檔模型層疊樣式模型盒子模型等，但還有一種規(guī)范經(jīng)常會被排除在規(guī)范的認(rèn)知之外。屬于同一個的兩個相鄰的會發(fā)生重疊。計算的高度時，浮動元素也參與計算。垂直方向的距離由決定，利用這一點可以解決塌陷問題。 對于很多初學(xué)者來說，CSS是不講道理的，但是如果去深究，會發(fā)現(xiàn)其實CSS是有一定道理的。比如說最常見的塊級元素、內(nèi)聯(lián)元素、文檔模型、層疊樣式模型、盒子模型CSS等...

    Jinkey 評論0 收藏0

  • css布局的各種FC簡單介紹：BFC，IFC，GFC，F(xiàn)FC

    摘要：完整的說法是屬于同一個的倆個相鄰的的會發(fā)生重疊，與方向無關(guān)。元素會位于與與之間，使得寬度縮短。簡單的說，有了之后，布局不再局限于單個維度了。 什么是FC？ Formatting Context，格式化上下文，指頁面中一個渲染區(qū)域，擁有一套渲染規(guī)則，它決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。 BFC 什么是BFC Block Formatting Context，塊級格式...

    mindwind 評論0 收藏0

發(fā)表評論

0條評論

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