17370845950

零基础学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（块级格式化上下文）——这是理解很多“莫名撑开”“莫名截断”问题的钥匙

最难的不是记住属性，是判断“此刻该动哪个属性”。比如文字溢出隐藏，有人翻文档找 text-overflow，却忘了它必须配合 white-space: nowrap 和 overflow: hidden 才生效——三个属性像齿轮咬合，缺一不可。这种关联感，只能靠改一行、看一眼、再改一行的节奏堆出来。