【CSS】CSS 常用单位

大小单位

• 大小单位：px。
• 字体相对单位：em、rem；根据 [font-size] 进行计算。
• 视窗相对单位：vm、vh、vmax、vmin；根据 [视窗大小] 进行计算。

em、rem

• em：相对于元素本身的 font-size 值。如果元素本身没有设置 font-size，会继承父元素的 font-size。
• rem：相对于根元素（html 元素）的 font-size 值。

假如一个元素的 font-size 值为 20px，则 1.5em 为 30px。

vw、vh、vmax、vmin

• vw：视窗宽度的百分比。
• vh：视窗高度的百分比。
• vmax：vh 和 vw 中的较大值。
• vmin：vh 和 vw 中的较小值。

假如一个浏览器的高度是 800px，宽度为 1200px：
那么 1vh 的值就是 8px、 1vw 的值就是 12px、 1vmin 就是 8px，1vmax 就是 12px。

时间单位

• CSS 中的时间单位有 2 个：s、 ms。
• 1s = 1000ms。
• 时间单位主要用于动画的设置，用于定义持续时间或延迟时间：

div {
    transition-duration: 2.5s;
}

角度单位

• CSS 中的角度单位有 4 个：deg、grad、rad、turn。
• 当旋转值为正值时，元素会顺时针旋转；当旋转值为负值时，元素会逆时针旋转。
• 角度单位一般用于设置元素的旋转，包括 2D 旋转、3D 旋转。也可以用于设置线性渐变的方向：

background: linear-gradient(45deg, #000, #fff);

deg

• deg (Degress)，表示度。
• 一个圆总共 360 度。

transform: rotate(2deg);

grad

• grad (Gradient)，表示梯度。
• 一个圆总共 400 梯度。

transform: rotate(2grad);

rad

• rad (Radians)，表示弧度。
• 一个圆总共 2π 弧度（即 2 * Math.PI 弧度）。

transform: rotate(90rad);

turn

• turn (Turns)，表示圈。
• 一个圆总共一圈。

transform: rotate(0.5turn);

百分比单位

• 不同属性使用 % 的效果可能会不一样。

标准盒模型中的百分比

• width：根据 [包含块] 的 width 进行计算。
• height：根据 [包含块] 的 height 进行计算。
• padding、margin：根据 [包含块] 的 width 进行计算。
• border 不接受百分比作为单位的。

<div class="parent">
    <div class="son">testdiv>
div>

div.parent {
    width: 1000px;
    height: 500px;
    background-color: #ccc;
    overflow: hidden;
}

div.son {
    width: 10%;
    height: 10%;
    background-color: #999;
    margin: 10%;
    padding: 10%;
}

文本中的百分比

• font-size：根据父元素的 font-size 进行计算。
• line-height：根据当前元素的 font-size 进行计算。
• vertical-align：根据当前元素的 line-height 进行计算。
• text-indent：如果是水平的，则根据当前元素的 width 进行计算；如果是垂直的，则根据 height 进行计算。

定位中的百分比

right、left / top、bottom 都是根据 [包含块] 的 width / height。

变换中的百分比

CSS 中的 transform 属性中的 translate 和 transform-origin 值也可以设置百分比：

• translateX() 根据容器的 width 计算。
• translateY() 根据容器的 height 计算。
• transform-origin 中横坐标根据容器的 width 计算；纵坐标根据容器的 height 计算。

注意，translate 还有一个控制 z 轴的函数 translateZ()。它是不接受百分比作为单位的。