CSS基础教程： 测量单位（二）
Hudson 译 原文
相对长度单位
相对长度单位之所以被称为相对长度单位，是因为它们是相对于其他元素来测量的。
相对单位非常适合为响应式网站设置样式，因为它们可以根据窗口大小或父元素按比例调整。这些单位定义了相对于其他长度属性的长度。
下表包含所有类型的相对单位：
| 单位 | 描述 | 例子 |
|---|---|---|
| em | 相对于元素的字体大小 | font-size: 4em; |
| ex | 相对于当前字体的行高 | font-size: 4ex; |
| ch | 相对于“0”的宽度 | font-size: 4ch; |
| rem | 相对于根元素的字体大小 | font-size: 2rem; |
| lh | 相对于元素的行高 | font-size: 4lh; |
| rlh | 相对于根元素的行高 | font-size: 4rlh; |
| vh | 相对于视口高度的百分比 | font-size: 4vh; |
| vw | 相对于视口宽度的百分比 | width: 4vw; |
| vmin | 相对于视口较小的维度的百分比 | width: 4vmin; |
| vmax | 相对于视口较大的维度的百分比 | width: 4vmax; |
| vb | 相对于根元素的块轴方向上的初始包含块的大小百分比 | font-size: 4vb; |
| vi | 相对于根元素的内联轴方向上的初始包含块的大小百分比 | font-size: 4vi; |
| svw | 相对于较小视口的宽度的百分比 | width: 40svw; |
| svh | 相对于较小视口的高度的百分比 | height: 40svh; |
| lvw | 相对于较大视口的宽度的百分比 | width: 40lvw; |
| lvh | 相对于较大视口的高度的百分比 | height: 40lvh; |
| dvw | 相对于动态视口的宽度的百分比 | width: 40dvw; |
| dvh | 相对于动态视口的高度的百分比 | height: 40dvh; |
使用em单位
此单元设置相对于元素字体大小的大小：
<html>
<head>
<style>
div {
font-size: 20px;
border: 2em solid green;
}
</style>
</head>
<body>
<div>
This div will have a border of 20 * 2 = 40 pixels.
</div>
</body>
</html>
使用ex 单位
此单元设置相对于当前字体x高度的大小：
   
<html>
<head>
<style>
div {
font-size: 20px;
border: 2ex solid green;
}
</style>
</head>
<body>
<div>
This div will have a border of 2 * x-height of the line.
</div>
</body>
</html>
使用 ch单位
此单元设置所选字体中“0”（零）字符相对于宽度的大小。它主要用于创建响应式设计，可随字体大小缩放：
在下面的示例中，我们将输入宽度设置为10ch（这意味着它将显示10个字符）。尝试更改字体大小值，看看输入如何仍然显示10个字符或数字。
<html>
<head>
<style>
input {
font-size: 2em;
width:10ch;
}
</style>
</head>
<body>
<div>
<input type=”text“ name=”id“ id=”userID“ placeholder=”enter PIN“>
</div>
</body>
</html>
使用rem单元
此单元设置相对于根元素字体的大小，通常是HTML元素本身：
<html>
<head>
<style>
html {
font-size: 10px;
}
div {
font-size: 2rem;
margin: 1em;
border: 5px solid black;
background-color: beige;
padding: 0.25em;
}
p {
font-size: 3rem;
border: 2px solid red;
}
.child-element {
font-size: 1rem;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
div with font-size 2rem i.e 2*root element (html) font size
<br>
<span class=”child-element“>This span resizes its font w.r.t to root element(html) </span>
</div>
<p>p with font-size 3rem i.e 2*root element (html) font size </p>
</body>
</html>
使用 lh和rlh单位
lh单位设置相对于元素行高的大小。
rlh单元设置相对于根元素行高的大小。
以下示例演示了lh和rlh单位的使用情况（在 body > div:first-of-type中, 试着将字体大小更改为10px、2em或300%；）：
<html>
<head>
<style>
:root {
font-size: 100%;
/*
Changing the value of line height also changes
the used value for any declaration that uses
line height units.
In this case, it affects the entire document
because this ruleset matches the root element.
*/
line-height: 1;
}
body > div:first-of-type {
/*
Changing the font size here only affects the
first two blocks of text. Those blocks of text
use lh units.
The last block of text use rlh or root
line height units. Its text size gets calculated
relative to the font size of the :root element.
Try changing this to 10px, 2em, or 300%;
*/
font-size: 1lh;
display: grid;
grid-template-columns: auto auto auto auto;
gap: 24px;
margin-block-end: 2rem;
}
.lh {
font-size: 1.5lh;
background: #87cefa66;
}
.rlh {
font-size: 1.5rlh;
background: #da70d666;
}
body > p {
font-family: sans-serif;
font-size: 1.5rem;
}
[lang] {
padding: 5px;
}
[lang=”en“] {
font-family: ”Lora“, serif;
align-self: start;
}
p {
margin-block: 0 1rem;
}
</style>
</head>
<body>
<div>
<div lang=”en“ class=”lh“>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div lang=”en“ class=”rlh“>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</body>
</html>
使用vh单元和vw单位
vh（视口高度）单位设置相对于视口高度的大小。1vh = 1%或视口高度的1/100。
vw（视口宽度）单位设置相对于视口宽度的大小。1vw = 1%或视口宽度的1/100。
例如，将宽度设置为20vw，高度设置为20vh, 假设视口宽度和高度分别为1200px和1000px。在这种情况下，20vw的值将是240px，20vh的值将是200px。
<html>
<head>
<style>
body {
height:500vh;
}
.container {
display:flex;
}
.box-1 {
background-color: lightgreen;
height:50vh;
width:50vw;
}
</style>
</head>
<body>
<div class=”box-1“></div>
<p>Resize the height of the browser window to see how the box-size (height and width) changes. 1vh = 1% of viewport height and width respectively.</p>
</body>
</html>
使用 vmin和vmax单位
vmin单位设置相对于视口较小尺寸的大小。1vmin = 1%或视口较小尺寸的1/100。例如，如果视口宽1000px，高800px。如果我们将元素的宽度设置为30vmin，它将是高度的30%。所以800px的30%是240px。
vmax单元设置相对于视口较大维度的大小。1vmax = 视口较大维度的1%或1/100。例如，如果视口宽1000px，高800px。如果我们将元素的宽度设置为30vmax，它将是宽度的30%，或300px。
<html>
<head>
<style>
div {
box-sizing: border-box;
color: white;
margin-bottom: 4px;
padding: 4px;
overflow: scroll;
}
.vwvh {
background: lightcoral;
width: 60vw;
height: 70vh;
}
.vmin {
color: black;
background: lightblue;
width: 80vmin;
height: 20vmax;
}
</style>
</head>
<body>
<div class=”vwvh“>
width = 50vw (50% of the viewport’s width)<br />
height = 30vh (30% of the viewport‘s height)
</div>
<div class=”vmin“>
width = 80vmin (should be viewport’s height)<br />
height = 10vmax (should be viewport‘s width)
</div>
</body>
</html>
使用vb单位
此单元在根元素的块轴方向设置相对于初始包含块的大小。1vb =包含块大小的1%（块轴）：
<html>
<head>
<style>
body {
font-size:20px;
}
.container {
height:80vb;
}
p {
font-size:5vb;
}
</style>
</head>
<body>
<div class=”container“>
<p>Resize the height of the browser window to see how the font changes.</p>
</div>
</body>
</html>
使用vi单位
此单元在根元素的内联轴方向设置相对于初始包含块的大小。1vi =包含块大小的1%（内联轴）：
<html>
<head>
<style>
body {
font-size:20px;
}
.container {
width:80vi;
}
p {
font-size:5vi;
}
</style>
</head>
<body>
<div class=”container“>
<p>Resize the height of the browser window to see how the font changes. 1vh = 1% of viewport height and width respectively.</p>
</div>
</body>
</html>
以下示例演示了使用<resolution>数据类型，其中图像分辨率设置为500dpi：
<html>
<head>
<style>
img {
width: 300px;
height: 200px;
margin-right: 0.5in;
}
</style>
</head>
<body>
<h2>Image Resolution dots per inch</h2>
<h3>500dpi</h3>
<img style=”image-resolution: 500dpi;“ src=”images/pink-flower.jpg“ alt=”500dpi“>
</body>
</html>
示例-百分比
百分比值总是与另一个值相关。例如，当一个百分比值作为元素的高度或宽度传递时，其实 相对于父元素的高度或宽度的百分比。
看一个例子来更好地理解这一点。在这里，一个百分比值被传递给元素的高度：
<html>
<head>
<style>
.main {
height: 400px;
border: 5px solid rgb(19, 12, 218);
display: inline-block;
}
.box {
border: 2px solid black;
padding: 5px;
margin: 10px;
display: inline-block;
}
.length-value {
height: 100px;
}
.percent-value {
height: 40%;
}
</style>
</head>
<body>
<div class=”box length-value“>Box height is 100px</div>
<div class=”box percent-value“>Box height is 40%</div>
<div class=”main“>
<div class=”box length-value“>Box inside the main box is 100px high</div>
<div class=”box percent-value“>Box height is 40% of main box</div>
</div>
</div>
</body>
</html>
下面是另外一个百分比的使用示例，其中列表的嵌套值是根据父元素字体大小的值计算的：
<html>
<head>
<style>
.font-value {
font-size: larger;
}
li {
font-size: 60%;
}
</style>
</head>
<body>
<div>
<h2>Beverages</h2>
<ul>
<li class=”font-value“>Tea
<ul>
<li>Assam tea</li>
<li>Darjeeling tea</li>
</ul>
</li>
<li class=”font-value“>Coffee
<ul>
<li>Hot coffee</li>
<li>Cold Coffee</li>
</ul>
</li>
<li class=”font-value“>Juices
<ul>
<li>Orange</li>
<li>Mango</li>
<li>Sweet Lime</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
有些属性接受长度或百分比值，有些属性只接受长度。如果允许的值表示<length-percentage>，则传递的值可以是长度或百分比；当允许的值表示<length>时，传递的值应仅为长度，而不是百分比。
没有单位
CSS的一些属性将值类型接受为数字，不附加任何单位。如不透明度、线高等属性。
例如，不透明度的值可以从0到1不等。
以下是不透明度的示例：
<html>
<head>
<style>
.wrapper {
display: flex;
}
#common-style {
background-color: #d3360b;
width: 150px;
height: 100px;
border: 3px solid black;
margin: 5px;
}
p {
text-align: center;
}
.decimal-opacity {
opacity: 0.4;
}
.opacity-0 {
opacity: 0;
}
.opacity-1 {
opacity: 1;
}
</style>
</head>
<body>
<div class=”wrapper“>
<div class=”decimal-opacity“ id=”common-style“>
<p>CSS Opacity to 0.4</p>
</div>
<div style=”border: 2px solid green“>
<p>CSS Opacity to 0</p>
<div class=”opacity-0“ id=”common-style“></div>
</div>
<div class=”opacity-1“ id=”common-style“>
<p>CSS Opacity to 1</p>
</div>
</div>
</body>
</html>
以下是行高示例：
<html>
<head>
<style>
div {
border: 2px solid black;
width: 700px;
}
div.lh-integer {
line-height: 1;
}
div.lh-decimal {
line-height: 2.6;
}
</style>
</head>
<body>
<h2>Line-height Property Values</h2>
<h3>line-height: 1:</h3>
<div class=”lh-integer“>The paragraph is with a whole value for line-height.<br>
The line height for the text is set to 1, which makes the lines look close.
</div>
<h2>line-height: 2.6:</h2>
<div class=”lh-decimal“>The paragraph is with decimal value for line-height.<br>
The line height for the text is set to 2.6. It is a unitless value, with just the number.<br>
The line height here is relative to the font-size.
</div>
</body>
</html>
