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