打开一个现成页面，F12 里样式面板密密麻麻，改一行颜色整块布局就塌了。CSS 卡住的人，多数不是属性背得少，是没弄清盒模型和文档流。

网上 CSS 教程一搜一大把，质量参差，入门顺序反而应该固定下来：选择器、盒模型、定位和浮动、flex、grid、媒体查询。每一步都拿一个真实页面练，别从头到尾看视频。

选择器先够用就行

类选择器最常用，id 选择器权重高、后期难覆盖，能不用就不用；后代选择器写两三层还看得懂，写到四五层多半是结构没设计好。伪类里 :hover、:focus、:nth-child 这几个出场率最高。优先级记住一条就够：行内样式最高，id 次之，类、伪类、属性选择器再次，标签选择器最低，同权重时后写的覆盖先写的。

盒模型是布局的地基

默认的 content-box 下，width 只算内容宽度，padding 和 border 往外加，写 200px 实际可能占 240px。开头加一句 box-sizing: border-box，宽度就包含内边距和边框，算起来省心。margin 外边距合并也是新手常踩的坑，上下相邻的块会取较大值。

布局别停留在 float 时代

  • 一行排列、居中对齐、两端分布，用 flex 几行就够，主轴和交叉轴搞清楚。
  • 二维网格用 grid，写模板比嵌套一堆 div 清楚。
  • float 现在主要出现在老项目里，维护时知道清除浮动就行。

单位别一上来就用 px。固定尺寸用 px 没问题，字号和间距可以考虑 rem，做移动端适配时百分比和 vw 更灵活，先把 px 用熟再换单位。

调试时先看元素实际占多大，开发者工具里能直接看到 margin、border、padding 的色块，比盯着代码猜快得多。响应式不用一开始就做，页面在常见桌面宽度下还原好了，再加一两个断点处理手机和平板。练习别贪多，先把一个登录页和一个卡片列表原样还原，颜色、间距、字号都对齐。

查文档用 MDN，改样式用开发者工具实时调。CSS 的难点从来不是语法，是布局思路和浏览器差异，能独立还原页面就算入门了。