零基础学CSS应先掌握文档流、盒模型、颜色字体文本控制三大基础，再学布局；需手写margin/padding/border、用border-box、同步练习文本属性、通过冲突实验理解优先级，最后再接触Flex/Grid。
零基础学 CSS，别从 display: flex 或 grid 开始——它们依赖对盒模型和层叠逻辑的直觉，而初学者恰恰缺这个直觉。先建立「元素怎么占位、怎么染色、怎么响应文字」这三层肌肉记忆，再碰布局。
先搞定「文档流 + 盒模型」这两个底层事实
CSS 不是画图工具，它是描述 HTML 元素在页面中“如何存在”的规则。没理解这一点，所有样式都会显得随机。
-
margin、padding、border的方向性（top/right/bottom/left）必须手写几遍，不要只靠 IDE 补全 - 用
box-sizing: border-box作为默认，避免宽度计算反直觉（尤其做固定宽高容器时） - 验证盒模型是否生效：给任意元素加
outline: 1px solid red，它不侵占空间，能清晰看到 margin 区域 - 别急着记
inline和block的全部区别，先记住：文字内容默认 inline，容器类标签（div、p）默认 block；想让链接变块级？加display: block就行
颜色、字体、文本控制必须同步练，不是“装饰环节”
新手常把颜色字体当“最后美化”，结果发现改个 font-size 会撑破容器、line-height 影响垂直居中、color 在伪类里失效——因为这些属性和盒模型、继承、层叠深度强耦合。
-
color只作用于文本节点及其后代文字，对背景、边框无效；想改图标颜色？得看图标是svg还是字体图标 -
font-size是相对单位基准：em相对于父元素，rem相对于根html；初学建议统一用px，等理解继承链后再切 -
text-align: center只对 inline 内容有效；想让div水平居中？得用margin: 0 auto（且该div有明确宽度） - 测试
line-height：设为1看文字是否紧贴上下边，设为3看行间距是否撑开整个容器——它本质是行框高度，不是“字间距”
选择器优先级必须用错误来建立手感
你写的样式没生效？90% 是优先级被覆盖，而不是语法写错。光背“id > class > tag”没用，得亲手制造冲突再解决。
- 写两个规则作用于同一元素，比如：
button { color: blue; } .my-btn { color: red; }然后给按钮加class="my-btn"，观察结果——这就是 class 覆盖 element 的现场 - 故意用
!important强行生效一次，再删掉，对比浏览器 DevTools 里被划掉的样式——那里显示的就是被更高优先级干掉的规则 - 避免嵌套过深的选择器：
div#header nav ul li a不仅难维护，还容易被更短的a:hover反杀（因 id 权重高，但 hover 是伪类，权重叠加后未必赢） - 现代项目推荐 BEM 命名（如
btn btn--primary），本质是用 class 的可预测性替代复杂选择器
布局留到盒模型+定位+流特性都稳定之后
Flex 和 Grid 是“声明式布局”，但它们的轴线方向、对齐方式、换行行为，全建立在你对 width、position、float（哪怕只了解它已过时）、overflow 的实操经验上。跳步等于在沙上建楼。
- 先手动实现一个三栏等高布局：用
float+clear，再用display: table-cell，最后用flex——三种写法跑一遍，你就知道 flex 省了什么 -
position: relative是定位起点，不是“相对谁定位”，而是“为后代 absolute 提供坐标系”；position: absolute的top: 0是相对最近的relative/absolute/fixed祖先，不是视口 - 用
overflow: hidden清除浮动是黑魔法，但要
明白它触发了 BFC（块级格式化上下文）——这是理解很多“莫名撑开”“莫名截断”问题的钥匙
明白它触发了 BFC（块级格式化上下文）——这是理解很多“莫名撑开”“莫名截断”问题的钥匙最难的不是记住属性，是判断“此刻该动哪个属性”。比如文字溢出隐藏，有人翻文档找 text-overflow，却忘了它必须配合 white-space: nowrap 和 overflow: hidden 才生效——三个属性像齿轮咬合，缺一不可。这种关联感，只能靠改一行、看一眼、再改一行的节奏堆出来。
