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

資訊專欄INFORMATION COLUMN

BFC--margin折疊和清除浮動

zhangfaliang / 617人閱讀

摘要：背景以前在寫和的時候，兩個都設置了不同的上下值。它是決定塊盒子的布局及浮動元素相互影響的一個因素。創建根元素絕對定位元素為或的值不為的值為的值不為折疊屬于同一個的兩個相鄰的會發生折那如何阻止折疊呢，只要將其中一個創建新的就行了。

背景

以前在寫html和css的時候，兩個div都設置了margin不同的上下值。寫完后我開心的打開頁面，為毛兩個應該隔的比較開的div，距離并不是我設置的margin值。于是我從marigin重合搜索到了BFC,于是我blahblah地看了一通，卻沒有看的很懂，一知半解的我煩躁的放棄了。
最近突然想深入的了解下css，在看了幾篇文章后，里面涉及到了我以前的問題，并從css標準和原理上講解了，配合上例子，有了種豁然開朗的感覺：原來margin會折疊是這個原因！所以想把這種感覺記錄下來，也是一份對這部分知道的總結和鞏固。

BFC
1. 定義

塊級格式化上下文（block formatting context） 是頁面 CSS 視覺渲染(visual CSS rendering)這個過程中的一個概念。它是決定塊盒子的布局及浮動元素相互影響的一個因素。

2. 創建BFC

根元素

絕對定位元素 (position 為 absolute 或 fixed)

float的值不為none

display的值為:inline-block, table-cell, table-captions, flex

overflow的值不為visible

margin折疊

屬于同一個BFC的兩個相鄰Box的margin會發生折

    
    
    
      
      
      JS Bin

那如何阻止margin折疊呢，只要將其中一個box創建新的BFC就行了。(可以嘗試不同創建BFC的方法嘗試，代碼注釋了)

    
    
    
      
      
      JS Bin

BFC清除浮動

在計算BFC元素高度時，浮動元素的高度也會計算進去，所以可以達到清除浮動的效果(可以將下例嘗試不同創建BFC的方法來清除浮動)

    
    
    
      
      
      JS Bin

結束

第一次寫這類總結，如果有什么不對的，希望大家和諧交流。
BFC還有一些其他的布局規則，我只寫出了我以前疑惑的點，也感謝我參考的幾篇文章，下面是鏈接，大家有興趣可以深入研究下。

You Don"t Know CSS
BFC神奇背后的原理
詳說BFC

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

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

相關文章

  • BFC到底是啥？

    摘要：兩個兄弟盒之間的豎直距離由屬性決定。即使存在浮動盡管一個盒的行盒可能會因為浮動收縮，這也成立。它是塊級盒布局出現的區域，也是浮動層元素進行交互的區域。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。 前言 在面試中，我們經常會遇到一個常見的面試題，什么是BFC?于是我就去查閱了相關資料： css規范中是這樣描述BFC的 9.4.1 塊格式化上下文 浮動，絕對定位元素，...

    jeffrey_up 評論0 收藏0

  • css浮動、BFC、定位問題

    摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。產生折疊的必備條件必須是鄰接的而根據規范，兩個是鄰接的必須滿足以下條件必須是處于常規文檔流非和絕對定位的塊級盒子并且處于同一個當中。 1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響? 何謂浮動元素？有什么特征？所謂浮動元素，即是設置了浮動屬性的元素。其特征為： 1.浮動的框可以向左或者向右移動，直到它的外...

    Tony 評論0 收藏0

  • 前端面試題-BFC(塊格式化上下文)

    摘要：一的概念規范解釋塊格式化上下文，是頁面的可視化渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。我們可以使用實現清除浮動，這里就不多介紹了，想要了解的可以閱讀前端面試題清除浮動。 一、BFC 的概念 1.規范解釋 塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的...

    Ryan_Li 評論0 收藏0

  • 前端面試題-BFC(塊格式化上下文)

    摘要：一的概念規范解釋塊格式化上下文，是頁面的可視化渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。我們可以使用實現清除浮動，這里就不多介紹了，想要了解的可以閱讀前端面試題清除浮動。 一、BFC 的概念 1.規范解釋 塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的...

    layman 評論0 收藏0

  • 細說 CSS margin

    摘要：給父元素設置了一個灰色背景，并且沒有設置高度，因此高度會隨著內容而擴展，設置為。這個元素的位置如下圖所示因為元素清除了左浮動，所以元素下移。由于這條規則的存在，導致他們折疊后的不能跟的進行折疊，因此的高度被撐開。 作者：https://coding.net/u/zhengkenghong原文：https://blog.coding.net/blog/css-margin 本文著重描述關...

    tianren124 評論0 收藏0

發表評論

0條評論

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