CSS 看起来简单，真正写好却不容易。不少人在入门阶段靠复制粘贴和反复调试也能把页面做出来，但一旦遇到布局错乱、样式覆盖混乱、适配多端失效等问题，就会发现自己对 CSS 的理解存在大量漏洞。想把 CSS 从会用提升到熟练，需要一条清晰的学习路径：先夯实基础概念，再掌握现代布局方案，最后学会组织代码和做动效。本文按照这个顺序展开，帮你梳理从基础到中级需要掌握的核心内容。
一、先把基础打牢：选择器、盒模型与优先级
选择器是 CSS 的入口，但很多人只停留在 class 和 id 的层面。实际上，理解选择器的关键在于两点：一是掌握组合用法，比如后代选择器、子选择器、相邻兄弟选择器的区别；二是理解优先级计算规则。优先级遵循 id > class > 标签 的权重体系，同权重下后写的规则生效，而 !important 会打破这套规则，应当尽量避免滥用。
盒模型是 CSS 最核心的概念之一。每个元素都由内容区、内边距、边框和外边距组成，而 box-sizing 属性决定了宽高的计算方式。默认的 content-box 下，实际占用宽度等于 width + padding + border，这也是很多新手设置宽度后元素莫名变宽的原因。将 box-sizing 设为 border-box 后，宽度计算包含内边距和边框，布局会直观得多。
/* 全局重置盒模型，几乎所有项目都会加 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* 选择器优先级示例 */
#header .nav-item /* 权重：1个id + 1个class */
.nav-item /* 权重：1个class */
li /* 权重：1个标签 */
.nav-item {
width: 200px;
padding: 16px;
border: 1px solid #ccc;
/* border-box 下，元素总宽度仍是 200px */
}理解了盒模型，处理外边距合并（margin collapse）就水到渠成。相邻块级元素的垂直外边距会合并为一个较大值，父子元素之间也可能出现穿透现象，解决办法包括触发 BFC、使用 padding 隔离或改用 Flex 布局。这些细节在基础阶段弄明白，后面写布局时能少走很多弯路。
二、布局进阶：从浮动定位到 Flexbox 与 Grid
传统布局手段是浮动和定位。float 最初用于文字环绕图片，后来被用来做分栏布局，但它会导致父元素高度塌陷，需要清除浮动来补救。position 的几个取值各有用途：relative 相对自身偏移且不脱离文档流，absolute 相对最近的非 static 祖先定位，fixed 相对视口定位，sticky 则是滚动到阈值后吸附。理解它们的参照系差异，是用好定位的前提。
现代布局的主力是 Flexbox 和 Grid。一句话区分：Flexbox 面向一维布局，Grid 面向二维布局。做导航栏、工具条、单行卡片，用 Flexbox；做整体页面骨架、复杂网格，用 Grid。两者还能嵌套使用，外层 Grid 定结构，内层 Flex 排内容。
/* Flexbox：一行内自动分配空间 */
.nav {
display: flex;
justify-content: space-between; /* 主轴两端对齐 */
align-items: center; /* 交叉轴垂直居中 */
gap: 16px;
}
/* Grid：二维网格布局 */
.page {
display: grid;
grid-template-columns: 240px 1fr; /* 侧边栏固定宽，主内容自适应 */
grid-template-rows: 60px 1fr;
grid-template-areas:
"header header"
"sidebar main";
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }学习 Flexbox 时重点吃透 flex: 1 这种简写的展开形式——它等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，很多人因为不了解这一点，在设置 flex: 1 后发现元素内容被压缩却找不到原因。学习 Grid 则要理解 fr 单位、auto-fill 与 minmax 的组合，这条组合拳可以用几行代码实现响应式卡片墙，不需要写任何媒体查询。
三、中级必备：响应式设计与过渡动画
响应式设计的核心是媒体查询加相对单位。px 是绝对值，% 相对父元素，rem 相对根字号，vw 和 vh 相对视口。移动优先的写法是先写小屏样式，再用 min-width 向大屏扩展，这种顺序能让代码更简洁，也符合流量以移动端为主的事实。
/* 移动优先：默认单列，768px 以上变两列 */
.cards {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.cards {
grid-template-columns: repeat(4, 1fr);
}
}
/* 无媒体查询的响应式卡片墙 */
.photo-wall {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}动画方面，中级阶段要掌握 transition 和 animation 的分工。transition 适合状态切换的补间效果，比如悬停变色；animation 配合 @keyframes 适合循环或复杂的多阶段动画。性能上要记住一条原则：优先使用 transform 和 opacity 做动画，因为它们由合成器处理，不触发重排重绘；尽量避免对 width、top 这类几何属性做动画。
/* 悬停上浮效果：只用 transform，性能好 */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
/* 加载旋转动画 */
.spinner {
width: 32px;
height: 32px;
border: 3px solid #eee;
border-top-color: #3498db;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}四、代码组织与进阶方向
到了中级阶段，写不出问题的 CSS 不够，还要写得让人看得懂。首先是命名规范，BEM 是一种被广泛验证的方案，格式为 块__元素--修饰符，例如 card__title--active，它能有效避免命名冲突，也让样式与组件的对应关系一目了然。其次是合理拆分文件，把变量、重置样式、布局、组件样式分开管理，配合 Sass 等预处理器或原生 CSS 变量提高复用率。
/* CSS 变量：统一管理主题色 */
:root {
--color-primary: #3498db;
--color-danger: #e74c3c;
--spacing-unit: 8px;
}
.button {
background: var(--color-primary);
padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
}
/* 暗色主题只需覆盖变量 */
[data-theme="dark"] {
--color-primary: #2c3e50;
}再往后进阶，可以关注几个方向：CSS 新特性如容器查询、级联层（@layer）、子网格；工程化方面是 Tailwind 等原子化 CSS 与 CSS-in-JS 的取舍；深入原理则是 BFC、层叠上下文、重排重绘机制这些面试高频考点。建议边做项目边补理论，每学一个特性就找一个小场景练手，比单纯看文档记忆要牢固得多。坚持一段时间后，你会发现 CSS 不再是玄学，而是一套逻辑清晰、可以推理的语言体系。