BFC 塊級格式上下文

2021-09-02 08:23:32 字數 643 閱讀 5094

[url]

[url]

上文已經將的很詳細了,大家可以看看!

這裡提另外乙個相關問題:

[url]我在這篇文章中找到了答案;

問題是:有時候我們調子元素的margin-top,是想和父元素拉開距離,可事實是和父元素沒拉開距離,反而是父元素與上面拉開了距離,感覺子元素的設定在父元素上起作用,為什麼呢?

這是css2.1盒模型中規定的內容——collapsing margins:

in this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗鄰的兩個或更多盒元素的margin將會合併為乙個margin共享之。毗鄰的定義為:同級或者巢狀的盒元素,並且它們之間沒有非空內容、padding或border分隔。

[color=blue]所以這是規定,你想用它(css)就要符合它的規定[/color]

BFC塊級格式上下文

bfc是什麼 bfc block formatting context 塊級格式上下文,是乙個css的布局概念,是頁面視覺化css渲染的一部分,是塊盒子的布局過程發生的區域。bfc的觸發條件 1.浮動元素 元素的float不是none 2.絕對定位元素 元素的position為absolute或fl...

塊級格式化上下文(BFC)

最近遇到乙個專業的名詞,不是很懂,所以了解了一下,並總結歸納一下。首先清楚我們的問題是什麼?bfc是什麼?怎麼建立?什麼情況下建立?有什麼特性和作用?bfc 就是一種屬性,這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1,浮動元素,float 除 none 以外的值 2,絕對定位元素,p...

BFC 塊級格式化上下文

bfc簡述 bfc即 block formatting contexts 塊級格式化上下文 是 w3c css2.1 規範中的乙個渲染規範,是頁面中的一塊渲染區域並且有自己獨有的渲染規則,決定了子元素的渲染位置以及和其他元素之間的關係和相互作用。bfc規則 同一bfc內的塊元素的上邊的邊距重疊 規定...