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

資訊專欄INFORMATION COLUMN

CSS8:到底什么是BFC？

wyk1184 / 2512人閱讀

摘要：兩個(gè)兄弟盒之間的豎直距離由屬性決定。即使存在浮動(dòng)盡管一個(gè)盒的行盒可能會(huì)因?yàn)楦?dòng)收縮，這也成立。它是塊級(jí)盒布局出現(xiàn)的區(qū)域，也是浮動(dòng)層元素進(jìn)行交互的區(qū)域。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。

現(xiàn)在有flex布局等新技術(shù)，bfc的效果比如包住元素，進(jìn)行自適應(yīng)布局等已經(jīng)不需要了。現(xiàn)在只有免式的事后才需要知道BFC！

看不懂的定義 CSS規(guī)范中對(duì) BFC 的描述

9.4.1 塊格式化上下文

浮動(dòng)，絕對(duì)定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和"overflow"不為"visible"的塊盒會(huì)為它們的內(nèi)容建立一個(gè)新的塊格式化上下文

在一個(gè)塊格式化上下文中，盒在豎直方向一個(gè)接一個(gè)地放置，從包含塊的頂部開(kāi)始。兩個(gè)兄弟盒之間的豎直距離由"margin"屬性決定。同一個(gè)塊格式化上下文中的相鄰塊級(jí)盒之間的豎直margin會(huì)合并

在一個(gè)塊格式化上下文中，每個(gè)盒的left外邊（left outer edge）挨著包含塊的left邊（對(duì)于從右向左的格式化，right邊挨著）。即使存在浮動(dòng)（盡管一個(gè)盒的行盒可能會(huì)因?yàn)楦?dòng)收縮），這也成立。除非該盒建立了一個(gè)新的塊格式化上下文（這種情況下，該盒自身可能會(huì)因?yàn)楦?dòng)變窄）

MDN 對(duì) BFC 的描述

一個(gè)塊格式化上下文（block formatting context） 是Web頁(yè)面的可視化CSS渲染出的一部分。它是塊級(jí)盒布局出現(xiàn)的區(qū)域，也是浮動(dòng)層元素進(jìn)行交互的區(qū)域。

一個(gè)塊格式化上下文由以下之一創(chuàng)建：

根元素或其它包含它的元素
浮動(dòng)元素 (元素的 float 不是 none)
絕對(duì)定位元素 (元素具有 position 為 absolute 或 fixed)
內(nèi)聯(lián)塊 (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
具有overflow 且值不是 visible 的塊元素，
display: flow-root
column-span: all 應(yīng)當(dāng)總是會(huì)創(chuàng)建一個(gè)新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個(gè)多列容器中。
一個(gè)塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容，除了被包含于創(chuàng)建新的塊級(jí)格式化上下文的后代元素內(nèi)的元素。

塊格式化上下文對(duì)于定位 (參見(jiàn) float) 與清除浮動(dòng) (參見(jiàn) clear) 很重要。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。浮動(dòng)不會(huì)影響其它塊格式化上下文中元素的布局，并且清除浮動(dòng)只能清除同一塊格式化上下文中在它前面的元素的浮動(dòng)。

張?chǎng)涡駥?duì) BFC 的描述

http://www.zhangxinxu.com/wor...

BFC全稱”Block Formatting Context”, 中文為“塊級(jí)格式化上下文”。啪啦啪啦特性什么的，一言難盡，大家可以自行去查找，我這里不詳述，免得亂了主次，總之，記住這么一句話：BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會(huì)影響外部的元素。所以，避免margin穿透啊，清除浮動(dòng)什么的也好理解了。

看不懂定義！記不住定義！舉例回答B(yǎng)FC

不要試圖記憶他的定義。
應(yīng)該舉例回答：

功能1：爸爸管兒子

用 BFC 可以包住浮動(dòng)元素。(這不是清除浮動(dòng)，.clearfix 才是清除浮動(dòng)）

例如如果兒子浮動(dòng)了，那么爸爸包不住兒子，只有BFC才可以包住兒子。例如設(shè)置爸爸為float：left就包住了兒子。什么才算一個(gè)bfc？定義里bfc寫(xiě)的

浮動(dòng)，絕對(duì)定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和"overflow"不為"visible"的塊盒會(huì)為它們的內(nèi)容建立一個(gè)新的塊格式化上下文

現(xiàn)在有點(diǎn)理解定義了

.baba{
  border: 10px solid red;
  min-height: 10px;
 display: flow-root; /* 只觸發(fā)BFC  */
  /* display: float;*/ /*觸發(fā)BFC */
  /* position: absolute; *//*觸發(fā)BFC */
/*  display: inline-block; 觸發(fā)BFC */
  /*  overflow:auto; 觸發(fā)BFC */
/*  display:table-cell;觸發(fā)BFC */
}
.erzi{
  background: green;
  float:left;
  width: 300px;
  height: 100px;
}
display: flow-root; /* 觸發(fā)BFC  */
  /* display: float;*/ /*觸發(fā)BFC */
  /* position: absolute; *//*觸發(fā)BFC */
  /*  display: inline-block; 觸發(fā)BFC */
  /*  overflow:auto; 觸發(fā)BFC */
  /*  display:table-cell;觸發(fā)BFC */

上面幾個(gè)屬性都會(huì)觸發(fā)BFC

存在一個(gè)問(wèn)題：元素變成BFC之后，還會(huì)出發(fā)其他效果，比如position: absolute;會(huì)絕對(duì)定位。解決問(wèn)題的方法就是使用display: flow-root;，它只有一個(gè)效果，讓當(dāng)前元素變成BFC。沒(méi)有副作用。
http://js.jirengu.com/winozoc...

還有一個(gè)作用，課可以歸功于爸爸管兒子，如果一個(gè)div不是bfc，他其中的子元素的margin-top和margin-bottom會(huì)伸到父div外面。
例子：


爸爸和兒子一樣高，沒(méi)有受到外邊距影響。

變成BFC之后：

外邊距也算了進(jìn)去。

這個(gè)問(wèn)題buyongbfc也可以解決，margin無(wú)法穿透border，只需要加一個(gè)border-top，margin就在.baba內(nèi)部了。
可見(jiàn)沒(méi)有任何情況完全需要BFC。

總結(jié)一下BFC功能1：一旦一個(gè)元素有上面那幾個(gè)屬性，那么他就是一個(gè)BFC，BFC會(huì)把內(nèi)部的元素包起來(lái)，不管內(nèi)部元素是否浮動(dòng)。且內(nèi)部元素的邊距也不會(huì)突破這個(gè)父BFC的范圍。

功能2：兄弟之間劃清界限

既：讓兩個(gè)相鄰的BFC界限分明。
舉個(gè)例子：
兩個(gè)div是是兄弟關(guān)系，把哥哥浮動(dòng)了，那么哥哥會(huì)疊在弟弟上面，會(huì)遮蓋弟弟。這時(shí)候如果把弟弟也變成BFC，那么哥哥和弟弟之間就會(huì)界限分明，誰(shuí)都不會(huì)遮擋誰(shuí)。
例子如下：

http://js.jirengu.com/woduniq...

總結(jié)BFC功能

內(nèi)部元素完全包起來(lái)（float等），外部元素界限分明，不重疊。

面試官問(wèn)的時(shí)候就說(shuō)：

首先一個(gè)BFC可以包住浮動(dòng)元素，不讓他超過(guò)邊界（但這不是清除浮動(dòng)，清除浮動(dòng)用clearfix），即使是子元素的margin也可以包住，不沖出父元素。比如舉一個(gè)代碼的例子，兒子是浮動(dòng)元素，那么只要在爸爸上寫(xiě)overflow：hidden;或者overflow:auto;或者diaplay：flow-root;那么爸爸就會(huì)包住兒子，且margin也會(huì)在爸爸里面）

一個(gè)浮動(dòng)元素會(huì)和另一個(gè)不是浮動(dòng)的元素重疊，浮動(dòng)元素會(huì)浮在兩一個(gè)元素上面，如果把另一個(gè)元素寫(xiě)成bfc，那么這兩個(gè)元素就不會(huì)互相重疊。

記錄一下上下margin合并問(wèn)題 
注釋：只有普通文檔流中  塊框 的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。值為大的邊距。

既：兩個(gè)塊級(jí)元素一般情況下上下邊距會(huì)合并，行內(nèi)元素，浮動(dòng)元素，絕對(duì)定位之后不會(huì)合并。
http://js.jirengu.com/rihoxab...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/114129.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è)常見(jiàn)的面試題，什么是BFC?于是我就去查閱了相關(guān)資料： css規(guī)范中是這樣描述BFC的 9.4.1 塊格式化上下文 浮動(dòng)，絕對(duì)定位元素，...

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

  • CSS: 潛藏著的BFC

    摘要：而就潛藏在其中，當(dāng)你修改樣式時(shí)，一不小心就能觸發(fā)它而毫無(wú)察覺(jué)，因此沒(méi)有意識(shí)到的神奇之處。實(shí)例解決侵占浮動(dòng)元素的問(wèn)題我們知道浮動(dòng)元素會(huì)脫離文檔流，然后浮蓋在文檔流元素上。 在寫(xiě)樣式時(shí)，往往是添加了一個(gè)樣式，又或者是修改了某個(gè)屬性，就達(dá)到了我們的預(yù)期。而B(niǎo)FC就潛藏在其中，當(dāng)你修改樣式時(shí)，一不小心就能觸發(fā)它而毫無(wú)察覺(jué)，因此沒(méi)有意識(shí)到BFC的神奇之處。 一、什么是BFC（Block Form...

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

  • 重新定義BFC

    摘要：大家花秒的時(shí)間組織組織語(yǔ)言，給下個(gè)定義，看看咱們的想法是不是一致的，哈哈。 先給BFC下個(gè)定義 CSS里的BFC可真的是一個(gè)老生長(zhǎng)談的問(wèn)題，網(wǎng)上的資料很多，介紹的也很詳細(xì)，但是看完之后，還是不知道BFC到底是個(gè)啥東西，似懂非懂，它到底是個(gè)標(biāo)準(zhǔn)呢，還是一套約定俗成的編碼規(guī)范呢，A和B兩個(gè)DIV，BFC化到底指的是A還是指的是B呢。大家花5秒的時(shí)間組織組織語(yǔ)言，給BFC下個(gè)定義，看看咱們的...

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

  • CSS：BFC 最熟悉的陌生人

    摘要：就是神奇之一，它也是最熟悉的陌生人，因?yàn)槟阋徊恍⌒木蜁?huì)觸發(fā)它然而你并沒(méi)有意識(shí)到它正在神奇地發(fā)揮作用。最常見(jiàn)的有和，中還增加了和，這里就不深入研究了。其根本原理就是它們處于同一個(gè)，符合屬于同一個(gè)的兩個(gè)相鄰元素的會(huì)發(fā)生重疊的規(guī)則。 BFC，你也許聽(tīng)過(guò)這個(gè)詞，但是你可能不是很有底氣地解釋清楚。寫(xiě)樣式的時(shí)候，往往加了一個(gè)樣式或者改了一個(gè)屬性，就能達(dá)到你期望的效果，一切都是如此地神奇。BFC就是...

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

  • CSS魔法堂：你一定誤解過(guò)的Normal flow

    摘要：后來(lái)終于知道是某位大神將翻譯為文檔流而已。。。。。。另外單純?cè)O(shè)置效果與采用是一樣的魔法堂就這個(gè)樣，而浮動(dòng)定位也是基于。相對(duì)定位的最強(qiáng)武器就是個(gè)屬性了，好明顯它們默認(rèn)值均是。 前言 ?剛接觸CSS時(shí)經(jīng)常聽(tīng)到看到一個(gè)詞文檔流，那到底什么是文檔流呢？然后會(huì)看到絕對(duì)定位和浮動(dòng)定位能脫離文檔流，從這句可以看到文檔流和絕對(duì)定位、浮動(dòng)定位是同一個(gè)范疇的概念，再后來(lái)在W3C標(biāo)準(zhǔn)文檔找到關(guān)于Absolu...

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

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

0條評(píng)論

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