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

資訊專欄INFORMATION COLUMN

前端人人都應(yīng)該理解的盒模型BFC渲染機(jī)制

testHs / 725人閱讀

摘要：如圖所示如果你眼力不錯或者親自試試會發(fā)現(xiàn)個之間設(shè)置了的距離但是他們現(xiàn)在實(shí)際的間距卻是。如何設(shè)置盒模型的類型通過的就可以設(shè)置為盒模型了默認(rèn)是盒模型渲染機(jī)制基本慨念是英文縮寫翻譯為塊級格式化上下文。說白了就是一種盒模型的渲染規(guī)則。

前端人人都要懂的盒模型BFC渲染機(jī)制 為什么我們說,前端工程師有必要需要了解BFC渲染機(jī)制?

因為如果你一個前端壓根沒聽說過BFC,那你是如何理解下面這幾個css現(xiàn)象的呢?

現(xiàn)象一:  垂直方向上元素margin的合并現(xiàn)象

首先,有父子嵌套關(guān)系的2個元素,代碼和示例如下:

    
    

  ---- html部分---

然后,我們給子元素添加一個margin-top: 50px時

      .son {
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 50px;
        }

我們神奇的發(fā)現(xiàn)父子元素同時"掉下來了50px",如圖所示

所以這里的問題是: 為什么2個div一起向下掉呢?

現(xiàn)象二: 垂直方向上元素margin的合并現(xiàn)象

現(xiàn)在,我們有2個兄弟關(guān)系的元素,代碼和示例如下:

    
    
     ---- html部分---

然后,我們給上邊的元素添加 margin-bottom:50px , 下邊的元素添加 margin-top : 50px。

        .bother1 {
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-bottom: 60px;
        }
        .bother2 {
            width: 100px;
            height: 100px;
            background: cadetblue;
            margin-top: 40px;
        }

如圖所示:

如果你眼力不錯,或者親自試試,會發(fā)現(xiàn)2個div之間設(shè)置了100px的距離,但是他們現(xiàn)在實(shí)際的間距卻是50px。

所以這里的問題是: 為什么2個div的間距是50px,而非100px呢?

現(xiàn)象三: overflow:hidden,可以清除浮動造成的副作用

一對父子關(guān)系的div,父元素的高度是通過子元素的高度撐開的,如圖

    
    
     ---- html部分---

然后,我們給子元素float:left之后,子元素脫離的文檔流,于是父元素的高度為0了,如圖

     .son {
            width: 100px;
            height: 100px;
            background: skyblue;
            float : left;
        }

這個現(xiàn)象,我相信大家都知道如何解決,不就是需要"清除浮動"嗎?

我這里想說的是,"清楚浮動"有2種原理,一類是clear: both,一類就是依靠BFC原理.

所以這里的問題是: 為什么給父元素添加 overflow: hidden 就可以"清除浮動"呢?

現(xiàn)象四: overflow:hidden 配合浮動,可以實(shí)現(xiàn)2欄自適應(yīng)布局

如圖所示,我們已經(jīng)實(shí)現(xiàn)了左側(cè)固定300px,右側(cè)自適應(yīng)的布局

所以這里的問題是: 為什么添加 overflow: hidden 和 浮動就可以實(shí)現(xiàn)2欄自適應(yīng)布局呢?

    
    
     ---- html部分---
    
    

        
left

        
right

好了,以上四個看似毫無關(guān)系的"奇葩"現(xiàn)象,不知道是否理解出現(xiàn)這些現(xiàn)象的原因呢?

如果回答不上來,那就建議你好好看下這篇文章了。

當(dāng)然如果你沒有見過這些現(xiàn)象的,那你就賺到了,這么多"奇葩"問題,你看一篇文章就全解決了,省了你不少力氣呢!

CSS盒模型

CSS盒模型的基本概念: 盒模型分為W3C盒模型和IE盒模型,他們的區(qū)別是計算width和height的方式不同,IE盒模型的width是從border開始計算的。

如何設(shè)置CSS盒模型的類型 : 通過CSS3的 box-sizing:border-box就可以設(shè)置為IE盒模型了,默認(rèn)是W3C盒模型

BFC渲染機(jī)制 BFC基本慨念

BFC是英文縮寫,翻譯為"塊級格式化上下文"。

說白了BFC就是一種css盒模型的渲染規(guī)則。既然說了是渲染規(guī)則,那你自然需要去記住這些規(guī)則了,沒法解釋為什么。

BFC渲染規(guī)則

BFC其實(shí)有很多渲染規(guī)則,我們這里說4條比較重要的規(guī)則,知道這些規(guī)則,你就可以回答上面的4個現(xiàn)象了。

規(guī)則1: 創(chuàng)建了BFC的元素中,在垂直方向上的margin會發(fā)生重疊。根元素就是一個BFC元素 (這個可以解釋margin重疊)

規(guī)則2: BFC元素在頁面上是一個獨(dú)立的容器,外面的元素和里面的元素互不影響。

規(guī)則3: BFC元素不會和浮動的元素重疊。(這個可以解釋兩欄自適應(yīng))

規(guī)則4: 計算BFC元素的高度時,里面浮動元素的高度也會參與計算 (用來解釋overflow:hidden可以清除浮動)

普通元素如何創(chuàng)建BFC

首先我們根元素html,就是最大的BFC容器。

創(chuàng)建BFC的方式很多,常見包括:

float不為none的都可以

overflow: hidden / auto

position: 不為static 、 relative都可以

display: table-cell ... 表格相關(guān)的

不過我覺得用到最多的還是

overflow : hidden

畢竟其他的position float display都是很容易影響頁面布局的,我們一般也不想為了創(chuàng)建BFC區(qū)域就引發(fā)頁面布局的變動吧。

補(bǔ)充

不知道各位看了BFC的渲染規(guī)則和創(chuàng)建方式后,是否能夠自行去解釋前面的4個現(xiàn)象了呢?

補(bǔ)充2點(diǎn):

關(guān)于margin的重疊規(guī)則。在現(xiàn)象二中,他們的重疊規(guī)則是,margin-bottom和margin-top會重疊,重疊之后取較大的margin值

關(guān)于"清除浮動"的說法。實(shí)際上"清除浮動"的說法不太準(zhǔn)確,因為清除浮動,你直接刪掉float:left就行了。更準(zhǔn)確的說是"閉合浮動",或者說清除浮動帶來的副作用。

最后，如果有什么疑問，歡迎留言討論，
如果覺得真的對您對BFC的理解有幫助的話請點(diǎn)贊示意！謝謝。

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

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

相關(guān)文章

  • 一篇文章帶拿下盒模型BFC渲染機(jī)制

    摘要：它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。一個的范圍包含創(chuàng)建該上下文元素的所有子元素，但不包括創(chuàng)建了新的子元素的內(nèi)部元素。 走在前端的大道上 本篇將自己讀過的相關(guān) 盒模型BFC 文章中，對自己有啟發(fā)的章節(jié)片段總結(jié)在這（會對原文進(jìn)行刪改）,會不斷豐富提煉總結(jié)更新。 一.常見定位方案 在講 BFC 之前，我們先來了解一下常見的...

    DangoSky 評論0 收藏0

  • 【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

    摘要：提供了糟糕的支持，而雖然接近標(biāo)準(zhǔn)，但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管修復(fù)了許多的問題，但是依然延續(xù)實(shí)現(xiàn)中的其它故障主要是盒模型問題。因此大部分的聲明將觸發(fā)嚴(yán)格模式即依據(jù)標(biāo)準(zhǔn)的規(guī)則渲染網(wǎng)頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點(diǎn) 主要參考自第一篇文章，然而筆者在讀的時...

    binta 評論0 收藏0

  • 深入理解盒模型與BFC

    摘要：標(biāo)準(zhǔn)盒模型與盒模型開發(fā)者們都知道，由于歷史遺留問題與既定標(biāo)準(zhǔn)的發(fā)展，存在著兩個盒模型。即的標(biāo)準(zhǔn)盒模型以及的怪異盒模型。在中，可以用去定義元素的盒模型。比較這兩個盒模型的差異之前，我們先來看一張圖先不討論寬高，我們把一個元素的組成分為。 標(biāo)準(zhǔn)盒模型與IE盒模型 開發(fā)者們都知道，由于歷史遺留問題與既定標(biāo)準(zhǔn)的發(fā)展，存在著兩個css盒模型。即W3C的標(biāo)準(zhǔn)盒模型以及IE的怪異盒模型。在css中，...

    gself 評論0 收藏0

  • CSS中各種布局的背后(*FC)

    摘要：中各種布局的背后，實(shí)質(zhì)上是各種的組合。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內(nèi)格式化上下文產(chǎn)生的盒，用于表示一行。彈性容器外和彈性項目內(nèi)的一切元素都不受影響。 CSS中各種布局的背后，實(shí)質(zhì)上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...

    miracledan 評論0 收藏0

發(fā)表評論

0條評論

testHs

男|高級講師

TA的文章

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