CSS 选择器#

盒模型#

伪类#

传统 float-clearfix hack 布局#

flex 布局#

grid 布局#

选择限制#

在设计布局时，同一种类的组件使用同一尺寸，不同类不同等级的组件使用不同尺寸，有助于实现层次分明的视觉效果。

然而，具体实现时，“每种组件尺寸设置为多少合适？”常常是一个令人头疼的问题，例如 “段落字体的大小应该为 18px 还是 19px 或是 20px 呢？”、“如果某个 div 的高度为 31px 那为什么不能是 32px 或 33px 呢？“。此类问题常常困扰着开发人员和设计师，这也是 Markdown 产生的原因之一。不过 Markdown 文本最终仍然会被解析为 HTML 文本，并使用 CSS 定义样式。

为解决上述问题，我们引入选择限制（limit choices），从连续的 font-size 范围内抽取少许离散的点，这些点集产生的集合称为系统（system），比较典型的有：

• 字体系统:

  - FONT SIZE SYSTEM (px)
  10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 /
  44 / 52 / 62 / 74 / 86 / 98

• 间隔系统

  - SPACING SYSTEM (px)
  2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 /
  64 / 80 / 96 / 128

形式看起来很简单，但是很有用。实际开发时，我们只需要从上述 SYSTEM 里逐一选择数据进行测试，直到选择满意的数据即可。

如对于较长的段落，font-size 通常在 20px 左右，因此我们在 18px，20px，24px 中选择做选择即可，节省了开发时间。