必须优先掌握四类核心属性：display、position、box-sizing决定元素占位；margin、padding、border、width/height构成盒模型边界；flex相关属性实现一维布局；grid入门三件套支撑二维布局，覆盖80%页面需求。
不需要记住全部，CSS 属性有 300+ 个，但日常开发中高频使用的不到 50 个；真正该花时间掌握的是「核心模型 + 常用属性组合 + 浏览器默认行为」。
哪些 CSS 属性必须优先理解透
不是按字母顺序记，而是按布局影响层级来分组。重点吃透以下四类，覆盖 80% 的页面实现需求：
-
display、position、float（已少用但需懂原理）、box-sizing—— 决定元素怎么“占位” -
margin、padding、border、width/height—— 盒模型的实操边界 -
flex相关：display: flex、justify-content、align-items、flex-direction、flex-wrap -
grid入门三件套：display: grid、grid-template-columns、grid-gap（或gap）
这些属性之间有强依赖关系。比如没搞清 box-sizing: border-box 和默认的 content-box 差异，调 width 就总对不上像素；不理解 display: flex 会把子元素变成 flex item，align-items 就永远不起作用。
哪些属性可以先跳过或只查文档
存在感低、场景极窄、或已被现代方案替代的属性，初期不用投入记忆成本：
立即学习“前端免费学习笔记（深入）”；
-
clip（已废弃，用clip-path替代） -
text-align: justify在中文排版中基本无效，且易引发断词异常 -
outline系列（仅用于可访问性聚焦样式，业务代码极少主动设） - 所有以
-webkit-、-moz-开头的旧前缀属性（除非维护老项目） -
page-break-系列（打印样式，Web 页面几乎不用）
这类属性在 MDN 上搜到后，看一眼语法和典型用例即可，不必背值列表。真遇到对应需求时再查，效率更高。
怎么练才不白记：用「场景反推属性」代替死记硬背
与其对着列表背 vertical-align 有哪 7 个关键字，不如直接写一个需要垂直居中的小例子，尝试失败几次，再去看文档里它到底对谁生效（只对 inline、table-cell 等特定 display 值有效）。
推荐三个最小闭环练习：
- 用纯 CSS 画一个带阴影和圆角的按钮，只允许用
background、border-radius、box-shadow、padding、color—— 强制你理解盒模型和层叠顺序 - 把 3 个
div水平等宽排列，中间那个固定 200px，两边自适应 —— 逼你对比flex、grid、calc()三种解法差异 - 让一段文字在容器内水平垂直居中（容器尺寸不定）—— 你会自然踩进
line-height的坑，然后发现它只对单行有效，最后转向flex或grid
每次练习后，打开浏览器开发者工具，修改属性值实时观察变化。比抄十遍语法印象深得多。
容易被忽略的「隐性知识」比属性名更重要
新手常卡住的地方，往往不是不会写某个属性，而是不知道：
- 哪些属性会触发新的 BFC（如
overflow: hidden、display: flow-root），用来解决浮动塌陷或 margin 合并 -
z-index只对定位元素（position不为static）生效，且层级比较是在同一个 stacking context 内进行 -
em是相对于父元素字体大小，rem是相对于根元素（html），但若html字体被缩放（如用户设置系统字体放大），rem也会跟着变 - CSS 自定义属性（
--main-color）不能直接用于@media条件判断，得配合clamp()或 JS 读取
这些不写在属性手册首页，却决定你能不能稳定控住样式。建议每学一类属性，顺手查下它的「影响范围」和「触发条件」，比单纯记取值列表有用十倍。
