很多人学前端时，HTML 像骨架，CSS 像皮肤和衣服。没有 CSS，网页也能显示内容，但会像一份没有排版的文档。CSS 的全称是层叠样式表，它负责颜色、字体、间距、布局、动画以及不同屏幕下的显示方式。掌握 CSS 不只是记住属性，更重要的是理解它背后的规则：层叠、继承、盒模型、格式化上下文和响应式设计。
一、从选择器开始
CSS 规则通常由选择器和声明块组成。比如 p { color: #333; line-height: 1.8; }。p 是选择器，color 和 line-height 是属性，#333 和 1.8 是值。常见选择器有标签选择器、类选择器、ID 选择器、属性选择器、伪类选择器和伪元素选择器。实际开发中，类选择器最常用，因为它可复用、语义清晰，也方便和组件化思维配合。
二、盒模型是布局的基石
每个元素都可以看成一个盒子。盒子由内容、内边距、边框和外边距组成。content 是文字或图片本身，padding 是内容和边框之间的空间，border 是边框，margin 是盒子与盒子之间的距离。默认情况下，width 只表示内容宽度，加上 padding 和 border 后元素会变大。很多人会设置 box-sizing: border-box，让 width 包含 padding 和 border，这样计算尺寸更直观。
三、正常流、浮动与定位
页面默认按照正常流排列：块级元素从上到下，行内元素从左到右。浮动曾经是布局主力，现在更多用于文字环绕或特殊效果。定位有 static、relative、absolute、fixed、sticky。absolute 会脱离正常流，相对于最近的定位祖先元素定位；fixed 相对于视口定位；sticky 在滚动到阈值时变成固定。定位很强大，但不要滥用，否则页面结构会变得难以维护。
四、Flex 与 Grid
现代 CSS 布局离不开 Flexbox 和 Grid。Flex 适合一维布局，比如导航栏、按钮组、垂直居中。给父元素设置 display: flex，然后用 justify-content 控制主轴对齐，用 align-items 控制交叉轴对齐。Grid 适合二维布局，可以同时控制行和列。display: grid 配合 grid-template-columns 和 gap，能轻松做出卡片列表、后台面板和复杂页面结构。记住：Flex 是一维，Grid 是二维。
五、响应式设计
用户可能用手机、平板、笔记本或大屏显示器访问网页。响应式设计让页面根据屏幕尺寸调整。常见做法是使用相对单位，比如 rem、em、百分比、vw、vh，配合媒体查询。移动优先是一种好习惯：先写小屏幕样式，再用 min-width 媒体查询逐步增强大屏幕布局。图片可以用 max-width: 100% 防止溢出。字体大小、间距和列数都可以随屏幕变化。
六、CSS 变量与可维护性
CSS 变量让主题和设计系统更容易维护。定义时用 --primary-color: #2563eb; 使用时用 var(--primary-color)。变量可以放在 :root 中作为全局变量，也可以放在组件作用域内。配合 BEM 命名、工具类或 CSS Modules，可以减少样式冲突。命名要表达用途，而不是表达外观，比如用 .button-primary 而不是 .blue-button，因为颜色以后可能会变。
七、动画与过渡
过渡用于状态变化，比如悬停、聚焦、展开。transition: all 0.3s ease 可以让变化更平滑。动画用 @keyframes 定义关键帧，再通过 animation 应用。动画要克制，时间通常控制在 150ms 到 400ms 之间。要注意可访问性，对 prefers-reduced-motion 用户减少动画，避免眩晕和不适。
八、常见坑
第一，外边距折叠：相邻块级元素的上下 margin 可能合并。第二，高度塌陷：父元素包含浮动子元素时可能高度为 0，可以用 clearfix 或 BFC 解决。第三，选择器权重：ID 权重高，!important 更难覆盖，尽量少用。第四，z-index 只在定位元素或某些格式化上下文中生效。第五，行内元素设置宽高可能无效，需要改成 inline-block 或 block。
九、学习建议
不要只背属性。先理解盒模型、层叠、继承、正常流，再学 Flex 和 Grid。多打开浏览器开发者工具，查看计算样式、盒模型图和布局叠加层。多临摹真实网站，从导航、卡片、表单开始。遇到问题先最小化复现，再逐步排查。CSS 看起来简单，但真正写好需要审美、结构和工程化思维。
结语
CSS 是前端开发中最有表现力的一部分。它既能实现像素级还原，也能创造流畅的交互和响应式体验。学好 CSS，不是记住所有属性，而是建立一套稳定的思维模型：元素如何排列，尺寸如何计算，样式如何层叠，页面如何适应不同设备。只要持续练习，你会发现 CSS 不只是美化工具，更是构建用户体验的基础。