資訊專欄INFORMATION COLUMN
摘要：分享嘉賓簡介新時代布局的分享者是新加坡的國際知名專家陳慧晶。陳慧晶老師的分享主題介紹如下布局經(jīng)常是令前端開發(fā)者頭痛的一塊工作。布局系統(tǒng)在這一小節(jié)中，慧晶老師主要分享了跟這新時代布局的三大棟梁。的首個公開工作草案是在發(fā)布的，而的則是發(fā)布。
分享嘉賓簡介作者：陳大魚頭
github： KRISACHAN
記錄原因：2019年3月30日在深圳舉行了第五屆的CSS Conf，魚頭作為一枚CSS新手以及愛好者也報名參加了。如果想知道魚頭參加完之后的感受，可以看知乎問題“參加2019年03月30日深圳第五屆CSSConf是如何體驗？”的回答。會上分享學(xué)習(xí)了許多干貨知識，因為怕自己遺忘，遂寫文章，以便后續(xù)記憶。
《新時代CSS布局》的分享者是新加坡的國際知名CSS專家陳慧晶。陳慧晶老師的個人博客地址是：www.chenhuijing.com/。
陳慧晶老師的分享主題介紹如下：
CSS布局經(jīng)常是令前端開發(fā)者頭痛的一塊工作。但是近幾年來，瀏覽器不斷發(fā)展，開始支持彈性盒子、網(wǎng)格布局、盒模型對齊等布局功能。這些CSS標(biāo)準(zhǔn)純粹是為了應(yīng)付網(wǎng)絡(luò)布局而編寫的。我們將深入了解這些新屬性的特征，新時代的布局技巧、例子及最佳實踐。希望聽眾會有所啟發(fā)，利用這些新的CSS屬性創(chuàng)造更符合瀏覽器本質(zhì)的設(shè)計。
本次分享的在線Slide: www.chenhuijing.com/slides/53-c…
為什么縱向比橫向難排？在分享的開始，慧晶老師便拋出了上述的問題。
其實答案也很簡單，就是因為在最初的時候，HTML跟CSS只是為了歐美國家而服務(wù)，而歐美國家文字排版又是橫向的，所以最開始的設(shè)計也是也橫向的文檔流為主，到后面互聯(lián)網(wǎng)不斷發(fā)展，連接至全世界的時候，才有了縱向排版的需求，所以結(jié)論就是設(shè)計者一開始并沒有考慮縱向排版，所以后續(xù)有需求的時候才會出現(xiàn)縱向比橫向難排的問題，關(guān)于縱橫布局的比較可以查閱魚頭的Hello CSS系列的CSS的邏輯屬性與盒子模型。
然后慧晶老師便分享了互聯(lián)網(wǎng)的發(fā)展史。關(guān)于這部分內(nèi)容，有興趣的也可以查閱魚頭的Hello CSS系列的序章-起源。
在這里，慧晶老師分享了一個很有趣的鏈接，就是可以查看最初的網(wǎng)頁長什么樣，鏈接在此：worldwideweb.cern.ch/browser/。
Web布局系統(tǒng)CSS布局部隊在這一小節(jié)中，慧晶老師主要分享了Flexbox、Grid跟Box Alignment這CSS新時代布局的三大棟梁。
CSS布局部隊是由以下以及其他的553個屬性組成。因為CSS是個團(tuán)隊項目。只有各屬性相互協(xié)調(diào)配合，才能把CSS的威力完全發(fā)揮出來。
瀏覽器的渲染過程慧晶老師又介紹了瀏覽器的渲染過程，以下是原文摘抄。
如果要揭開CSS布局的神秘面紗，那就必須先熟悉瀏覽器的渲染過程。渲染引擎會把服務(wù)器發(fā)送過來的Source文檔解析成瀏覽器能夠明白的對象。而在渲染網(wǎng)頁之前，瀏覽器會生成一個渲染樹。這個渲染樹是個中介性的結(jié)構(gòu)（intermediary structure），是文檔格式結(jié)構(gòu)（formatting structure）的表示法。
CSS在解析的過程，會計算出每個元素和文本節(jié)點的每個CSS屬性值。瀏覽器就會靠其中的取值來判斷要生成哪一類的盒子。
CSS顯示模塊（CSS Display Module Level 3）慧晶老師又介紹了**CSS顯示模塊（CSS Display Module Level 3）**，以下是原文摘抄。
CSS顯示模塊在這二十多年來，經(jīng)過不少演變。從一開始的基本、到現(xiàn)在最新規(guī)范中一共有十七種屬性值。此規(guī)范提出了兩種顯示類型，內(nèi)部及外部。內(nèi)部顯示類型定義了元素內(nèi)子元素的布局方式，外部顯示類型則定義了元素怎樣參與流式布局的處理。
CSS在解析的過程，會計算出每個元素和文本節(jié)點的每個CSS屬性值。瀏覽器就會靠其中的取值來判斷要生成哪一類的盒子。
CSS顯示模塊規(guī)范提出了兩種顯示類型，內(nèi)部及外部。內(nèi)部顯示類型定義了元素內(nèi)子元素的布局方式，外部顯示類型則定義了元素怎樣參與流式布局的處理。
Flex在這部分慧晶老師主要介紹了Flex的語法以及使用技巧（關(guān)于語法部分，在此不再累述，有興趣的可以翻閱MDN）。慧晶老師在介紹完Flex之后便開始了第一個栗子：自動margin是你的好友
在上面這個簡單的例子，容器內(nèi)只有一個子元素。我們可以運用margin來操縱它。如果不設(shè)定任何方向，盒子就會在容器的正中間。一行搞定水平垂直居中的問題。
然后慧晶老師提問到：“為什么塊格式自動margin不垂直居中元素？”
原因是如果元素的高度設(shè)為auto，那瀏覽器在計算它的高度時，只會考慮元素內(nèi)容及子元素，縱向沒有已確定的空間來調(diào)整位置。即使元素設(shè)了固定的高度，別忘記它跟子元素是互不相關(guān)的。這很有可能是瀏覽器最初執(zhí)行的抉擇遺留下來的行為。瀏覽器沒辦法計算上下方的margin取值，所以就把auto取值解析成0。
容器–項目的「父子」關(guān)系CSS盒式對齊模塊這是慧晶老師之前提到的轉(zhuǎn)折點。因為flex或grid容器跟子元素的關(guān)系，在布局時是被瀏覽器承認(rèn)的。因此，瀏覽器才有辦法計算出四面的自動margin取值。
在這一節(jié)，慧晶老師對CSS盒式對齊模塊(CSS Box Alignment Level 3)進(jìn)行了介紹。
在這里，慧晶老師解釋道：
當(dāng)然，光靠自動margin是不夠的。要更精確的調(diào)整子元素的位置，我們可以運用盒式對齊模塊（box alignment）提供的屬性值。
Flexbox的首個公開工作草案是在2009發(fā)布的，而Grid的則是2011發(fā)布。當(dāng)時兩個規(guī)范設(shè)定了兩組不同的對齊屬性。經(jīng)過討論，工作組決定把盒子對齊寫成獨立的規(guī)范，讓過去、現(xiàn)在和未來的formatting contexts都統(tǒng)一使用相同的屬性。
Box alignment的屬性一共有六個。在使用flex時，用得上其中四個，使用grid的話，六個屬性全部都能用。
魚頭注：這里具體的屬性也不累述了，有興趣的可以自行查閱[W3C][www.w3.org/TR/css-alig…]或者W3C PLUS
Grid或者Flexbox);“所以應(yīng)該是用Gird還是Flex？”
關(guān)于這個問題的答案，慧晶老師回答道：
這不是個二選一的狀況，應(yīng)該是二合一才對。
Flexbox比較適合單維方向的布局。因為運用Flexbox來實現(xiàn)的行列，即使對齊了，也只是個假象。Flexbox的行跟列是互不相關(guān)的。但是在單維布局，它擁有最強的彈性功能。
Grid則適合做二維網(wǎng)格布局，因為Grid中的行列才是真實的，才是是有關(guān)系的。你可以像在棋盤上排棋子似的，把Grid項目排成理想的布局。
要實現(xiàn)類似上面布局的設(shè)計，用新時代布局方式是做得到的。要如何實現(xiàn)這種內(nèi)容不對齊，環(huán)繞每個Grid單元厚厚的border？如果單靠Grid，用Box alignment屬性，可以嗎？
很可惜，做不到。之前有提過，Grid項目對齊的默認(rèn)值是stretch。一旦用上任何以外的取值時，項目就會馬上縮到內(nèi)容的尺寸。可是如果我們在Grid項目上設(shè)一個display:flex，把它變成Flex容器。那表示Grid項目里面的內(nèi)容，成為了Flex項目。現(xiàn)在利用Box alignment的各屬性調(diào)整內(nèi)容的位置就不會影響到Grid項目的尺寸，border也可以保持在Grid線上了。
百分比的局限（一致性的伸縮率）慧晶老師原話：“現(xiàn)在已經(jīng)相當(dāng)普遍的響應(yīng)式網(wǎng)頁設(shè)計，主要是依靠百分比來設(shè)定元素的尺寸。運用百分比的局限就是每個元素伸縮率是一致的。有時，這會導(dǎo)致開發(fā)者為了應(yīng)付各種viewport尺寸范圍，被逼要寫數(shù)不清的media query。
在深入研究這些新的布局模式時，我發(fā)現(xiàn)到最有趣的東西是靈活性尺寸。根據(jù)所設(shè)定的屬性值，元素伸縮的變化率是有差別的。有些屬性值會「堅持自己的立場」，在viewport變化的狀況下，盡量保持范圍內(nèi)的寬度。這樣講有點難了解，還是看看一些用例吧。”
接下來慧晶老師主要是對以下三組屬性進(jìn)行了對比：
fr對比auto
max-content對比固定width
fit-content對比minmax()
（魚頭注：關(guān)于上述屬性對比，有興趣的童鞋可以點擊鏈接查看）
兼容處理慧晶老師說：“Grid正式發(fā)布到現(xiàn)在，已經(jīng)有大概兩年的時間，瀏覽器的支持程度如今也高達(dá)88%，可以算是被廣泛支持了。但是其它12%的用戶該怎么辦呢？”
上述問題其實CSS可以通過feature query做功能檢測。它的語法類似media query，只是用的關(guān)鍵字是@supports
（魚頭注：關(guān)于@supports的使用，有興趣的可以查看魚頭的文章[第一章-CSS的語法與工作流）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/7086.html
摘要：指令模板顯示第到第條記錄總共條記錄每頁顯示條記錄指令列表數(shù)據(jù)接口請求參數(shù)請求對象數(shù)據(jù)事件名外部調(diào)用分頁查詢的事件監(jiān)聽事件服務(wù)配置參數(shù)加載數(shù)據(jù)改變頁大小下一頁上一頁加載指定頁 指令html模板 page.html 顯示第 {{(conf.currentPage-1) * conf.pageSize + 1}}...
摘要：指令模板顯示第到第條記錄總共條記錄每頁顯示條記錄指令列表數(shù)據(jù)接口請求參數(shù)請求對象數(shù)據(jù)事件名外部調(diào)用分頁查詢的事件監(jiān)聽事件服務(wù)配置參數(shù)加載數(shù)據(jù)改變頁大小下一頁上一頁加載指定頁 指令html模板 page.html 顯示第 {{(conf.currentPage-1) * conf.pageSize + 1}}...
摘要：再次搜索，得到原因分析通過運行測試程序來獲得等數(shù)據(jù)類型的大小，由于交叉編譯器所編譯出的程序無法在編譯主機(jī)上運行而產(chǎn)生錯誤。 首先安裝以下庫： // 貌似一起安裝 apt-cyg 不能識別，得一個一個得安裝，有些庫貌似沒找到 // apt-cyg install openssl pcre zlib automake bison curl-devel flex libiconv ...
摘要：構(gòu)建配置其它代碼啟動啟動后，用數(shù)據(jù)連接工具測試，鏈接地址樹莓派端口用戶名密碼到此為止，屬于你自己的工作環(huán)境已經(jīng)做好了。 普通PC環(huán)境也可以用以下配置，只是MYSQL那里換回mysql官方版本就可以。 Docker 安裝 $ curl -sSL get.docker.com | sudo sh 工作目錄 /lnmp/conf 存放虛擬主機(jī)配置/lnmp/data/mysql 存放mys...
摘要：構(gòu)建配置其它代碼啟動啟動后，用數(shù)據(jù)連接工具測試，鏈接地址樹莓派端口用戶名密碼到此為止，屬于你自己的工作環(huán)境已經(jīng)做好了。 普通PC環(huán)境也可以用以下配置，只是MYSQL那里換回mysql官方版本就可以。 Docker 安裝 $ curl -sSL get.docker.com | sudo sh 工作目錄 /lnmp/conf 存放虛擬主機(jī)配置/lnmp/data/mysql 存放mys...
閱讀 1097·2023-04-25 19:43
閱讀 4483·2021-11-30 14:52
閱讀 4203·2021-11-30 14:52
閱讀 4276·2021-11-29 11:00
閱讀 4206·2021-11-29 11:00
閱讀 4366·2021-11-29 11:00
閱讀 4019·2021-11-29 11:00
閱讀 7185·2021-11-29 11:00
