1. line-height 最好用无单位值
css
/* 推荐 */
body {
line-height: 1.6;
}
/* 不推荐 */
body {
line-height: 1.6em; /* 会被子元素继承计算后的值 */
}无单位的 line-height 会在每个子元素上基于自己的 font-size 重新计算，而不是继承父元素的计算结果。
2. vertical-align 只对 inline 和 table-cell 元素生效
很多人以为 vertical-align: middle 能让 div 里的内容垂直居中，实际上它只对 inline、inline-block、table-cell 元素有效。块级元素垂直居中还是得用 flexbox。
3. z-index 不是谁都能用
z-index 只对 position 不是 static 的元素，或者设置了 opacity（小于 1）、transform、filter 等属性的元素生效。
4. margin 折叠
相邻块级元素的上下 margin 会发生折叠，取较大的值。解决方案：
- 父元素设置
overflow: hidden - 使用
padding代替margin - 使用 Flexbox/Grid 布局（不会发生折叠）
5. 100vw 包含滚动条
100vw 是视口宽度，包含了滚动条的宽度。如果你的页面有垂直滚动条，width: 100vw 会导致水平滚动条出现。用 100% 更安全。
这些都是踩过坑才知道的细节，写 CSS 的时候多留意能省不少调试时间。