【Hello CSS】第六章-文檔流與排版

nihao 發布于2019-08-02 15:35 / 2882人閱讀

摘要：作者陳大魚頭正常流什么是正常流其實就是我們日常所說的文檔流。在官方文檔里對應的是。然后，包含形成一條線的框的矩形區域稱為線盒。基線線盒的高度由的計算結果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配，由具體情況決定。

作者：陳大魚頭

github： KRISACHAN

正常流

什么是“正常流”？
其實就是我們日常所說的“文檔流”。
在W3C官方文檔里對應的是“normal flow”。

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

塊級盒子(block-level boxes) 與創建 塊級格式化上下文(BFC) 有關；

行內級盒子(inline-level boxes) 與創建 行內級格式化上下文(IFC) 有關。

BFC

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

根據W3C上的解釋：

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

表現是什么？

表現就是在包含塊內一個盒子一個盒子不重疊地垂直排列，兩個兄弟盒子直接的垂直距離由margin決定。浮動也是如此（雖然有可能兩個盒子的距離會因為floats而變小），除非該盒子再創建一個新的BFC。

簡單來說，BFC就是一個獨立不干擾外界也不受外界干擾的盒子啊(/ω＼)

IFC

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

簡單來說，跟BFC表現不一樣的盒子就是IFC了(*?ω?)。

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

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

線盒（line box）的高度：由line-height的計算結果決定。

基線（baseline）

線盒（line box） 的高度由line-height的計算結果決定。

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

vertical-align的默認值就是基線。

字母x

你們還記得讀書時用的英語作業本嗎？

如上圖所示，我們看到小寫字母x的位置，它的上下邊緣就是我們的基線（baseline），但下邊緣才是我們日常使用的屬性值。順便一提，CSS單位ex便是指的這個字母x的高度。

如何理解IFC

自從翻了CSS的發展史之后，了解了CSS的誕生背景之后，其實很多東西理解起來就輕松了。IFC之所以比BFC復雜，原因就在于很多非規律的成分，在西文了，我們可以簡單粗暴的理解為英語作業本的表現，但是在writing-mode不同，文字表現不同的各個國家，IFC的表現也會有差異。

當然以上都是我的個人理解，如果有更科學更標準的理解方式或者不同的想法，可以加魚頭微信“krisChans95”來探討。

層疊上下文與層疊順序

我們首先來看一張很著名的圖

上面便是在同樣的上下文中，元素的層疊規則（CSS3以后的除外，那規則會比較復雜）。元素的 z-index 值只在父級層疊上下文中有意義。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。

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

根元素 (HTML),

z-index 值不為 auto 的絕對/相對定位，

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

opacity 屬性值小于 1 的元素，

transform 屬性值不為 none 的元素，

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

filter值不為 none 的元素，

perspective值不為 none 的元素，

isolation 屬性被設置為 isolate 的元素，

position: fixed

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

-webkit-overflow-scrolling 屬性被設置 touch 的元素

新時代的布局 Flex

我想到如今，應該很少人會沒寫過或者沒了解過 Flex （不知道的可以翻閱MDN）。

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

一個設有 display:flex 或 display:inline-flex 的元素是一個伸縮容器，伸縮容器的子元素被稱為為伸縮項目，這些子元素使用伸縮布局模型來排版。

語法如下：

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

flex 屬性可以指定1個，2個或3個值。

單值語法: 值必須為以下其中之一:

一個無單位 數() : 它會被當作的值。

一個有效的 寬度(width) 值: 它會被當作的值。

關鍵字 none、 auto, 或 initial 。

雙值語法: 第一個值必須為一個無單位數，并且它會被當作的值。第二個值必須為以下之一：

一個無單位數：它會被當作的值。

一個有效的寬度值: 它會被當作的值。

三值語法:

第一個值必須為一個無單位數，并且它會被當作的值。

第二個值必須為一個無單位數，并且它會被當作的值。

第三個值必須為一個有效的寬度值，并且它會被當作的值。

Grid

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

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

語法如下：

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">

我們來看看 grid 所支持的一些 “奇怪” 的特性：

命名空間：

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

首先是第一種 網格線命名：

效果如下：

第二種 真命名空間布局：

效果如下：

通過上面兩個示例，我們可以發現Grid布局的二維性可以滿足我們日常很多的布局要求，當然，第一眼看語法不免有點懵，但是熟悉之后，基本日常需求中的二維布局我們都能依賴它來完成。

一些常用的靈活尺寸

屬性	定義
fr	可伸縮長度單位，網格容器中可用空間的一等份。
auto	自由分配，由具體情況決定。
minmax()	定義了一個長寬范圍的閉區間。
fit-content()	同等于min(maximum size, max(minimum size, argument))

以上屬性對比結果如下：

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

后記

本章的內容要深究起來是非常龐大的，魚頭我在準備內容的時候有想過是不是要另外再開個布局的系列去分享，但是我想把本文當成是一個關鍵字集合來供自己以及有需要的人來做目錄也是極好的。我認為CSS中最難的部分就是布局了，雖然W3C本身提供了很多的屬性以及規范來處理這些布局問題的，但是涉及到了現實的項目，更多時候是錯綜復雜的，但是隨著CSS邏輯屬性的變化，以及各類新布局系統的出現，相信以后的布局會簡單得多。

本章內容就這么草草結束了，關于上面提到的，或者沒有提到的與之相關的，以后有機會魚頭會新開個系列來分享。當然如果看到這里的你有任何布局上的見解或問題也歡迎來找魚頭探討。

參考資料：

聊聊CSS中的層疊相關概念

CSS Conf -《新時代CSS布局》學習總結

新時代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特性下多欄自適應布局

塊格式化上下文

Normal flow

css中的IFC

【Hello CSS】系列

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

如果你也喜歡 CSS，喜歡探討技術，或者對本文，本系列有任何的意見或建議，你可以掃描下方二維碼，關注微信公眾號“ 魚頭的Web海洋 ”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。

GPU云服務器云服務器第六章第六章linux磁盤操作第六章數據庫及應用教案中文排版CSS心得

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

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

【Hello CSS】第六章-文檔流與排版

摘要：作者陳大魚頭正常流什么是正常流其實就是我們日常所說的文檔流。在官方文檔里對應的是。然后，包含形成一條線的框的矩形區域稱為線盒。基線線盒的高度由的計算結果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配，由具體情況決定。作者：陳大魚頭 github： KRISACHAN 正常流什么是正常流？其實就是我們日常所說的文檔流。在W3C官方文檔里對應的是normal ...

null1145 2019-08-30 11:27 評論0 收藏0
《On Java 8》中文版，又名《Java 編程思想》中文第五版

摘要：基于版本基于版本。由于中英行文差異，完全的逐字逐句翻譯會很冗余啰嗦。譯者在翻譯中同時參考了谷歌百度有道翻譯的譯文以及編程思想第四版中文版的部分內容對其翻譯死板，生造名詞，語言精煉度差問題進行規避和改正。來源：LingCoder/OnJava8 主譯: LingCoder 參譯: LortSir 校對：nickChenyx E-mail: 本書原作者為 [美] Bru...

BingqiChen 2019-08-16 16:22 評論0 收藏0
《Python基礎教程》第六章--讀書筆記

摘要：第六章抽象本章會介紹如何將語句組織成函數。關鍵字參數和默認值目前為止，我們使用的參數都是位置參數，因為它們的位置很重要，事實上比它們的名字更重要。參數前的星號將所有值放置在同一個元祖中。函數內的變量被稱為局部變量。第六章：抽象本章會介紹如何將語句組織成函數。還會詳細介紹參數（parameter）和作用域（scope）的概念，以及遞歸的概念及其在程序中的用途。懶惰即美德斐波那契數...

AnthonyHan 2019-07-31 11:41 評論0 收藏0
[CSS]《CSS揭秘》第六章——用戶體驗

摘要：定義和用法標簽為元素定義標注標記。元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。選用合適的鼠標光標 #testdiv{ cursor:not-allowed; /* cursor:none;//例如視頻界面隱藏鼠標 */ } 擴大可點擊區域 .testdiv{...

simon_chen 2019-08-30 15:54 評論0 收藏0
《 JavaScript程序設計》—— 第六章 事件

摘要：當這些系統的用戶界面元素產生某些事件時，會運行特定的代碼以作響應。我們將注意力放在程序設計上，特別是放在事件驅動的程序設計上，所以重點還在。 6.1 6.1.1 在研究受事件驅動的程序時，傾向于關注四個機制因為許多事件都與人們可以看到的用戶界面元素（按鈕、文本字段、滑動塊）相關聯，所以事件驅動計算的一個關鍵要素就是用于定義用戶界面元素的機制由于檢測到的事件經常會引用或修改一個腳本...

mj 2019-08-20 16:38 評論0 收藏0