前言
當(dāng)前的前端布局書籍思路,基本就是講HTML標(biāo)簽和CSS屬性。
然而卻不說(shuō)這些標(biāo)簽和屬性來(lái)自于W3C CSS規(guī)范。
附贈(zèng)規(guī)范的鏈接
前端布局所需的知識(shí)脈絡(luò)
要搭好前端布局的基礎(chǔ),在我看來(lái)需了解以下知識(shí)點(diǎn)。
1. 像素
前端布局里,像素包含的概念有邏輯像素,物理像素,像素比,亞像素等等。
了解這些概念,你就會(huì)明白:
1、為什么同一個(gè)元素在不同分辨率下顯示的物理大小不一致。
2、為什么少于1px的像素會(huì)消失
2. 視口(Viewport)
視口是指網(wǎng)頁(yè)中你看到的部分。
在桌面端視口大小約等于瀏覽器窗口大小減去地址欄、標(biāo)簽頁(yè)、工具欄、滾動(dòng)條的大小。
在移動(dòng)端視口大小比較讓人困惑。
因?yàn)槭謾C(jī)廠商自作聰明,搞出了布局視口(layout viewport),視覺視口(visual viewport),理想視口(ideal viewport)三個(gè)概念。
這三個(gè)概念遲早會(huì)被淘汰,因?yàn)樽璧K了生產(chǎn)力。
布局視口(layout viewport)的出現(xiàn),是因?yàn)閺S商希望桌面端網(wǎng)頁(yè)默認(rèn)在移動(dòng)端瀏覽器上完整顯示,無(wú)需橫向滾動(dòng)條。這樣一來(lái)手機(jī)瀏覽器顯示的元素就很小。默認(rèn)980px。
理想視口(ideal viewport)的出現(xiàn),是因?yàn)橹暗?code>980px不好用,還是自身的分辨率寬度好用。
視覺視口是用戶當(dāng)前看到的區(qū)域,用戶可以通過(guò)縮放操作視覺視口,同時(shí)不會(huì)影響布局視口。
這幾個(gè)視口概念令人不厭其煩。最好使布局視口與理想視口的寬度一致。
3. 字體和IFC
字體所占高度到底多少?
字體的對(duì)齊對(duì)所占高度也有影響?
設(shè)計(jì)上不同字體所表達(dá)的情感和風(fēng)格?
4. 包含塊(containing box)
5. BFC(Block formatting contexts)
相鄰的兩個(gè)塊級(jí)盒子(兄弟關(guān)系或者祖先關(guān)系)的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距?
阻止元素被浮動(dòng)元素覆蓋?
浮動(dòng)的元素包含進(jìn)來(lái)?
6. FFC(Flex Formatting Contexts)
垂直居中
水平居中
等比例空間分配