29 条 CSS 高级技巧清单（Modern CSS）
本帖最后由 中英文泡椒 于 2026-8-14 18:22 编辑1. 使用 CSS Reset
使用 normalize.css 或简单的重置规则来抹平不同浏览器之间的默认样式差异。
2. 继承 box-sizing
从 html 继承 box-sizing: border-box，这样在修改第三方组件样式时会更方便。
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
3. 使用 unset 替代重置所有属性
当你想重置一个元素的所有样式时，不必列出每个属性，使用 all: unset 即可。
4. 使用 :not() 简化列表边框
不再需要为最后一个元素单独写 border-bottom: none。
.nav li:not(:last-child) { border-bottom: 1px solid #ccc; }
5. 检查本地字体是否已安装
在 src 中优先使用 local()，避免下载已有的字体。
@font-face {
font-family: 'MyFont';
src: local('MyFont'), url('myfont.woff2')format('woff2');
}
6. 为 body 添加 line-height
不要给每个 p 或 h1 单独加行高，直接在 body 上统一设置，增强可读性。
7. 垂直居中一切 (Flexbox)
利用 Flexbox 简单的两行代码即可实现水平垂直居中。
.container { display: flex; align-items: center; justify-content: center; }
8. 逗号分隔列表
使用伪类为列表项动态添加逗号，且最后一个项不显示。
ul li:not(:last-child)::after { content: ","; }
9. 使用负值 nth-child 选择元素
如果你想选择前 n 个元素（例如前 3 个）：
li:nth-child(-n+3) { color: red; }
10. 使用 SVG 图标
SVG 在任何分辨率下都保持清晰，且文件体积小，易于通过 CSS 控制（如 fill 颜色）。
11. “空洞的猫头鹰”选择器 (* + *)
为所有跟随在另一个元素后面的元素添加边距，非常适合控制内容间距。
.content * + * { margin-top: 1.5em; }
12. 使用 max-height 实现纯 CSS 手风琴
利用 max-height 和 transition 实现平滑的折叠效果（比 display: none 更好）。
13. 使表格单元格等宽
使用 table-layout: fixed 让表格列宽平均分配。
table { table-layout: fixed; }
14. 使用属性选择器处理空链接
为没有 href 或 href 为空的 <a> 标签添加特殊样式。
a:after, a:after { content: " (empty link)"; }
15. 样式化“默认”链接
使用 :any-link 伪类快速设置所有未访问和已访问链接的样式。
16. 保持图像比例 (Intrinsic Ratio)
使用 aspect-ratio 属性（现代浏览器）或传统的百分比 padding 技巧。
img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
17. 样式化损坏的图像
利用伪元素在图片加载失败（显示破裂图标）时提供更优雅的反馈。
img:before { content: "We're sorry, the image is broken"; display: block; }
18. 使用 rem 设置字号，em 设置间距
rem 保证了全局一致性，而 em 让间距相对于字体大小缩放。
19. 自动播放静音视频
在移动端，视频必须设置 muted 属性才能触发 autoplay。
20. 使用 :root 实现响应式字体
利用 CSS 变量和 calc 在 :root 下定义字体，随屏幕宽度平滑变化。
:root { font-size: calc(1vw + 1vh + 0.5vmin); }
21. 样式化 <input type="range">
通过 ::webkit-slider-runnable-track 等伪元素来自定义滑动条样式。
22. 统一表单控件样式
使用 appearance: none 移除系统默认样式，从而实现完全自定义的按钮和输入框。
23. 避免使用 !important
尽量通过提高选择器权重（Specificity）来覆盖样式，而不是滥用 !important。
24. 使用 object-fit
让图片像背景图一样填充容器，而不被拉伸变形。
img { width: 200px; height: 200px; object-fit: cover; }
25. 使用 pointer-events: none 禁用点击
可以穿透覆盖层点击到底部的元素，或暂时禁用按钮点击。
26. 禁用文本选择
在 UI 按钮或图标上使用 user-select: none，防止用户误选中文字。
27. 使用 scroll-behavior: smooth
无需 JavaScript，只需一行 CSS 即可实现锚点跳转时的平滑滚动。
html { scroll-behavior: smooth; }
28. 使用 CSS 变量
减少重复代码，方便实现主题切换（如深色模式）。
:root { --main-color: #ff0000; }
.button { color: var(--main-color); }
29. 使用 :where() 和 :is()
使用 :is() 简化复杂的选择器，使用 :where() 降低选择器权重。
/* 简化 */
:is(h1, h2, h3) { margin-bottom: 1rem; }
鱼油你好！
这份 29 条 CSS 高级技巧清单 非常实用，几乎覆盖了日常开发中最容易踩坑和提效的场景。下面我帮你划一下重点，并补充一点使用注意。
[*] 基础统一：第 1、2、3 条是“地基”，建议一开始就配好，尤其是 box-sizing: border-box。
[*] 选择器进阶：第 4、8、9、11、14、15、29 条能大大简化代码，推荐掌握 :is() 和 :where() 的权重差异。
[*] 布局与尺寸：第 7、12、13、16、24 条是高频需求，Flexbox 居中、aspect-ratio 和 object-fit 一定要熟练。
[*] 字体与响应式：第 5、6、18、20 条，记住“字号用 rem，间距用 em”这个黄金法则。
[*] 交互与体验：第 25、26、27 条，一行 CSS 就能提升体验，特别是 scroll-behavior: smooth。
一些补充提醒：
[*] 第 10 条 SVG 图标 强烈建议使用，配合 fill 变量可以轻松实现多主题。
[*] 第 17 条“样式化损坏图片”在部分浏览器中可能不生效，因为 img 是替换元素，伪元素支持有限。建议使用 onerror 或 alt 文本兜底。
[*] 第 20 条的 calc(1vw + 1vh + 0.5vmin) 很有趣，但注意在超宽屏或小屏上要配合 clamp() 防止字号过大或过小。
[*] 第 22 条的 appearance: none 虽然能重置表单样式，但某些浏览器（如 Firefox）对 select 的下拉箭头处理不同，需要额外加背景图。
[*] 第 23 条“避免 !important” 是重点中的重点，平时写 CSS 就应该用“低权重 + 合理嵌套”来管理样式，而不是靠后期硬覆盖。
最后建议：
把这 29 条当成一份“自查清单”，每写完一个页面就对照一遍，养成习惯后你的 CSS 代码质量和效率都会明显提升。如果对其中某一条有疑问，欢迎随时发帖讨论！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]