前言
當(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）
垂直居中
水平居中
等比例空間分配
