摘要：作者陳大魚頭正常流什么是正常流其實(shí)就是我們?nèi)粘Ｋf(shuō)的文檔流。在官方文檔里對(duì)應(yīng)的是。然后，包含形成一條線的框的矩形區(qū)域稱為線盒。基線線盒的高度由的計(jì)算結(jié)果決定。級(jí)層疊上下文被自動(dòng)視為父級(jí)層疊上下文的一個(gè)獨(dú)立單元。自由分配，由具體情況決定。

作者：陳大魚頭
github： KRISACHAN

什么是“正常流”？
其實(shí)就是我們?nèi)粘Ｋf(shuō)的“文檔流”。
在W3C官方文檔里對(duì)應(yīng)的是“normal flow”。

正常流的盒子屬于格式化上下文(FC)，在CSS2.2中可以是表格、塊或內(nèi)聯(lián)。
在CSS3中引入了flex跟grid，當(dāng)然以后會(huì)引入得更多。

塊級(jí)盒子(block-level boxes) 與創(chuàng)建 塊級(jí)格式化上下文(BFC) 有關(guān)；

行內(nèi)級(jí)盒子(inline-level boxes) 與創(chuàng)建 行內(nèi)級(jí)格式化上下文(IFC) 有關(guān)。

魚頭注：在之前的文章中有介紹過(guò)如何生成一個(gè)BFC，本章便不再累述。

浮動(dòng)、絕對(duì)定位元素、塊容器（例如inline-blocks、table-cells、and table-captions）都不是塊盒子。除了overflow以外的visible（除非該值已經(jīng)傳播到了視口）為其內(nèi)容建立新的BFC。

表現(xiàn)就是在包含塊內(nèi)一個(gè)盒子一個(gè)盒子不重疊地垂直排列，兩個(gè)兄弟盒子直接的垂直距離由margin決定。浮動(dòng)也是如此（雖然有可能兩個(gè)盒子的距離會(huì)因?yàn)?b>floats而變小），除非該盒子再創(chuàng)建一個(gè)新的BFC。

簡(jiǎn)單來(lái)說(shuō)，BFC就是一個(gè)獨(dú)立不干擾外界也不受外界干擾的盒子啊(/ω＼)

魚頭注：Mmmmm，BFC還是相對(duì)好理解，IFC比較復(fù)雜，W3C上所占的篇幅也比BFC多得多的。

簡(jiǎn)單來(lái)說(shuō)，跟BFC表現(xiàn)不一樣的盒子就是IFC了(*?ω?)。

跟BFC不一樣，IFC內(nèi)的盒子會(huì)從包含塊的頂部一個(gè)接著一個(gè)地水平排列。這些盒子會(huì)考慮水平margin，border跟padding。垂直對(duì)齊的方式也略有復(fù)雜。然后，包含形成一條線的框的矩形區(qū)域稱為線盒（line box）。

線盒（line box）的寬度：由浮動(dòng)情況跟它所在的包含塊決定。

線盒（line box）的高度：由line-height的計(jì)算結(jié)果決定。

線盒（line box） 的高度由line-height的計(jì)算結(jié)果決定。

line-height的定義就是線盒（line box）內(nèi)兩基線（baseline）（W3C原文）的間距。

vertical-align的默認(rèn)值就是基線。

你們還記得讀書時(shí)用的英語(yǔ)作業(yè)本嗎？

如上圖所示，我們看到小寫字母x的位置，它的上下邊緣就是我們的基線（baseline），但下邊緣才是我們?nèi)粘Ｊ褂玫膶傩灾怠ｍ槺阋惶幔珻SS單位ex便是指的這個(gè)字母x的高度。

自從翻了CSS的發(fā)展史之后，了解了CSS的誕生背景之后，其實(shí)很多東西理解起來(lái)就輕松了。IFC之所以比BFC復(fù)雜，原因就在于很多非規(guī)律的成分，在西文了，我們可以簡(jiǎn)單粗暴的理解為英語(yǔ)作業(yè)本的表現(xiàn)，但是在writing-mode不同，文字表現(xiàn)不同的各個(gè)國(guó)家，IFC的表現(xiàn)也會(huì)有差異。

當(dāng)然以上都是我的個(gè)人理解，如果有更科學(xué)更標(biāo)準(zhǔn)的理解方式或者不同的想法，可以加魚頭微信“krisChans95”來(lái)探討。

我們首先來(lái)看一張很著名的圖

上面便是在同樣的上下文中，元素的層疊規(guī)則（CSS3以后的除外，那規(guī)則會(huì)比較復(fù)雜）。元素的 z-index 值只在父級(jí)層疊上下文中有意義。級(jí)層疊上下文被自動(dòng)視為父級(jí)層疊上下文的一個(gè)獨(dú)立單元。

文檔中的層疊上下文由滿足以下任意一個(gè)條件的元素形成：

根元素 (HTML),

z-index 值不為 auto 的 絕對(duì)/相對(duì)定位，

一個(gè) z-index 值不為 auto 的 flex 項(xiàng)目 (flex item)，即：父元素 display: flex|inline-flex，

opacity 屬性值小于 1 的元素，

transform 屬性值不為 none 的元素，

mix-blend-mode 屬性值不為 "normal"的元素，

filter值不為 none 的元素，

perspective值不為 none 的元素，

isolation 屬性被設(shè)置為 isolate 的元素，

position: fixed

在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值

-webkit-overflow-scrolling 屬性被設(shè)置 touch 的元素

我想到如今，應(yīng)該很少人會(huì)沒寫過(guò)或者沒了解過(guò) Flex （不知道的可以翻閱MDN）。

這個(gè)是 CSS 史上第一個(gè)以 start-end 來(lái)定義方向的屬性，這是一個(gè)可伸縮的布局模型。

一個(gè)設(shè)有 display:flex 或 display:inline-flex 的元素是一個(gè)伸縮容器，伸縮容器的子元素被稱為為伸縮項(xiàng)目，這些子元素使用伸縮布局模型來(lái)排版。

語(yǔ)法如下：

display: flex/inline-flex;
flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ];

flex 屬性可以指定1個(gè)，2個(gè)或3個(gè)值。

單值語(yǔ)法: 值必須為以下其中之一:

一個(gè)無(wú)單位 數(shù)() : 它會(huì)被當(dāng)作的值。

一個(gè)有效的 寬度(width) 值: 它會(huì)被當(dāng)作 的值。

關(guān)鍵字 none、 auto, 或 initial 。

雙值語(yǔ)法: 第一個(gè)值必須為一個(gè)無(wú)單位數(shù)，并且它會(huì)被當(dāng)作 的值。第二個(gè)值必須為以下之一：

一個(gè)無(wú)單位數(shù)：它會(huì)被當(dāng)作 的值。

一個(gè)有效的寬度值: 它會(huì)被當(dāng)作 的值。

三值語(yǔ)法:

第一個(gè)值必須為一個(gè)無(wú)單位數(shù)，并且它會(huì)被當(dāng)作 的值。

第二個(gè)值必須為一個(gè)無(wú)單位數(shù)，并且它會(huì)被當(dāng)作 的值。

第三個(gè)值必須為一個(gè)有效的寬度值， 并且它會(huì)被當(dāng)作 的值。

我印象中第一次接觸Grid布局的時(shí)候，開個(gè)Chrome的實(shí)驗(yàn)性功能也就只能能支持個(gè)repeat(4, 200px)，但如今已經(jīng)除了IE，其他瀏覽器差不多也是Full support了(如果你還不了解這個(gè)布局模型，可以翻閱MDN)。

在這里順便提一下，Flex是一維布局，Grid是二維布局。意思就是Flex只能同時(shí)在一個(gè)方向進(jìn)行作用，而Grid卻可以在縱橫兩個(gè)方向同時(shí)工作。

語(yǔ)法如下：

display: grid/inline-grid;
gird: <"grid-template"> | <"grid-template-rows"> / [ auto-flow && dense? ] <"grid-auto-columns">? | [ auto-flow && dense? ] <"grid-auto-rows">? / <"grid-template-columns">

我們來(lái)看看 grid 所支持的一些 “奇怪” 的特性：

命名空間：

魚頭覺得 grid 布局中最有趣的功能就是命名空間了，我們可以看看以下示例：

首先是第一種 網(wǎng)格線命名：

效果如下：

第二種 真命名空間布局：

效果如下：

通過(guò)上面兩個(gè)示例，我們可以發(fā)現(xiàn)Grid布局的二維性可以滿足我們?nèi)粘：芏嗟牟季忠螅?dāng)然，第一眼看語(yǔ)法不免有點(diǎn)懵，但是熟悉之后，基本日常需求中的二維布局我們都能依賴它來(lái)完成。

以上屬性對(duì)比結(jié)果如下：

源碼在我codepen中，大家可以自行去對(duì)比：
https://codepen.io/krischan77...

本章的內(nèi)容要深究起來(lái)是非常龐大的，魚頭我在準(zhǔn)備內(nèi)容的時(shí)候有想過(guò)是不是要另外再開個(gè)布局的系列去分享，但是我想把本文當(dāng)成是一個(gè)關(guān)鍵字集合來(lái)供自己以及有需要的人來(lái)做目錄也是極好的。我認(rèn)為CSS中最難的部分就是布局了，雖然W3C本身提供了很多的屬性以及規(guī)范來(lái)處理這些布局問(wèn)題的，但是涉及到了現(xiàn)實(shí)的項(xiàng)目，更多時(shí)候是錯(cuò)綜復(fù)雜的，但是隨著CSS邏輯屬性的變化，以及各類新布局系統(tǒng)的出現(xiàn)，相信以后的布局會(huì)簡(jiǎn)單得多。

本章內(nèi)容就這么草草結(jié)束了，關(guān)于上面提到的，或者沒有提到的與之相關(guān)的，以后有機(jī)會(huì)魚頭會(huì)新開個(gè)系列來(lái)分享。當(dāng)然如果看到這里的你有任何布局上的見解或問(wèn)題也歡迎來(lái)找魚頭探討。

聊聊CSS中的層疊相關(guān)概念

CSS Conf -《新時(shí)代CSS布局》學(xué)習(xí)總結(jié)

新時(shí)代CSS布局

CSS世界

CSS Display Module Level 3

CSS Flexible Box Layout Module Level 1

CSS Grid Layout Module Level 1

CSS Box Alignment Module Level 3

寫給自己看的display: grid布局教程

寫給自己看的display: flex布局教程

CSS深入理解流體特性和BFC特性下多欄自適應(yīng)布局

塊格式化上下文

Normal flow

css中的IFC

【Hello CSS】是以CSS基礎(chǔ)概念為主題的系列文章，旨在幫助大家更深刻地了解并且提高CSS在各位開發(fā)者心目中的地位。由于魚頭我水平有限，文筆有限，如果各位在文章中發(fā)現(xiàn)有任何不合理，不正確的地方，還煩不吝指出，我會(huì)非常感謝的；如果通過(guò)文章有任何想法或疑問(wèn)，也希望各位能積極留言，我們互相探討；如果通過(guò)本系列文章有所收獲，這就讓魚頭我喜不自勝了！

如果你也喜歡 CSS，喜歡探討技術(shù)，或者對(duì)本文，本系列有任何的意見或建議，你可以掃描下方二維碼，關(guān)注微信公眾號(hào)“ 魚頭的Web海洋 ”，隨時(shí)與魚頭互動(dòng)。歡迎！衷心希望可以遇見你。