亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

BFC-塊格式化上下文（block formatting context）

keithyau / 2246人閱讀

摘要：概念塊格式化上下文，是頁(yè)面塊級(jí)元素布局及浮動(dòng)元素彼此交互的區(qū)域。阻止相鄰元素外邊距合并的方法被非空內(nèi)容或分隔開(kāi)。不在一個(gè)普通流中或用分割開(kāi)。讓在垂直方向上不毗鄰。

BFC概念

BFC（block formatting context）塊格式化上下文， 是Web頁(yè)面塊級(jí)元素布局及浮動(dòng)元素彼此交互的區(qū)域。BFC是一個(gè)獨(dú)立的布局環(huán)境，（實(shí)際頁(yè)面渲染時(shí)是不可見(jiàn)的），由BFC構(gòu)建的區(qū)域其內(nèi)部元素的布局是不受外界的影響的，利用這個(gè)特性可用來(lái)消除浮動(dòng)元素對(duì)其非浮動(dòng)的兄弟元素和其子元素帶來(lái)的影響。在BFC中元素從頂端開(kāi)始垂直地一個(gè)接一個(gè)地排列，兩個(gè)元素之間的垂直的間隙是由他們的margin 值所決定的。在一個(gè)BFC中，兩個(gè)相鄰的塊級(jí)元素的垂直外邊距會(huì)產(chǎn)生折疊。（后面詳細(xì)解釋?zhuān)?/em>

形成BFC的條件：

1.浮動(dòng)、絕對(duì)定位、fixed定位，這些方式都能讓元素脫離文檔流形成獨(dú)立的BFC。
2.display:inline-block/table-cells/table-captions/inline-flex（非塊級(jí)元素的塊容器元素）
3.overflow:auto/hidden/scroll
overflow屬性本身并沒(méi)有什么特別之處，但是是會(huì)產(chǎn)生BFC創(chuàng)造獨(dú)立布局環(huán)境，使元素不受浮動(dòng)元素的影響。

使用BFC清除浮動(dòng)效果示例：

BFC的作用：

1.清除浮動(dòng)帶來(lái)的副作用（將浮動(dòng)限定在BFC區(qū)域中）
2.撐開(kāi)父元素（包住浮動(dòng)元素） 清除浮動(dòng)就是撐開(kāi)父元素
3.阻止外邊距合并
4.BFC獨(dú)立性可用來(lái)布局

關(guān)于margin合并 margin合并出現(xiàn)的三個(gè)場(chǎng)景：

1.同一個(gè)BFC環(huán)境中，處于普通文檔流中的垂直相鄰元素的外邊距合并。

2.父子元素的外邊距合并。

3.空元素自身的外邊距合并。

如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并

margin合并規(guī)則：

1.兩個(gè)margin都是正值的時(shí)候，取兩者的最大值；
2.當(dāng) margin 都是負(fù)值的時(shí)候，取的是其中絕對(duì)值較大的，然后，從0位置，負(fù)向位移；
3.當(dāng)有正有負(fù)的時(shí)候，先取出負(fù) margin 中絕對(duì)值中最大的，然后和正 margin 值中最大的 margin 相加。
所有毗鄰的margin要一起參與運(yùn)算，不能分步進(jìn)行。

阻止相鄰元素外邊距合并的方法：

1.被非空內(nèi)容、padding、border 或 clear 分隔開(kāi)。
2.不在一個(gè)普通流中或用BFC分割開(kāi)。
3.讓margin在垂直方向上不毗鄰。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113541.html

相關(guān)文章

  • BFC原理詳解

    摘要：最常見(jiàn)的有簡(jiǎn)稱(chēng)和簡(jiǎn)稱(chēng)。可以把它理解成是一個(gè)獨(dú)立的容器，并且這個(gè)容器的里的布局，與這個(gè)容器外的毫不相干。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應(yīng)布局布局 一.BFC是什么 在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。 1.BOX：CSS布局的基本單位 Box是CSS布局的...

    ziwenxie 評(píng)論0 收藏0

  • 關(guān)于BFC的總結(jié)

    摘要：雖然工作這么多年了，但是如果讓我直接解釋一下什么是的時(shí)候，還是感覺(jué)有點(diǎn)不知道怎么準(zhǔn)確的表達(dá)，下面就翻翻文檔，總結(jié)一下，加深一下認(rèn)識(shí)吧。兩個(gè)兄弟盒之間的垂直距離由屬性決定。最常見(jiàn)的有簡(jiǎn)稱(chēng)和簡(jiǎn)稱(chēng)。 雖然工作這么多年了，但是如果讓我直接解釋一下什么是BFC的時(shí)候，還是感覺(jué)有點(diǎn)不知道怎么準(zhǔn)確的表達(dá)，下面就翻翻文檔，總結(jié)一下，加深一下認(rèn)識(shí)吧。大家也可以關(guān)注我的GitHub后續(xù)的更新 1.BFC...

    chadLi 評(píng)論0 收藏0

  • 關(guān)于BFC的總結(jié)

    摘要：雖然工作這么多年了，但是如果讓我直接解釋一下什么是的時(shí)候，還是感覺(jué)有點(diǎn)不知道怎么準(zhǔn)確的表達(dá)，下面就翻翻文檔，總結(jié)一下，加深一下認(rèn)識(shí)吧。兩個(gè)兄弟盒之間的垂直距離由屬性決定。最常見(jiàn)的有簡(jiǎn)稱(chēng)和簡(jiǎn)稱(chēng)。 雖然工作這么多年了，但是如果讓我直接解釋一下什么是BFC的時(shí)候，還是感覺(jué)有點(diǎn)不知道怎么準(zhǔn)確的表達(dá)，下面就翻翻文檔，總結(jié)一下，加深一下認(rèn)識(shí)吧。大家也可以關(guān)注我的GitHub后續(xù)的更新 1.BFC...

    oneasp 評(píng)論0 收藏0

  • 前端進(jìn)階之什么是BFC？BFC的原理是什么？如何創(chuàng)建BFC？

    摘要：官方說(shuō)法就是它規(guī)定了用戶(hù)端在媒介中如何處理文檔樹(shù)。是的包含塊，同時(shí)又是的包含塊，不是絕對(duì)的。因此稱(chēng)為匿名盒子。行內(nèi)盒子行內(nèi)級(jí)元素會(huì)生成行內(nèi)級(jí)盒子，該盒子同時(shí)會(huì)參與行內(nèi)格式化上下文的創(chuàng)建。如果只有一個(gè)值指定為，則其使用的值來(lái)自相等。 作者：陳大魚(yú)頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

    lowett 評(píng)論0 收藏0

  • 塊格式化上下文(Block formatting contexts)

    摘要：浮動(dòng)，絕對(duì)定位元素，非塊盒的塊容器例如，，和和不為的塊盒當(dāng)該值已被傳播到視口時(shí)除外會(huì)為它們的內(nèi)容建立一個(gè)新的塊格式化上下文布局規(guī)則內(nèi)部盒會(huì)在垂直方向一個(gè)接一個(gè)的放置盒的垂直方向的距離由決定屬于同一個(gè)的兩個(gè)相鄰盒子的會(huì)發(fā)生重疊每個(gè)元素的 浮動(dòng)，絕對(duì)定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和overflow不為vis...

    jerry 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<