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

jerry 發(fā)布于2019-08-29 12:30 / 461人閱讀

摘要：浮動(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不為visible的塊盒（當(dāng)該值已被傳播到視口時(shí)除外（except when that value has been propagated to the viewport））會(huì)為它們的內(nèi)容建立一個(gè)新的塊格式化上下文

BFC布局規(guī)則:

BFC內(nèi)部盒會(huì)在垂直方向,一個(gè)接一個(gè)的放置

盒的垂直方向的距離由margin決定.屬于同一個(gè)BFC的兩個(gè)相鄰盒子的margin會(huì)發(fā)生重疊

每個(gè)元素的margin box的左邊,與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化,否則相反).即使存在浮動(dòng)也如此

BFC的區(qū)域不會(huì)與float box重疊(利用這個(gè)特性可以做自適應(yīng)窗口大小)

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器,容器里面的子元素不會(huì)影響到外面的元素.反之也是如此

計(jì)算BFC高度時(shí),浮動(dòng)元素也參與計(jì)算(清除浮動(dòng)的原理)

塊格式化上下文由以下之一創(chuàng)建:

根元素或其它包含它的元素

浮動(dòng)(元素的float不是none)

絕對(duì)定位的元素(元素具有position為absolute或fixed)

行內(nèi)塊 inline-blocks(元素具有display:inline-block)

表格單元格(元素具有display:table-cell,表格單元格默認(rèn)屬性)

表格標(biāo)題(元素具有display:table-caption,表格標(biāo)題默認(rèn)屬性)

塊元素元素具有overflow值不是visible

彈性盒子flex boxes(元素具有display:flex或inline-flex)

display:flow-root

一個(gè)塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容,除了會(huì)創(chuàng)建新的塊格式化上下文的元素

BFC與margin

BFC可以解決margin折疊問(wèn)題,需要注意的是,overflow:hidden等屬性只在父子元素下起作用,相鄰兄弟元素?zé)o效

BFC與float

BFC可以改變float的覆蓋兄弟元素的問(wèn)題,實(shí)現(xiàn)一側(cè)定寬的布局,還可以解決父元素塌陷問(wèn)題

細(xì)說(shuō)CSS中的BFC
學(xué)習(xí)格式化上下文

GPU云服務(wù)器云服務(wù)器 format時(shí)間格式 linux給整塊磁盤格式化 linux格式化整塊硬盤 linux 格式化整塊硬盤

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111941.html

相關(guān)文章

BFC原理詳解

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

ziwenxie 2019-08-29 11:10 評(píng)論0 收藏0
關(guān)于BFC的總結(jié)

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

chadLi 2019-08-29 15:27 評(píng)論0 收藏0
關(guān)于BFC的總結(jié)

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

oneasp 2019-08-02 10:28 評(píng)論0 收藏0
BFC-塊格式化上下文（block formatting context）

摘要：概念塊格式化上下文，是頁(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)部元素...

keithyau 2019-08-29 16:07 評(píng)論0 收藏0
視覺(jué)格式化模型(Visual formatting model)

摘要：塊級(jí)盒參與塊格式化上下文。行內(nèi)級(jí)盒參與行內(nèi)格式化上下文塊格式化上下文行內(nèi)格式化上下文相對(duì)定位浮動(dòng)盒就是一個(gè)在當(dāng)前行向左或向右移動(dòng)的盒。浮動(dòng)絕對(duì)定位絕對(duì)定位模型中，一個(gè)盒會(huì)有相對(duì)于其包含塊的明確偏移，它會(huì)從常規(guī)流中全部移除不會(huì)影響后面的兄弟。在可視化格式模型(Visual formatting model)當(dāng)中,文檔樹(shù)中的每個(gè)元素根據(jù)其盒模型生成0個(gè)或多個(gè)盒.這些盒的布局由(以下因素)...

jokester 2019-08-30 15:53 評(píng)論0 收藏0
前端進(jìn)階之什么是BFC？BFC的原理是什么？如何創(chuàng)建BFC？

摘要：官方說(shuō)法就是它規(guī)定了用戶端在媒介中如何處理文檔樹(shù)。是的包含塊，同時(shí)又是的包含塊，不是絕對(duì)的。因此稱為匿名盒子。行內(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 2019-08-30 15:44 評(píng)論0 收藏0