HTML 基础

CSS 基础

CSS 选择器

概述

竞争处理

盒模型

概述

元素定位

伪类

CSS 布局

传统 float-clearfix hack 布局

flex 布局

grid 布局

前端设计原则

选择限制

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

然而,具体实现时,“每种组件尺寸设置为多少合适?”常常是一个令人头疼的问题,例如 “段落字体的大小应该为 18px 还是 19px 或是 20px 呢?”、“如果某个 div 的高度为 31px 那为什么不能是 32px33px 呢?”。此类问题常常困扰着开发人员和设计师,这也是 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 左右,因此我们在 18px20px24px 中选择做选择即可,节省了开发时间。

组件与布局

响应式设计

Omnifood 项目实战