在前面的 CSS 学习中，我更多是在解决「布局怎么排」。
而到了这一阶段，我明显感觉到重点开始变化了：
- 不只是“能不能排出来”
- 而是“页面加载快不快、细节像不像、体验好不好”
这一篇主要围绕 精灵图、字体图标、CSS 三角、界面样式与常见布局技巧，都是在真实项目中非常高频的内容。
如果说前面的 CSS 是“骨架”，那这一阶段更像是在打磨“细节和性能”。
一、为什么要用精灵图（CSS Sprites）
在一个真实网页中，经常会看到大量的小图标：
- 按钮图标
- 装饰性背景
- 列表小标识
如果每一个小图标都是一张独立图片，会发生什么？
结论只有一个：
HTTP 请求数量暴增，页面加载速度变慢。
精灵图的核心思想
精灵图并不复杂，本质就是一句话：
把多个小背景图合并成一张大图，只请求一次。
然后通过 background-position 精确显示其中某一小块区域。
使用精灵图时需要记住的关键点
-
精灵图主要用于 背景图片
-
通过
background-position来控制显示位置 -
网页坐标中：
- x 向右是正值，向左是负值
- y 向下是正值，向上是负值
-
实际开发中，background-position 多数是负值
-
一定要 精确测量尺寸和坐标
一个非常重要的认知
精灵图不是为了“写得炫”，而是为了：
- 减少请求次数
- 提高页面性能
这是性能优化意识的第一次出现。
二、字体图标：比图片更灵活的图标方案
在使用精灵图一段时间后，很快就会遇到它的缺点：
- 图片体积依然不小
- 缩放会失真
- 改颜色、加动画非常麻烦
于是，字体图标出现了。
什么是字体图标
字体图标展示的是图标，但本质是 字体文件。
这意味着：
- 它可以像文字一样设置颜色、大小
- 可以加阴影、透明度、旋转
- 不会失真
- 兼容性非常好
字体图标的适用场景
经验总结下来很清晰：
- 简单、通用的小图标 → 字体图标
- 复杂、有细节的图片 → 精灵图或普通图片
两者不是替代关系，而是互补。
字体图标的基本使用流程
-
在图标网站选择并下载图标
推荐：- iconfont（阿里）
- icomoon
-
引入字体文件（fonts 目录）
-
使用
@font-face声明字体 -
在 HTML 中使用对应的字符
-
给元素设置
font-family
当你第一次意识到：
“一个图标，其实就是一个字”
CSS 的边界会突然被拓宽。
三、CSS 三角：原来三角形不用图片
这是一个非常经典、也非常“前端”的技巧。
CSS 三角的原理
CSS 中，当一个元素：
- 宽高为 0
- 边框存在
那么边框的交汇处就会形成三角形。
通过控制：
- border 的宽度
- border 的颜色
- 哪一条边可见
就可以画出任意方向的三角形。
CSS 三角的关键点
-
宽高必须为 0
-
四个边框都要写
-
不需要的边框颜色设为 transparent
-
为了兼容性，设置：
line-height: 0font-size: 0
实际应用场景
- 下拉菜单小箭头
- 气泡提示
- 电商价格标签（三角缺口）
当你用 CSS 三角做出京东那种价格标签时，会第一次有一种感觉：
“原来前端不是拼图，是造型。”
四、CSS 用户界面样式：提升体验的细节
界面样式的作用只有一个：
让用户操作更自然、更舒服。
鼠标样式 cursor
cursor: pointer;
让用户一眼知道：
这个东西是可以点的。
去掉表单默认轮廓 outline
outline: none;
这是为了自定义样式，同时避免丑陋的默认蓝框。
实际开发中一般会配合：
- 自定义 focus 样式
- 而不是完全“没反馈”
禁止 textarea 拖拽 resize
resize: none;
真实项目中几乎是标配，防止页面被用户拖乱。
五、vertical-align：一个很容易被误解的属性
vertical-align 的使用场景非常固定：
- 行内元素
- 行内块元素
最常见的两个问题
1. 图片和文字不对齐
原因：
图片默认是 基线对齐。
解决方法：
vertical-align: middle;
2. 图片底部出现莫名其妙的空白缝隙
本质原因还是：
行内块元素与基线对齐。
常见解决方案：
- 给图片设置
vertical-align: middle/top/bottom - 或直接
display: block
六、文字溢出显示省略号（非常实用）
单行文本省略号（必须会）
必须同时满足三个条件：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
缺一不可。
多行文本省略号（了解）
多行省略号依赖 WebKit 内核，兼容性一般：
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
实际项目中更推荐：
让后端直接控制返回的字数。
七、常见布局技巧（非常有“经验感”）
这些技巧不会写在 API 文档里，但在真实页面中非常好用。
margin 负值
- 用来压边框
- 用来制造重叠效果
- hover 时配合 z-index 提升层级
文字环绕浮动元素
利用浮动元素 不会压住文字 的特性，
非常适合图文混排。
行内块的巧妙运用
- 行内块 + text-align: center
- 快速实现水平居中
- 常用于分页按钮、导航项
CSS 三角强化
CSS 三角不只是箭头，还可以：
- 做价格标签
- 做角标缺口
- 做装饰性形状
这是“基础技巧 + 设计感”的结合点。
八、CSS 初始化（必须有，但不必纠结）
不同浏览器默认样式不同，所以需要 CSS Reset。
核心目标只有一个：
消除差异，统一起点。
项目中通常直接使用成熟方案（如京东、normalize.css），
而不是自己从零写。
最后的总结
这一阶段的 CSS，让我明显感受到：
-
前端不只是把页面“堆出来”
-
更是在考虑：
- 性能
- 体验
- 细节
- 可维护性
如果说前几天是在学“规则”，
那这一天开始，才是真正学 “怎么像一个前端工程师一样写 CSS” 。
后面我会继续把这些技巧用进完整页面中，而不是停留在 demo。
