前端布局基础目录

前言

当前的前端布局书籍思路，基本就是讲HTML标签和CSS属性。
然而却不说这些标签和属性来自于W3C CSS规范。
附赠规范的链接

前端布局所需的知识脉络

要搭好前端布局的基础，在我看来需了解以下知识点。

1. 像素

前端布局里，像素包含的概念有逻辑像素，物理像素，像素比，亚像素等等。
了解这些概念，你就会明白：
1、为什么同一个元素在不同分辨率下显示的物理大小不一致。
2、为什么少于1px的像素会消失

2. 视口（Viewport）

视口是指网页中你看到的部分。
在桌面端视口大小约等于浏览器窗口大小减去地址栏、标签页、工具栏、滚动条的大小。
在移动端视口大小比较让人困惑。
因为手机厂商自作聪明，搞出了布局视口（layout viewport），视觉视口（visual viewport），理想视口（ideal viewport）三个概念。
这三个概念迟早会被淘汰，因为阻碍了生产力。
布局视口（layout viewport）的出现，是因为厂商希望桌面端网页默认在移动端浏览器上完整显示，无需横向滚动条。这样一来手机浏览器显示的元素就很小。默认980px。
理想视口（ideal viewport）的出现，是因为之前的980px不好用，还是自身的分辨率宽度好用。
视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。
这几个视口概念令人不厌其烦。最好使布局视口与理想视口的宽度一致。

3. 字体和IFC

字体所占高度到底多少？
字体的对齐对所占高度也有影响？
设计上不同字体所表达的情感和风格？

4. 包含块（containing box）

5. BFC（Block formatting contexts）

相邻的两个块级盒子（兄弟关系或者祖先关系）的外边距可以结合成一个单独的外边距？
阻止元素被浮动元素覆盖？
浮动的元素包含进来？

6. FFC（Flex Formatting Contexts）

垂直居中
水平居中
等比例空间分配

7. GFC