資訊專欄INFORMATION COLUMN
摘要：分享嘉賓簡介新時代布局的分享者是新加坡的國際知名專家陳慧晶。陳慧晶老師的分享主題介紹如下布局經常是令前端開發者頭痛的一塊工作。布局系統在這一小節中，慧晶老師主要分享了跟這新時代布局的三大棟梁。的首個公開工作草案是在發布的，而的則是發布。
分享嘉賓簡介作者：陳大魚頭
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布局系統CSS布局部隊在這一小節中，慧晶老師主要分享了Flexbox、Grid跟Box Alignment這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。
容器–項目的「父子」關系CSS盒式對齊模塊這是慧晶老師之前提到的轉折點。因為flex或grid容器跟子元素的關系，在布局時是被瀏覽器承認的。因此，瀏覽器才有辦法計算出四面的自動margin取值。
在這一節，慧晶老師對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變化的狀況下，盡量保持范圍內的寬度。這樣講有點難了解，還是看看一些用例吧。”
接下來慧晶老師主要是對以下三組屬性進行了對比：
fr對比auto
max-content對比固定width
fit-content對比minmax()
（魚頭注：關于上述屬性對比，有興趣的童鞋可以點擊鏈接查看）
兼容處理慧晶老師說：“Grid正式發布到現在，已經有大概兩年的時間，瀏覽器的支持程度如今也高達88%，可以算是被廣泛支持了。但是其它12%的用戶該怎么辦呢？”
上述問題其實CSS可以通過feature query做功能檢測。它的語法類似media query，只是用的關鍵字是@supports
（魚頭注：關于@supports的使用，有興趣的可以查看魚頭的文章[第一章-CSS的語法與工作流）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/7086.html
摘要：指令模板顯示第到第條記錄總共條記錄每頁顯示條記錄指令列表數據接口請求參數請求對象數據事件名外部調用分頁查詢的事件監聽事件服務配置參數加載數據改變頁大小下一頁上一頁加載指定頁 指令html模板 page.html 顯示第 {{(conf.currentPage-1) * conf.pageSize + 1}}...
摘要：指令模板顯示第到第條記錄總共條記錄每頁顯示條記錄指令列表數據接口請求參數請求對象數據事件名外部調用分頁查詢的事件監聽事件服務配置參數加載數據改變頁大小下一頁上一頁加載指定頁 指令html模板 page.html 顯示第 {{(conf.currentPage-1) * conf.pageSize + 1}}...
摘要：再次搜索，得到原因分析通過運行測試程序來獲得等數據類型的大小，由于交叉編譯器所編譯出的程序無法在編譯主機上運行而產生錯誤。 首先安裝以下庫： // 貌似一起安裝 apt-cyg 不能識別，得一個一個得安裝，有些庫貌似沒找到 // apt-cyg install openssl pcre zlib automake bison curl-devel flex libiconv ...
摘要：構建配置其它代碼啟動啟動后，用數據連接工具測試，鏈接地址樹莓派端口用戶名密碼到此為止，屬于你自己的工作環境已經做好了。 普通PC環境也可以用以下配置，只是MYSQL那里換回mysql官方版本就可以。 Docker 安裝 $ curl -sSL get.docker.com | sudo sh 工作目錄 /lnmp/conf 存放虛擬主機配置/lnmp/data/mysql 存放mys...
摘要：構建配置其它代碼啟動啟動后，用數據連接工具測試，鏈接地址樹莓派端口用戶名密碼到此為止，屬于你自己的工作環境已經做好了。 普通PC環境也可以用以下配置，只是MYSQL那里換回mysql官方版本就可以。 Docker 安裝 $ curl -sSL get.docker.com | sudo sh 工作目錄 /lnmp/conf 存放虛擬主機配置/lnmp/data/mysql 存放mys...
閱讀 724·2023-04-25 19:43
閱讀 3921·2021-11-30 14:52
閱讀 3794·2021-11-30 14:52
閱讀 3859·2021-11-29 11:00
閱讀 3790·2021-11-29 11:00
閱讀 3882·2021-11-29 11:00
閱讀 3562·2021-11-29 11:00
閱讀 6138·2021-11-29 11:00
