CSS3单位权威指南：从基础到高级应用

最新推荐文章于 2025-12-05 21:25:13 发布

原创

最新推荐文章于 2025-12-05 21:25:13 发布 · 1k 阅读

·

32

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#css3 #css #前端

文章目录

CSS3单位权威指南：从基础到高级应用

CSS3单位权威指南：从基础到高级应用

目录

长度单位
角度单位
时间单位
频率单位
分辨率单位
布局单位
总结

长度单位

绝对长度单位

px (像素)

定义：CSS像素，相对于显示设备的分辨率
使用：最常用的固定单位
代码示例：

.box {
   
   
  width: 200px;
  height: 150px;
  font-size: 16px;
}

注意事项：在高DPI设备上，浏览器会自动进行缩放处理

cm (厘米)

定义：实际物理厘米
使用：打印样式表
代码示例：

@media print {
   
   
  .page {
   
   
    width: 21cm;
    height: 29.7cm;
  }
}

注意事项：屏幕显示效果因设备而异

mm (毫米)

定义：实际物理毫米
使用：打印样式表
代码示例：

@media print {
   
   
  .margin {
   
   
    margin: 10mm;
  }
}

in (英寸)

定义：实际物理英寸(1in = 96px = 2.54cm)
使用：打印样式表
代码示例：

@media print {
   
   
  .photo {
   
   
    width: 4in;
    height: 6in;
  }
}

pt (点)

定义：印刷单位(1pt = 1/72in)
使用：字体大小，打印样式
代码示例：

.print-text {
   
   
  font-size: 12pt;
  line-height: 14pt;
}

pc (派卡)

定义：印刷单位(1pc = 12pt)
使用：印刷排版
代码示例：

.print-layout {
   
   
  column-width: 30pc;
}

相对长度单位

em

定义：相对于当前元素的字体大小
使用：响应式布局，字体相关属性
代码示例：

.container {
   
   
  font-size: 16px;
}

.container .child {
   
   
  /* 16px * 1.5 = 24px */
  font-size: 1.5em;
  /* 24px * 2 = 48px */
  padding: 2em;
}

注意事项：em单位会继承父元素的字体大小，容易产生复合效果

rem

定义：相对于根元素(html)的字体大小
使用：响应式布局，统一的比例控制
代码示例：

最低0.47元/天解锁文章

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。