成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

testHs / 775人閱讀

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

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

因?yàn)槿绻阋粋€(gè)前端壓根沒(méi)聽(tīng)說(shuō)過(guò)BFC,那你是如何理解下面這幾個(gè)css現(xiàn)象的呢?

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

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

    
    

  ---- html部分---

然后,我們給子元素添加一個(gè)margin-top: 50px時(shí)

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

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

所以這里的問(wèn)題是: 為什么2個(gè)div一起向下掉呢?

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

現(xiàn)在,我們有2個(gè)兄弟關(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;
        }

如圖所示:

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

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

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

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

    
    
     ---- html部分---

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

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

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

我這里想說(shuō)的是,"清楚浮動(dòng)"有2種原理,一類(lèi)是clear: both,一類(lèi)就是依靠BFC原理.

所以這里的問(wèn)題是: 為什么給父元素添加 overflow: hidden 就可以"清除浮動(dòng)"呢?

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

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

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

    
    
     ---- html部分---
    
    

        
left

        
right

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

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

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

CSS盒模型

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

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

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

BFC是英文縮寫(xiě),翻譯為"塊級(jí)格式化上下文"。

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

BFC渲染規(guī)則

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

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

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

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

規(guī)則4: 計(jì)算BFC元素的高度時(shí),里面浮動(dòng)元素的高度也會(huì)參與計(jì)算 (用來(lái)解釋overflow:hidden可以清除浮動(dòng))

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

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

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

float不為none的都可以

overflow: hidden / auto

position: 不為static 、 relative都可以

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

不過(guò)我覺(jué)得用到最多的還是

overflow : hidden

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

補(bǔ)充

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

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

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

關(guān)于"清除浮動(dòng)"的說(shuō)法。實(shí)際上"清除浮動(dòng)"的說(shuō)法不太準(zhǔn)確,因?yàn)榍宄?dòng),你直接刪掉float:left就行了。更準(zhǔn)確的說(shuō)是"閉合浮動(dòng)",或者說(shuō)清除浮動(dòng)帶來(lái)的副作用。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/115598.html

相關(guān)文章

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

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

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

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

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

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

  • 深入理解盒模型與BFC

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

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

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<