⭐️ css 的单位有哪些，你常用的有哪些

px, %, em, rem, vw/vh

• 使用px，结合 Media Query 进行阶梯式的适配；
• 使用%，按百分比自适应布局；
• em，相对单位，相对于父元素的字体大小。
• rem，也是相对单位，相对于根元素html。使用rem，结合html元素的font-size来根据屏幕宽度适配；
• 使用vw、vh，直接根据视口宽高适配。（viewport height / viewport width）
• 把视口宽高都分成100份
• 一般用在给图片设置宽高 .img { width: 60vw; height: 40vh }

1. 在视觉稿要求固定尺寸的元素上使用px。比如1px线，4px的圆角边框。
2. 在字号、（大多数）间距上使用rem。
3. 慎用em。

慎用 em 的原因

• em**会叠加计算。**在这个机制下太容易犯错了，因为你不知道这段css指定的字号具体是多少。

<!-- HTML -->
<span>
    abc
    <span>def</span>
    abc
</span>

// CSS
span {font-size: 1.5em;}

实际效果：

先要搞清楚em的计算原理，它是根据当前元素的字号按比例计算的。

外层span的字号是16px（浏览器默认值），所以1.5em之后是24px。由于字号是继承的，导致内层span的字号继承过来是24px，再经过1.5em之后就成了36px。

所以，就算要用em的话，尽量不要用在继承属性（font-size）上，除非你真的清楚你在做什么！