CSS 单位

CSS 有几种不同的单位来表示长度。

许多 CSS 属性都采用“长度”值，例如：

width, margin, padding, font-size

长度是一个数字，后跟一个长度单位，例如：

10px, 2em

例子

使用 px（像素）设置不同的长度值：

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

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

对于某些 CSS 属性，允许使用负长度。

有两种类型的长度单位：绝对和相对。

绝对长度

绝对长度单位是固定的，并且以任何这些单位表示的长度都将准确地显示为该尺寸。

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

cm

描述：厘米

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1.5cm;}
h2 {font-size: 1cm;}
p {
  font-size: 0.5cm;
  line-height: 1cm;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

mm

描述：毫米

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 15mm;}
h2 {font-size: 10mm;}
p {
  font-size: 5mm;
  line-height: 10mm;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

in

描述：英寸（1 英寸=96 像素=2.54 厘米）

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1in;}
h2 {font-size: 0.5in;}
p {
  font-size: 0.2in;
  line-height: 0.5in;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

px *

描述：像素（1px=1in 的 1/96）

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50px;}
h2 {font-size: 30px;}
p {
  font-size: 15px;
  line-height: 20px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

pt

描述：点（1pt=1in 的 1/72）

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50pt;}
h2 {font-size: 25pt;}
p {
  font-size: 15pt;
  line-height: 25pt;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

pc

描述：picas（1pc=12 pt）

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 4.5pc;}
h2 {font-size: 3pc;}
p {
  font-size: 1.5pc;
  line-height: 3pc;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

* 像素 (px) 是相对于观看设备而言的。对于低 dpi 设备，1px 是显示器的一个设备像素（点）。适用于打印机和高分辨率屏幕 1px 意味着多个设备像素。

相对长度

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

em

描述：相对于元素的font-size（2em表示当前字体大小的2倍）

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 16px;
  line-height: 2em;
}

div {
  font-size: 30px;
  border: 1px solid black;
}

span {
  font-size: 0.5em;
}
</style>
</head>
<body>

<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 0.5x30 = 15px</span>.</div>

</body>
</html>

ex

描述：相对于当前字体的x高度（很少使用）

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
div {
  font-size: 30px;
  border: 1px solid black;
}

span {
  font-size: 1ex;
}
</style>
</head>
<body>

<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 1ex</span>.</div>

</body>
</html>

ch

描述：相对于“0”（零）的宽度

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size:16px;
}

div {
  font-size: 3ch;
  border: 1px solid black;
}

</style>
</head>
<body>

<p>The font-size of this document is 16px.</p>

<div>The font-size of this div element is 3ch.</div>

<p>The ch unit sets the font-size relative to the width of the character "0".</p>

</body>
</html>

rem

描述：相对于根元素的字体大小

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size:16px;
}

div {
  font-size: 2rem;
  border: 1px solid black;
}

</style>
</head>
<body>

<p>The font-size of this document is 16px.</p>

<div>The font-size of this div element is 2rem.</div>

<p>The rem unit sets the font-size relative to the browsers base font-size, and will not inherit from its parents.</p>

</body>
</html>

vw

描述：相对于视口宽度的 1%*

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 20vw;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the width of the browser window to see how the font-size of h1 changes.</p>
<p>1vw = 1% of viewport width.</p>

</body>
</html>

vh

描述：相对于视口高度的 1%*

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 20vh;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the height of the browser window to see how the font-size of h1 changes.</p>
<p>1vh = 1% of viewport height.</p>

</body>
</html>

vmin

描述：相对于视口*较小尺寸的 1%

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 15vmin;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmin = 1vw or 1vh, whichever is smaller.</p>

</body>
</html>

vmax

描述：相对于视口*较大尺寸的 1%

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 15vmax;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmax = 1vw or 1vh, whichever is larger.</p>
<p>The vmax unit is not supported in Internet Explorer or Safari 6.1 and earlier versions.</p>

</body>
</html>

描述：相对于父元素

尝试一下

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size:16px;
}

div {
  font-size: 150%;
  border: 1px solid black;
}

</style>
</head>
<body>

<p>The font-size of this document is 16px.</p>

<div>The font-size of this div element is 150%.</div>

<p>The % unit sets the font-size relative to the current font-size.</p>

</body>
</html>

提示： em 和 rem 单位在创建完美作品时非常实用可缩放布局！
* 视口=浏览器窗口大小。如果视口是50cm 宽，1vw=0.5cm。

浏览器支持

表中的数字指定第一个完全支持的浏览器版本长度单位。

Length Unit
em, ex, %, px, cm, mm, in, pt, pc	1.0	3.0	1.0	1.0	3.5
ch	27.0	9.0	1.0	7.0	20.0
rem	4.0	9.0	3.6	4.1	11.6
vh, vw	20.0	9.0	19.0	6.0	20.0
vmin	20.0	12.0	19.0	6.0	20.0
vmax	26.0	16.0	19.0	7.0	20.0

CSS 单位

目录

CSS 单位

例子

绝对长度

cm

mm

in

px *

pt

pc

相对长度

em

ex

ch

rem

vw

vh

vmin

vmax

%

浏览器支持