CSS 15个长度单位使用区别

CSS有很多长度单位,但不是任何一个单位都适合用于任何设计上。本文将介绍CSS的15个长度单位使用区别。

长度是一个数字后跟一个长度单位,例如10px, 2em等。

设置不同的长度值,使用 px(像素):

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

注意:数字和单位之间不能出现空格。但是,如果值为 0,则可以省略单位。

对于某些 CSS 属性,允许负长度。

长度单位有两种类型:绝对长度相对长度

 
CSS长度单位有两种类型:绝对单位和相对单位

绝对长度

绝对长度单位是固定的,以任何这些单位表示的长度将显示为该大小。

不建议在屏幕上使用绝对长度单位,因为屏幕尺寸变化很大。但是,如果输出介质已知,则可以使用它们,例如用于打印布局。

单位 说明
cm centimeters(厘米)
mm millimeters(毫米)
in inches(英寸) (1in = 96px = 2.54cm)
px * pixels(像素) (1px = 1/96th of 1in)
pt points(点) (1pt = 1/72 of 1in)
pc picas(派卡) (1pc = 12 pt)

* 像素 (px) 与查看设备有关。对于低 dpi 设备,1px 是显示器的一个设备像素(点)。对于打印机和高分辨率屏幕,1px 意味着多个设备像素。

相对长度

相对长度单位指定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放得更好。

单位 说明
em 相对于元素的字体大小(2em表示当前字体大小的2倍)
ex 相对于当前字体的x高度(很少使用)
ch 相对于“0”(零)的宽度
rem 相对于根元素的字体大小
vw 相对于视口宽度
vh 相对于视口高度
vmin 对于视口的较小尺寸
vmax 对于视口的较大尺寸
% 相对于父元素

提示:em 和 rem 单位在创建完美可扩展的布局方面非常实用!
视口  = 浏览器窗口大小。如果视口宽 50 厘米,则 1vw = 0.5 厘米。

文章推荐

  • CSS单位PX、EM、REM、%、VW 和 VH 有什么区别?