HTML 基础

CSS 基础

CSS 选择器

概述

竞争处理

盒模型

概述

元素定位

伪类

CSS 布局

传统 float-clearfix hack 布局

flex 布局

grid 布局

前端设计原则

选择限制

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

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

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

  • 字体系统:

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

  • 间隔系统

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

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

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

组件与布局

响应式设计

Omnifood 项目实战