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

資訊專欄INFORMATION COLUMN

BFC--margin折疊和清除浮動

zhangfaliang / 605人閱讀

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

背景

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

BFC
1. 定義

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

2. 創(chuàng)建BFC

根元素

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

float的值不為none

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

overflow的值不為visible

margin折疊

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

    
    
    
      
      
      JS Bin

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

    
    
    
      
      
      JS Bin

BFC清除浮動

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

    
    
    
      
      
      JS Bin

結(jié)束

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

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

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

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

相關(guān)文章

  • BFC到底是啥？

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

    jeffrey_up 評論0 收藏0

  • css浮動、BFC、定位問題

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

    Tony 評論0 收藏0

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

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

    Ryan_Li 評論0 收藏0

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

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

    layman 評論0 收藏0

  • 細說 CSS margin

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

    tianren124 評論0 收藏0

發(fā)表評論

0條評論

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