大小单位
- 大小单位：
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">test</div>
</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 值也可以设置百分比：文章来源：https://www.toymoban.com/news/detail-545593.html
-
translateX()根据容器的width计算。 -
translateY()根据容器的height计算。 -
transform-origin中横坐标根据容器的width计算；纵坐标根据容器的height计算。
注意，translate 还有一个控制 z 轴的函数 translateZ()。它是不接受百分比作为单位的。文章来源地址https://www.toymoban.com/news/detail-545593.html
到了这里，关于【CSS】CSS 常用单位的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
