绝对长度单位:
1. px (像素):
- 最常用的单位,相对于显示器分辨率。
width: 200px;
2. in (英寸), cm (厘米), mm (毫米), pt (磅), pc (派卡):
- 基于实际物理长度的单位。
width: 2in;
相对长度单位:
3. em:
- 相对于父元素字体大小的倍数。
font-size: 1.5em;
4. rem:
- 相对于根元素(<html>)字体大小的倍数。
font-size: 1.2rem;
5. vw (视窗宽度), vh (视窗高度), vmin, vmax:
- 相对于视窗的宽度、高度或宽度和高度中较小、较大的一个。
width: 50vw;
百分比单位:
6. %:
- 相对于父元素的百分比。
width: 50%;
角度单位:
7. deg (度), rad (弧度), grad (梯度), turn:
- 用于旋转和倾斜等样式。
transform: rotate(45deg);
时长单位:
8. s (秒), ms (毫秒):
- 用于动画、过渡等时间相关的属性。
animation-duration: 2s;
颜色单位:
9. 十六进制颜色:
- 例如,#ff0000 表示红色。
color: #336699;
10. rgb, rgba:
- 使用红、绿、蓝三原色的值表示颜色。
background-color: rgba(255, 0, 0, 0.5);
这只是 CSS 单位的一小部分,根据具体需求和属性,你可能会选择不同的单位。理解这些单位的用法将有助于更好地控制页面的布局和样式。
转载请注明出处:http://www.pingtaimeng.com/article/detail/12588/CSS