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

資訊專欄INFORMATION COLUMN

CSS里的BFC和IFC的用法

ityouknow / 3643人閱讀

摘要:行寬的高度為包含框的高度,高度為行框中最高元素的高度。行框的寬度容納不下子元素時,子元素會換到下一行顯示,并且會產生新的行框。

一、BFC

Block Formatting Contexts (BFC,塊級格式化上下文),就是 一個塊級元素 的渲染顯示規則。

  (可以把 BFC 理解為一個封閉的大箱子,容器里面的子元素不會影響到外面的元素)。

1、BFC的布局規則例如以下:

①.內部的盒子會在垂直方向,一個個地放置。

②.盒子垂直方向的距離由margin決定,屬于同一個BFC的兩個相鄰Box的上下margin會發生重疊。

③.每一個元素的左邊,與包括的盒子的左邊相接觸,即使存在浮動也是如此。

④.BFC的區域不會與float重疊。

⑤.BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。反之也如此。

⑥.計算BFC的高度時,浮動元素也參與計算。

2、介紹過了BFC的布局規范,再來說說哪些元素會觸發BFC。

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

①.根元素。

②.float的屬性不為none。

③.position為absolute或fixed。

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

⑤.overflow不為visible。

3、接下來說說BFC的作用和原理

①、解決margin重疊問題

②、解決浮動高度塌陷問題

③、解決侵占浮動元素的問題

首先看看自適應兩欄布局
我們先定義兩個div:

4、然后定義css:

div {
width:300px;
}

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

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

效果圖例如以下:

這正滿足了規范的第三條:

每一個元素的左邊,與包括的盒子的左邊相接觸。即使存在浮動也是如此。

所以假設我們須要將黑色區域撐到紅色的左邊。就須要利用規范的第四條:
BFC的區域不會與float重疊。

也就是說我們須要創造BFC區域。我們通過將紅色區域的overflow設為hidden來觸發BFC:

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

效果例如以下:

5、接下來看看清除內部浮動

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



6、然后是css:

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

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

效果例如以下:

能夠看到,父div壓根就沒有被撐開。
我們再回想一下BFC規范中的第六條:
計算BFC的高度時,浮動元素也參與計算。

所以我們須要將父div觸發為BFC,也就是將其overflow設為hidden:

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

效果例如以下:

能夠看到父div已經撐開了。

7、再談談margin重疊問題。

先定義兩個垂直的div:

然后定義margin:

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

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

我們再看看BFC規范的第二條:

盒子垂直方向的距離由margin決定,屬于用一個BFC的兩個相鄰Box的上下margin會發生重疊。

說明兩者屬于同一個BFC,所以我們須要兩個div不屬于同一個BFC。

為第二個div套一個父親div。然后講其overflow設為hidden來激活一個BFC就能夠使margin不再重疊。

.wrap {
overflow:hidden;
}

效果例如以下:

二、IFC

IFC(Inline Formatting Contexts)
直譯為”內聯格式化上下文”,IFC的line box(線框)高度由其包含行內元素中最高的實際高度計算而來(不受到豎直方向的padding/margin影響)

水平居中:當一個塊要在環境中水平居中時,設置其為inline-block則會在外層產生IFC,通過text-align則可以使其水平居中。

垂直居中:創建一個IFC,用其中一個元素撐開父元素的高度,然后設置其vertical-align:middle,其他行內元素則可以在此父元素下垂直居中。

BFC的布局規則例如以下:

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

2.在一行上的所有元素會在該區域形成一個行框。

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

4.浮動的元素不會在行框中,并且浮動元素會壓縮行框的寬度。

5.行框的寬度容納不下子元素時,子元素會換到下一行顯示,并且會產生新的行框。

6.行框的元素內遵循text-align和vertical-align。

如果大家覺得我的文章寫的還不錯的話,就關注 收藏一下哦!

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

vx:rgz987

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/55031.html

相關文章

  • CSSBFCIFC用法

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

    BaronZhang 評論0 收藏0
  • BFCIFC

    摘要:屬于同一個的兩個相鄰的會發生重疊。的區域不會與重疊。計算的高度時,浮動元素也參與計算。給添加,觸發新的,則行內級格式化上下文如何生成由的非替換元素生成。元素會位于與與之間,使得寬度縮短。 block-level box: display屬性為block, list-item, table的元素,會生成block-level box。并且參與block fomatting context...

    BlackFlagBin 評論0 收藏0
  • CSS——可視化格式模型

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

    nodejh 評論0 收藏0
  • CSS——可視化格式模型

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

    Lin_YT 評論0 收藏0

發表評論

0條評論

ityouknow

|高級講師

TA的文章

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