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

• 做者：陳大魚頭
• github： KRISACHAN
• 記錄緣由：2019年3月30日在深圳舉行了第五屆的CSS Conf，魚頭做爲一枚CSS新手以及愛好者也報名參加了。若是想知道魚頭參加完以後的感覺，能夠看知乎問題「參加2019年03月30日深圳第五屆CSSConf是如何體驗？」的回答。會上分享學習了許多幹貨知識，由於怕本身遺忘，遂寫文章，以便後續記憶。

分享嘉賓簡介

《新時代CSS佈局》的分享者是新加坡的國際知名CSS專家陳慧晶。陳慧晶老師的我的博客地址是：www.chenhuijing.com/。

陳慧晶老師的分享主題介紹以下：

CSS佈局常常是令前端開發者頭痛的一塊工做。可是近幾年來，瀏覽器不斷髮展，開始支持彈性盒子、網格佈局、盒模型對齊等佈局功能。這些CSS標準純粹是爲了應付網絡佈局而編寫的。咱們將深刻了解這些新屬性的特徵，新時代的佈局技巧、例子及最佳實踐。但願聽衆會有所啓發，利用這些新的CSS屬性創造更符合瀏覽器本質的設計。

本次分享的在線Slide: www.chenhuijing.com/slides/53-c…

爲何縱向比橫向難排？

在分享的開始，慧晶老師便拋出了上述的問題。

其實答案也很簡單，就是由於在最初的時候，HTML跟CSS只是爲了歐美國家而服務，而歐美國家文字排版又是橫向的，因此最開始的設計也是也橫向的文檔流爲主，到後面互聯網不斷髮展，鏈接至全世界的時候，纔有了縱向排版的需求，因此結論就是設計者一開始並無考慮縱向排版，因此後續有需求的時候纔會出現縱向比橫向難排的問題，關於縱橫佈局的比較能夠查閱魚頭的Hello CSS系列的CSS的邏輯屬性與盒子模型。

而後慧晶老師便分享了互聯網的發展史。關於這部份內容，有興趣的也能夠查閱魚頭的Hello CSS系列的序章-起源。

在這裏，慧晶老師分享了一個頗有趣的連接，就是能夠查看最初的網頁長什麼樣，連接在此：worldwideweb.cern.ch/browser/。

Web佈局系統

在這一小節中，慧晶老師主要分享了Flexbox、Grid跟Box Alignment這CSS新時代佈局的三大棟樑。

CSS佈局部隊

CSS佈局部隊是由如下以及其餘的553個屬性組成。由於CSS是個團隊項目。只有各屬性相互協調配合，才能把CSS的威力徹底發揮出來。

瀏覽器的渲染過程

慧晶老師又介紹了瀏覽器的渲染過程，如下是原文摘抄。

若是要揭開CSS佈局的神祕面紗，那就必須先熟悉瀏覽器的渲染過程。渲染引擎會把服務器發送過來的Source文檔解析成瀏覽器可以明白的對象。而在渲染網頁以前，瀏覽器會生成一個渲染樹。這個渲染樹是個中介性的結構（intermediary structure），是文檔格式結構（formatting structure）的表示法。

CSS在解析的過程，會計算出每一個元素和文本節點的每一個CSS屬性值。瀏覽器就會靠其中的取值來判斷要生成哪一類的盒子。

CSS顯示模塊（CSS Display Module Level 3）

慧晶老師又介紹了**CSS顯示模塊（CSS Display Module Level 3）**，如下是原文摘抄。

CSS顯示模塊在這二十多年來，通過很多演變。從一開始的基本、到如今最新規範中一共有十七種屬性值。此規範提出了兩種顯示類型，內部及外部。內部顯示類型定義了元素內子元素的佈局方式，外部顯示類型則定義了元素怎樣參與流式佈局的處理。

CSS在解析的過程，會計算出每一個元素和文本節點的每一個CSS屬性值。瀏覽器就會靠其中的取值來判斷要生成哪一類的盒子。

CSS顯示模塊規範提出了兩種顯示類型，內部及外部。內部顯示類型定義了元素內子元素的佈局方式，外部顯示類型則定義了元素怎樣參與流式佈局的處理。

Flex

在這部分慧晶老師主要介紹了Flex的語法以及使用技巧（關於語法部分，在此再也不累述，有興趣的能夠翻閱MDN）。慧晶老師在介紹完Flex以後便開始了第一個栗子：自動margin是你的好友

在上面這個簡單的例子，容器內只有一個子元素。咱們能夠運用margin來操縱它。若是不設定任何方向，盒子就會在容器的正中間。一行搞定水平垂直居中的問題。

而後慧晶老師提問到：「爲何塊格式自動margin不垂直居中元素？」

緣由是若是元素的高度設爲auto，那瀏覽器在計算它的高度時，只會考慮元素內容及子元素，縱向沒有已肯定的空間來調整位置。即便元素設了固定的高度，別忘記它跟子元素是互不相關的。這頗有多是瀏覽器最初執行的抉擇遺留下來的行爲。瀏覽器沒辦法計算上下方的margin取值，因此就把auto取值解析成0。

容器–項目的「父子」關係

這是慧晶老師以前提到的轉折點。由於flex或grid容器跟子元素的關係，在佈局時是被瀏覽器認可的。所以，瀏覽器纔有辦法計算出四面的自動margin取值。

CSS盒式對齊模塊

在這一節，慧晶老師對CSS盒式對齊模塊(CSS Box Alignment Level 3)進行了介紹。

在這裏，慧晶老師解釋道：

固然，光靠自動margin是不夠的。要更精確的調整子元素的位置，咱們能夠運用盒式對齊模塊（box alignment）提供的屬性值。

Flexbox的首個公開工做草案是在2009發佈的，而Grid的則是2011發佈。當時兩個規範設定了兩組不一樣的對齊屬性。通過討論，工做組決定把盒子對齊寫成獨立的規範，讓過去、如今和將來的formatting contexts都統一使用相同的屬性。

Box alignment的屬性一共有六個。在使用flex時，用得上其中四個，使用grid的話，六個屬性所有都能用。

魚頭注：這裏具體的屬性也不累述了，有興趣的能夠自行查閱[W3C][www.w3.org/TR/css-alig…]或者W3C PLUS

Grid或者Flexbox?

「因此應該是用Gird仍是Flex？」

關於這個問題的答案，慧晶老師回答道：

這不是個二選一的情況，應該是二合一纔對。

Flexbox比較適合單維方向的佈局。由於運用Flexbox來實現的行列，即便對齊了，也只是個假象。Flexbox的行跟列是互不相關的。可是在單維佈局，它擁有最強的彈性功能。

Grid則適合作二維網格佈局，由於Grid中的行列纔是真實的，纔是是有關係的。你能夠像在棋盤上排棋子似的，把Grid項目排成理想的佈局。

要實現相似上面佈局的設計，用新時代佈局方式是作獲得的。要如何實現這種內容不對齊，環繞每一個Grid單元厚厚的border？若是單靠Grid，用Box alignment屬性，能夠嗎？

很惋惜，作不到。以前有提過，Grid項目對齊的默認值是stretch。一旦用上任何之外的取值時，項目就會立刻縮到內容的尺寸。但是若是咱們在Grid項目上設一個display:flex，把它變成Flex容器。那表示Grid項目裏面的內容，成爲了Flex項目。如今利用Box alignment的各屬性調整內容的位置就不會影響到Grid項目的尺寸，border也能夠保持在Grid線上了。

百分比的侷限（一致性的伸縮率）

慧晶老師原話：「如今已經至關廣泛的響應式網頁設計，主要是依靠百分比來設定元素的尺寸。運用百分比的侷限就是每一個元素伸縮率是一致的。有時，這會致使開發者爲了應付各類viewport尺寸範圍，被逼要寫數不清的media query。

在深刻研究這些新的佈局模式時，我發現到最有趣的東西是靈活性尺寸。根據所設定的屬性值，元素伸縮的變化率是有差異的。有些屬性值會「堅持本身的立場」，在viewport變化的情況下，儘可能保持範圍內的寬度。這樣講有點難了解，仍是看看一些用例吧。」

接下來慧晶老師主要是對如下三組屬性進行了對比：

1. fr對比auto

2. max-content對比固定width

3. fit-content對比minmax()

（魚頭注：關於上述屬性對比，有興趣的童鞋能夠點擊連接查看）

兼容處理

慧晶老師說：「Grid正式發佈到如今，已經有大概兩年的時間，瀏覽器的支持程度現在也高達88%，能夠算是被普遍支持了。可是其它12%的用戶該怎麼辦呢？」

上述問題其實CSS能夠經過feature query作功能檢測。它的語法相似media query，只是用的關鍵字是@supports

（魚頭注：關於@supports的使用，有興趣的能夠查看魚頭的文章[第一章-CSS的語法與工做流）

若是你、喜歡探討技術，或者對本文有任何的意見或建議，你能夠掃描下方二維碼，關注微信公衆號「 魚頭的Web海洋」，隨時與魚頭互動。歡迎！衷心但願能夠碰見你。