成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

BFC--margin折疊和清除浮動(dòng)

zhangfaliang / 614人閱讀

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

背景

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

BFC
1. 定義

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

2. 創(chuàng)建BFC

根元素

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

float的值不為none

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

overflow的值不為visible

margin折疊

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

    
    
    
      
      
      JS Bin

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

    
    
    
      
      
      JS Bin

BFC清除浮動(dòng)

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

    
    
    
      
      
      JS Bin

結(jié)束

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

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

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

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

相關(guān)文章

  • BFC到底是啥？

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

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

  • css浮動(dòng)、BFC、定位問題

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

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

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

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

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

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

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

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

  • 細(xì)說 CSS margin

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

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<