今天將學(xué)習(xí)整理一些CSS中的重要概念，對這些重要概念的掌握竖般，將對CSS的認(rèn)識十分重要。
了解這些概念對深入理解CSS的本質(zhì)十分重要：
（1）包含塊containing block?
（2）BFC和IFC?
（3）層疊上下文
如果要真正地掌握CSS茶鹃，一定要對此認(rèn)真研讀涣雕、一定認(rèn)真研讀艰亮、一點認(rèn)真研讀（重要的事情說三遍）。
1:包含塊
? ? ? ?我們都知道挣郭，如果有兩個div迄埃，一個是父元素，另外一個是子元素兑障，父元素會決定子元素的大小和定位侄非。包含塊是什么呢？簡單來說流译，就是可以決定一個元素大小和定位的元素逞怨。包含塊是視覺格式化模型中的一個重要概念，它與CSS盒子模型類似福澡。包含塊也可以理解為一個矩形盒子叠赦、這個矩形的作用是為這個矩形內(nèi)部的后代元素（子元素、孫元素等）提供一個參考革砸。一個元素的大小和定位往往是由該元素所在的包含塊決定的除秀。
? ? ? ?通常情況下，一個元素的包含塊由離它最近的“塊級祖先元素”的“內(nèi)容邊界”決定的算利。但當(dāng)元素被設(shè)置為絕對定位時册踩，此時該元素的包含塊是由離它最近的“position:relative”或"position:absolute"的祖先元素決定。一個元素生成的盒子會扮演該元素的內(nèi)部元素包含塊的角色效拭。也就是說暂吉，一個元素的CSS盒子為它的內(nèi)部元素建造了包含塊。
? ? ? ****包含塊的判定以及包含塊的范圍
? ? ? ? ?一個元素會為它的內(nèi)部元素創(chuàng)建包含塊允耿，內(nèi)部元素的大小以及定位都跟它的包含塊有關(guān)借笙。那么是不是說一個元素的包含塊就是它的父元素呢？答案是否定的较锡。
? ? ? ? （1）根元素
? ? ? ? ? ? ? ? ?根元素（HTML）元素业稼，是一個頁面中最頂端的元素，它沒有父元素蚂蕴。根元素存在的包含塊低散，被稱為“初始包含塊”。
? ? ? ? （2）固定定位元素
? ? ? ? ? ? ? ? ?如果元素的position屬性為fixed骡楼，那么它的包含塊是當(dāng)前可視窗口熔号，也就是當(dāng)前瀏覽器窗口。
? ? ? ? （3）靜態(tài)定位元素和相對定位元素
? ? ? ? ? ? ? ? ?如果元素的position屬性為static或relative鸟整，那么它的包含塊是它最近的塊級祖先元素創(chuàng)建的引镊。祖先元素必須是block、inline_block或者table-cell類型。
? ? ? ? ?（4）絕對定位元素
? ? ? ? ? ? ? ? ?如果元素的position屬性為absolute弟头，那么它的包含塊是由最近的position屬性不為static的祖先元素吩抓。這里的祖先元素可以是塊元素，也可以是行內(nèi)元素赴恨。因此疹娶，我們可知，絕對定位元素是根據(jù)其包含塊來定位的伦连，這個包含塊是離它最近的position屬性不為static的祖先元素雨饺。如果絕對定位元素找不到position屬性不為static的祖先元素，則它的包含塊是根元素（html元素）惑淳。
? ? ? ? ? ? ? ? 對于包含塊的范圍额港，也分為兩種情況考慮。
? ? ? ? ? ? ? ? （1）如果祖先元素是塊元素汛聚，則包含塊的范圍為祖先元素的padding edge形成锹安。
? ? ? ? ? ? ? ? （2）如果祖先是行內(nèi)元素，則包含塊取決于祖先元素的direction屬性倚舀。
2：層疊上下文
? ? ? ? ?理解層疊上下文叹哭，不僅可以幫助我們深入理解z-index對元素堆疊順序的控制，而且對于我們深入理解浮動和定位也是非常重要的痕貌。
? ? ? ? ?（1）層疊上下文 ?
? ? ? ? ? ? ? ? ? 層疊上下文风罩，是HTMl中的一個三維的概念，我們知道舵稠，網(wǎng)頁是三維結(jié)構(gòu)的超升，它有X,Y,Z軸，Z軸往往都用來設(shè)定層的先后順序的。層疊上下文跟塊級格式上下文（BFC）相似，是可以創(chuàng)建出來的褥傍，也就是說润樱，你可以在CSS中添加一定的屬性來將某個元素創(chuàng)建一個層疊上下文出來赋除。
? ? ? ? ? ? ? ? ?如果一個元素具備以下任何一個條件，則該元素會創(chuàng)建一個新的層疊上下文。
? ? ? ? ? ? ? ? ? ? ? ?（1）根元素 ?（2）z-index不為auto的定位元素
? ? ? ? ?（2）層疊級別
? ? ? ? ? ? ? ?層疊級別是針對同一個層疊上下文而言的。層疊級別與層疊上下文巢钓，是兩個不同的概念。
? ? ? ? ? ? ? ?在同一個層疊上下文中疗垛，層疊級別從低到高排列症汹。
? ? ? ? ? ? ? ?層疊級別由低到高：（1）背景和邊框（父級），也就是當(dāng)前層疊上下文的背景和邊框贷腕。 （2）負(fù)z-index:z-index為負(fù)值的“內(nèi)部元素”背镇。 （3）塊盒子：普通文檔流下的塊盒子（block-level box）咬展。 （4）浮動盒子：非定位的浮動元素（也就是排除了position:relative的浮動盒子）。 （5）行內(nèi)盒子：普通文檔流下的行內(nèi)盒子（inline-level box）瞒斩。 （6）z-index：0：z-index為0的“內(nèi)部元素”挚赊。（7）正z-index:z-index為正值的“內(nèi)部元素”。
? ? ? ? ? ? ? 背景和邊框一般為裝飾屬性济瓢，所以層疊級別最低。浮動元素和塊元素一般用作布局妹卿，而行內(nèi)元素都是內(nèi)容旺矾，對于一個頁面來說，最重要的當(dāng)然是內(nèi)容夺克。因此箕宙，一定要讓內(nèi)容的層疊級別相當(dāng)高。
? ? ? ? （3）層疊上下文的特點
? ? ? ? ? ? ? ? ?一個元素在z軸方向上的堆疊順序铺纽，是由“層疊上下文”和“層疊級別“這兩個因素決定的：
? ? ? ? ? ? ? ? ?①同一個層疊上下文中柬帕，我們比較的是“內(nèi)部元素層疊級別”。層疊級別大的元素顯示在上狡门，層疊級別小的元素顯示在下陷寝。
? ? ? ? ? ? ? ? ?②同一個層疊上下文中，如果兩個元素的層疊級別相同（即z-index值相同）其馏，則后面的元素堆疊在前面元素的上面凤跑，遵循“后來者居上”原則。
? ? ? ? ? ? ? ? ?③不同的層疊上下文中叛复，我們比較的是“父級元素層疊級別”仔引。元素顯示順序以“父級層疊上下文”的層疊級別來決定顯示的先后順序，與自身的層疊級別無關(guān)褐奥。
3：BFC和IFC
? ? ? ? （1）基本概念
? ? ? ? ? ? ? ? ?在CSS中咖耘，頁面中任何一個元素都可以看成是一個盒子。在普通文檔流中撬码，盒子會參與一種格式上下文儿倒。這個盒子可能是塊盒子，也可能是行內(nèi)盒子耍群。一個盒子只能是塊盒子或者行內(nèi)盒子义桂，不能同時是塊盒子又是行內(nèi)盒子。其中塊盒子參與BFC（塊級格式上下文）蹈垢，行內(nèi)盒子參與IFC（行級格式上下文）慷吊。
? ? ? ? （2）格式上下文
? ? ? ? ? ? ? ? 它指的是頁面中的一塊渲染區(qū)域，并且這個格式上下文有一套自己的渲染規(guī)則曹抬。格式上下文決定了其他內(nèi)部元素將如何定位溉瓶，以及和其他元素之間的關(guān)系。
? ? ? ? ? ? ? ? 格式上下文有兩種：（1）塊級格式上下文（BFC） （2）行級格式上下文（IFC）
? ? ? ? （3）盒子
? ? ? ? ? ? ? ?盒子，又稱CSS盒子堰酿，是CSS布局的基本單位疾宏。元素的類型和display屬性決定了盒子的類型。不同類型的盒子触创，會參與不同的格式上下文坎藐。
? ? ? ? ? ? ? ?盒子的類型一般有“塊盒子”和“行內(nèi)盒子”這兩種：
?? ? ? ? ? ? ? ①塊盒子
? ? ? ? ? ? ? ? ? 塊盒子，即block-level box哼绑。元素類型（即display屬性）為block岩馍、table、list-item的元素抖韩，會生成塊盒子蛀恩。
? ? ? ? ? ? ? ? ? 塊盒子會參與塊級格式上下文。也就是說茂浮，元素類型為block双谆、table、list-item的元素都會參與塊級格式上下文（BFC）席揽。
? ? ? ? ? ? ? ②行內(nèi)盒子
? ? ? ? ? ? ? ? ? 行內(nèi)盒子顽馋，即inline-level box。元素類型（即display屬性）為inline幌羞、inline-block趣避、inline-table的元素，會生成行內(nèi)盒子新翎。
? ? ? ? ? ? ? ? ? 行內(nèi)盒子會參與行級格式上下文程帕。也就是說，元素類型為inline地啰、inline-block愁拭、inline-table的元素都會參與行級格式上下文（IFC）。
? ? ? ? ? （4）BFC
? ? ? ? ? ? ? ? ? BFC 全稱Block Formatting Context（塊級格式上下文）亏吝。它是一個獨立的渲染區(qū)域岭埠，只有塊盒子（block-level box）參與。塊級格式上下文規(guī)定了內(nèi)部的塊盒子是如何布局的蔚鸥，并且這個渲染區(qū)域與外部區(qū)域毫不相關(guān)惜论。
? ? ? ? ? ? ? ? ?①如何創(chuàng)建BFC
? ? ? ? ? ? ? ? ? ? ?W3C標(biāo)準(zhǔn)中對BFC的定義：浮動元素，絕對定位元素（position為absolute或fixed）止喷，元素類型（即display屬性）為inline-block馆类、table-caption、table-cell弹谁，以及overflow屬性不為visible的元素將會創(chuàng)建一個新的塊級格式上下文（BFC）乾巧。
? ? ? ? ? ? ? ? ? ? ?如果一個元素具備以下任何一個條件句喜，則該元素都會創(chuàng)建一個新的BFC。
? ? ? ? ? ? ? ? ? ? ? Ⅰ：根元素? ? ??
? ? ? ? ? ? ? ? ? ? ? Ⅱ：float屬性除了none以外的值沟于，也就是“float:left”和“float:right” ? ??
? ? ? ? ? ? ? ? ? ? ? Ⅲ：position屬性除了static和relative以外的值咳胃，也就是“position:absolute”和“position:fixed”。 ?
? ? ? ? ? ? ? ? ? ? ? Ⅳ：overflow屬性除了visible以外的值旷太，也就是“overflow-auto”“overflow：hidden”和“overflow：scroll”展懈。?
? ? ? ? ? ? ? ? ? ? ? Ⅴ：元素類型（即display屬性）為inline-block、table-caption供璧、table-cell标沪。
? ? ? ? ? ? ? ? ?②BFC的特點
? ? ? ? ? ? ? ? ? ? ?（1）在一個BFC中，盒子從頂端開始垂直一個接著一個地排列嗜傅，兩個相鄰盒子之間的垂直間距由magin屬性決定。在同一個BFC中檩赢，兩個相鄰盒子之間垂直方向上的外邊距會疊加吕嘀。
? ? ? ? ? ? ? ? ? ? ?（2）在一個BFC中，沒一個盒子的左外邊界（margin-left）會緊貼著容器的左邊（border-left）（對于從右到左的格式化贞瞒，則相反）偶房，即使存在浮動元素也是如此。
? ? ? ? ? ? ? ? ? ? ?因此军浆，得出的一下幾點重要結(jié)論十分重要棕洋。
? ? ? ? ? ? ? ? ? ? ? （1）在一個BFC內(nèi)部，盒子會在垂直方向上一個接著一個地排列乒融。
? ? ? ? ? ? ? ? ? ? ? （2）在一個BFC內(nèi)部掰盘，相鄰的margin-top和margin-bottom會疊加。
? ? ? ? ? ? ? ? ? ? ? （3）在一個BFC內(nèi)部赞季，每一個元素的左外邊界會緊貼著包含盒子的左邊愧捕，即使存在浮動元素也是如此。
? ? ? ? ? ? ? ? ? ? ? （4）在一個BFC內(nèi)部申钩，如果存在內(nèi)部元素是一個新的BFC次绘，并且存在內(nèi)部元素是浮動元素。則該BFC區(qū)域不會與float元素的區(qū)域重疊撒遣。
? ? ? ? ? ? ? ? ? ? ? （5）BFC就是頁面上的一個隔離的盒子邮偎，該盒子內(nèi)部的子元素不會影響到外面的元素。
? ? ? ? ? ? ? ? ? ? ? （6）計算一個BFC的高度時义黎，其內(nèi)部浮動元素的高度也會參與計算禾进。
? ? ? ? ? ? ? ? ?③BFC的用途
?
? ? ? ? ? ? ? ? ? ? ?（1）創(chuàng)建BFC來避免垂直外邊距疊加。
? ? ? ? ? ? ? ? ? ? ?（2）創(chuàng)建BFC 來清除浮動廉涕。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?①BFC包含浮動 ? ?②BFC避免文字環(huán)繞
? ? ? ? ? ? ? ? ? ? ?（3）創(chuàng)建BFC來實現(xiàn)自適應(yīng)布局命迈。
最后
“相信有很多想學(xué)前端的小伙伴贩绕，今年年初我花了一個月整理了一份最適合2018年學(xué)習(xí)的web前端干貨，從最基礎(chǔ)的HTML+CSS+JS到移動端HTML5到各種框架都有整理壶愤，送給每一位前端小伙伴淑倾，53763，
1707這里是小白聚集地征椒，歡迎初學(xué)和進階中的小伙伴娇哆。”
