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

資訊專欄INFORMATION COLUMN

CSS里的BFC和IFC的用法

ityouknow / 3651人閱讀

摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時(shí)，子元素會(huì)換到下一行顯示，并且會(huì)產(chǎn)生新的行框。

一、BFC

Block Formatting Contexts (BFC，塊級(jí)格式化上下文)，就是 一個(gè)塊級(jí)元素 的渲染顯示規(guī)則。

  （可以把 BFC 理解為一個(gè)封閉的大箱子，容器里面的子元素不會(huì)影響到外面的元素）。

1、BFC的布局規(guī)則例如以下：

①.內(nèi)部的盒子會(huì)在垂直方向，一個(gè)個(gè)地放置。

②.盒子垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的上下margin會(huì)發(fā)生重疊。

③.每一個(gè)元素的左邊，與包括的盒子的左邊相接觸，即使存在浮動(dòng)也是如此。

④.BFC的區(qū)域不會(huì)與float重疊。

⑤.BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

⑥.計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

2、介紹過了BFC的布局規(guī)范，再來(lái)說說哪些元素會(huì)觸發(fā)BFC。

只要元素滿足下面任一條件即可觸發(fā) BFC 特性

①.根元素。

②.float的屬性不為none。

③.position為absolute或fixed。

④.display為inline-block；table-cell；table-caption；flex。

⑤.overflow不為visible。

3、接下來(lái)說說BFC的作用和原理

①、解決margin重疊問題

②、解決浮動(dòng)高度塌陷問題

③、解決侵占浮動(dòng)元素的問題

首先看看自適應(yīng)兩欄布局
我們先定義兩個(gè)div：

4、然后定義css：

div {
width:300px;
}

.aside {
width: 100px;
height: 150px;
float: left;
background: black;
}

.main {
height:200px;
background-color:red;
}

效果圖例如以下：

這正滿足了規(guī)范的第三條：

每一個(gè)元素的左邊，與包括的盒子的左邊相接觸。即使存在浮動(dòng)也是如此。

所以假設(shè)我們須要將黑色區(qū)域撐到紅色的左邊。就須要利用規(guī)范的第四條：
BFC的區(qū)域不會(huì)與float重疊。

也就是說我們須要?jiǎng)?chuàng)造BFC區(qū)域。我們通過將紅色區(qū)域的overflow設(shè)為hidden來(lái)觸發(fā)BFC：

.main {
overflow:hidden;
height:200px;
background-color:red;
}

效果例如以下：

5、接下來(lái)看看清除內(nèi)部浮動(dòng)

 **首先是父div套子div**



6、然后是css：

.child {
border:1px solid red;
width:100px;
height:100px;
float:left;
}

.parent {
border:1px solid black;
width:300px;
}

效果例如以下：

能夠看到，父div壓根就沒有被撐開。
我們?cè)倩叵胍幌翨FC規(guī)范中的第六條：
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

所以我們須要將父div觸發(fā)為BFC，也就是將其overflow設(shè)為hidden：

.parent {
border:1px solid black;
width:300px;
overflow:hidden;
}

效果例如以下：

能夠看到父div已經(jīng)撐開了。

7、再談?wù)刴argin重疊問題。

先定義兩個(gè)垂直的div：

然后定義margin:

.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}

能夠看到margin重疊后的效果：

我們?cè)倏纯碆FC規(guī)范的第二條：

盒子垂直方向的距離由margin決定，屬于用一個(gè)BFC的兩個(gè)相鄰Box的上下margin會(huì)發(fā)生重疊。

說明兩者屬于同一個(gè)BFC，所以我們須要兩個(gè)div不屬于同一個(gè)BFC。

為第二個(gè)div套一個(gè)父親div。然后講其overflow設(shè)為hidden來(lái)激活一個(gè)BFC就能夠使margin不再重疊。

.wrap {
overflow:hidden;
}

效果例如以下：

二、IFC

IFC(Inline Formatting Contexts)
直譯為”內(nèi)聯(lián)格式化上下文”，IFC的line box（線框）高度由其包含行內(nèi)元素中最高的實(shí)際高度計(jì)算而來(lái)（不受到豎直方向的padding/margin影響)

水平居中：當(dāng)一個(gè)塊要在環(huán)境中水平居中時(shí)，設(shè)置其為inline-block則會(huì)在外層產(chǎn)生IFC，通過text-align則可以使其水平居中。

垂直居中：創(chuàng)建一個(gè)IFC，用其中一個(gè)元素?fù)伍_父元素的高度，然后設(shè)置其vertical-align:middle，其他行內(nèi)元素則可以在此父元素下垂直居中。

BFC的布局規(guī)則例如以下：

1.ifc中的元素會(huì)在一行中從左到右排列。

2.在一行上的所有元素會(huì)在該區(qū)域形成一個(gè)行框。

3.行寬的高度為包含框的高度，高度為行框中最高元素的高度。

4.浮動(dòng)的元素不會(huì)在行框中，并且浮動(dòng)元素會(huì)壓縮行框的寬度。

5.行框的寬度容納不下子元素時(shí)，子元素會(huì)換到下一行顯示，并且會(huì)產(chǎn)生新的行框。

6.行框的元素內(nèi)遵循text-align和vertical-align。

如果大家覺得我的文章寫的還不錯(cuò)的話，就關(guān)注 收藏一下哦！

還可以加我微信一起探討下前端問題。

vx：rgz987

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

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

相關(guān)文章

  • CSS里的BFC和IFC的用法

    摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時(shí)，子元素會(huì)換到下一行顯示，并且會(huì)產(chǎn)生新的行框。 一、BFC Block Formatting Contexts (BFC，塊級(jí)格式化上下文)，就是 一個(gè)塊級(jí)元素 的渲染顯示規(guī)則。 （可以把 BFC 理解為一個(gè)封閉的大箱子，容器里面的子元素不會(huì)影響到外面的元素）。 1、BFC的布局規(guī)則例如以下： ①.內(nèi)...

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

  • BFC與IFC

    摘要：屬于同一個(gè)的兩個(gè)相鄰的會(huì)發(fā)生重疊。的區(qū)域不會(huì)與重疊。計(jì)算的高度時(shí)，浮動(dòng)元素也參與計(jì)算。給添加，觸發(fā)新的，則行內(nèi)級(jí)格式化上下文如何生成由的非替換元素生成。元素會(huì)位于與與之間，使得寬度縮短。 block-level box: display屬性為block, list-item, table的元素，會(huì)生成block-level box。并且參與block fomatting context...

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

  • CSS——可視化格式模型

    摘要：控制框塊級(jí)元素和塊框以及行內(nèi)元素和行框相關(guān)的概念。規(guī)則在行內(nèi)格式化上下文中，框一個(gè)接一個(gè)地水平排列，起點(diǎn)是包含塊的頂部。 CSS的可視化格式模型 CSS中規(guī)定每一個(gè)元素都有自己的盒子模型（相當(dāng)一規(guī)定了這個(gè)元素如何顯示）； 然后可視化格式模型則是把這些盒子模型按照規(guī)則擺放到頁(yè)面上，也就是如何布局； 換句話說，盒子模型規(guī)定了怎么在頁(yè)面上擺放盒子，盒子的相互作用等等； CSS的可視化格式模...

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

  • CSS——可視化格式模型

    摘要：控制框塊級(jí)元素和塊框以及行內(nèi)元素和行框相關(guān)的概念。規(guī)則在行內(nèi)格式化上下文中，框一個(gè)接一個(gè)地水平排列，起點(diǎn)是包含塊的頂部。 CSS的可視化格式模型 CSS中規(guī)定每一個(gè)元素都有自己的盒子模型（相當(dāng)一規(guī)定了這個(gè)元素如何顯示）； 然后可視化格式模型則是把這些盒子模型按照規(guī)則擺放到頁(yè)面上，也就是如何布局； 換句話說，盒子模型規(guī)定了怎么在頁(yè)面上擺放盒子，盒子的相互作用等等； CSS的可視化格式模...

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

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

0條評(píng)論

ityouknow

男|高級(jí)講師

TA的文章

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