MARGIN / BORDER / PADDING / CONTENT

同一份骨架,完全不同的气质

颜色、间距、层级和屏幕宽度,决定一页好不好读。

CSS 不改内容,只改内容被看见的方式。同一段 HTML,换一套样式就可以从文档变成海报,从后台变成营销页。真正难的不是记属性,而是让阅读节奏稳定。

选择器

先命中元素,再谈外观。类名比层级选择器更耐改,ID 适合锚点而不是铺满样式。选择器写得越具体,以后越难拆。

盒模型

每个元素都是盒子:内容、内边距、边框、外边距。宽度算错、高度被撑破、两栏对不齐,多半是盒子在打架。

Flex 与 Grid

Flex 擅长一条线上的对齐,Grid 擅长二维分区。导航、卡片墙、后台表单,选对布局模型能少写一半补丁。

响应式

媒体查询不是把桌面版缩小,而是按屏幕重新分配重点。手机上先保证阅读和点击,再谈装饰。

变量与主题

把品牌色、字号和圆角收进变量,换肤、暗色模式和活动页才不会复制出三套互不相认的样式。