CSS 中的值和单位非常重要，因为它们决定了网页上元素的大小、比例和位置。

单位，定义用于指定值的测量系统。 CSS 提供了许多不同的单位来表示长度和测量。 CSS 单位用于指定页面元素或其内容的属性大小。

CSS 中有多种指定和测量长度的方法。用于指定边距、内边距、字体大小、宽度、高度、边框等。

例如 - font-size: 50px，这里数字 50 有一个后缀 px 即像素，它是一个CSS 测量单位。

数字和单位之间不应有空格。当值为 0 时，可以省略单位。

下表显示了我们在 CSS 样式中最常使用的不同类型的值和单位:

数据类型说明示例
<integer>表示整数55、-55 等
<number>表示十进制数。它可能有小数点，也可能没有。1.5、234、-1.5 等
<dimension>表示一个<number> 附有一个单位。还包括值类型，例如 <length>、<angle>、<time> 和 <resolution>5px、30deg、2s、2.5dpi
<percentage>表示其他值的分数，即总是相对于其他值。80%、25%等

长度单位

长度单位可分为两种:

  • 绝对单位

  • 相对单位

绝对长度单位

这些单位被归类为固定长度单位，这意味着用绝对单位指定的长度保持不变屏幕上精确的、不变的尺寸。

当浏览器具有有关屏幕属性、所使用的打印机或其他适当的用户代理的全面信息时，这些单元被证明非常有效。

下表包含所有类型的绝对单位:

单位描述等效值示例
mm指毫米，用于指定以毫米为单位的测量值。1mm = 1cm的1/10font-size: 10mm;
cm指的是厘米，它是用于指定以厘米为单位的测量值。1cm = 37.8px = 25.2/64infont-size: 5cm;
Q指四分之一毫米，用于指定厘米的测量单位。1Q = 1cm 的 1/40font-size: 5Q ;
in指英寸，用于指定英寸测量单位。1in = 2.54cm = 96pxfont-size: 1in;
pt指点，用于指定以点为单位的测量值。1pt = 1/72 of 1infont-size: 20pt;
pc指的是picas，用于指定以 picas 为单位的测量。1pc = 1in 的 1/6width: 6pc;
px指像素，用于指定以像素为单位的测量。1px = 1in的1/96font-size: 15px;

绝对单位对于响应能力不是优先考虑的项目很有价值。但是，它们对于响应式网站的好处较小，因为它们在屏幕尺寸变化时不会进行调整。

CSS 测量单位 - 使用毫米、厘米、英寸、Q

这里是一个示例绝对单位（mm、cm、in、Q）:

<html>
<head>
<style>
   .unit-mm {
      font-size: 5mm;
   }
   .unit-cm {
      font-size: 1cm;
   }
   .unit-inch {
      font-size: 0.5in;
   }
   .unit-quarter {
      font-size: 40Q;
   }
</style>
</head>
<body>
   <h1 class="unit-mm">Font size 5mm</h1>
   <h1 class="unit-cm">Font size 1cm</h1>
   <h1 class="unit-inch">Font size 0.5inch</h1>
   <h1 class="unit-quarter">Font size 40Q</h1>
</body>
</html>

CSS 测量单位 - 使用 px、pt、pc

这里是绝对单位（px、pt、pc）的示例:

<html>
<head>
<style>
   .unit-px {
      font-size: 20px;
   }
   .unit-pt {
      font-size: 25pt;
   }
   .unit-pc {
      font-size: 3pc;
   }
</style>
</head>
<body>
   <h1 class="unit-px">Font size 20px</h1>
   <h1 class="unit-pt">Font size 25pt</h1>
   <h1 class="unit-pc">Font size 3pc</h1>
</body>
</html>

相对长度单位

之所以这样称呼相对长度单位，是因为它们是相对于其他元素进行测量的。

相对单位非常适合响应式样式设计网站，因为它们可以根据窗口大小或父元素按比例调整。这些单位定义相对于其他长度属性的长度。

下表包含所有类型的相对单位:

单位描述示例
em相对于元素的字体大小。font-size : 4em;
ex相对于当前字体的 x 高度。font-size: 4ex;
ch相对于"0"的宽度。font-size: 4ch;
rem相对于根元素的字体大小。font-size: 2rem;
lh相对于元素的行高。font-size: 4lh;
rlh相对于根元素的行高。font-size: 4rlh;
vh它是相对于视口的高度。 1vh = 视口高度的 1% 或 1/100。font-size: 4vh;
vw它与视口的宽度有关。 1vw = 视口宽度的1%或1/100。width: 4vw;
vmin它是相对的到视口的较小尺寸。 1vmin = 视口较小尺寸的 1% 或 1/100。width: 4vmin;
vmax它是相对的到视口的更大尺寸。 1vmax = 视口较大尺寸的 1% 或 1/100。width: 4vmax;
vb它是相对的初始包含块在根元素块轴方向上的大小。 1vb = 包含块大小（块轴）的 1%。font-size: 4vb;
vi它是相对于根元素内联轴方向上初始包含块的大小。 1vb = 包含块大小的 1%（内联轴）。font-size: 4vi;
svw, svh它是相对于较小视口的宽度和高度。 1svw = 较小视口宽度的 1% 或 1/100，1svh = 较小视口高度的 1% 或 1/100。width: 40svw; height: 40svh;
lvw,lvh是相对于较大视口的宽度和高度。 1lvw = 较大视口宽度的 1% 或 1/100，1lvh = 较大视口高度的 1% 或 1/100。width: 40lvw; height: 40lvh;
dvw,dvh是相对于动态视口的宽度和高度。 1dvw = 动态视口宽度的 1% 或 1/100，1dvh = 动态视口高度的 1% 或 1/100。width: 40dvw; height: 40dvh;

CSS 测量单位 - 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>

CSS 测量单位 - ex 单位

此单位设置相对于当前字体的 x 高度的大小:

CSS 测量单位

<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>

CSS 测量单位 - ch 单位

此单位设置相对于"0"宽度的尺寸所选字体中的"（零）字符。它主要用于创建随字体大小缩放的响应式设计:

在下面的示例中，我们将输入宽度设置为 10ch（这意味着它将显示 10 个字符）。尝试更改 font-size 值，看看输入仍然显示 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>

CSS 测量单位 - rem 单位

此单位设置相对于 font-size 的大小根元素，通常是 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>

CSS 测量单位 - lh 和 rlh 单位

lh 单位设置相对于元素行高的大小。

rlh 单位设置相对于根元素行高的大小。

以下示例演示了 lh 和 rlh 单位的用法（尝试将 font-size 更改为 10px、2em 或 300% ; in body > div:first-of-type):

<html>
<head>
<style>
   :root {
      font-size: 100%;
      /* 改变行高的值也会改变
       任何使用的声明的使用值
       行高单位。
      
       在这种情况下，它会影响整个文档
       因为这个规则集与根元素匹配。 */
      line-height: 1;
   }
   body > div:first-of-type {
      /*
           此处更改字体大小仅影响
       前两个文本块。 那些文本块
       使用 lh 单位。
      
       最后一段文本使用 rlh 或 root
       行高单位。 计算其文本大小
       相对于 :root 元素的字体大小。
      
       尝试将其更改为 10px、2em 或 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>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>

      <p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>
   </div>
   <div lang="en" class="rlh">
      <p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>

      <p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>
   </div>
</div>
</body>
</html>

CSS 测量单位 - 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>调整浏览器窗口的高度以查看框大小（高度和宽度）如何变化。 1vh = 分别为视口高度和宽度的 1%。</p>
</body>
</html>

CSS 测量单位 - vmin（视口最小值）和 vmax（视口最大值）单位

vmin（视口最小值）单位设置相对于视口较小尺寸的大小。 1vmin = 视口较小尺寸的 1% 或 1/100。例如，如果视口宽度为 1000 像素，高度为 800 像素。如果我们将元素的宽度设置为 30vmin，则它将是高度的 30%。因此 800px 的 30% 就是 240px。

vmax（视口最大）单位设置相对于视口较大尺寸的大小。 1vmax = 视口较大尺寸的 1% 或 1/100。例如，如果视口宽度为 1000 像素，高度为 800 像素。如果我们将元素的宽度设置为 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>

CSS 测量单位 - vb 单位

此单位设置相对大小初始包含块在根元素块轴方向上的大小。 1vb = 包含块大小的 1%（块轴）:

<html>
<head>
<style>
   body {
      font-size:20px;
   }
   .container {
      height:80vb;
   }
   p {
      font-size:5vb;
   }
</style>
</head>
<body>
   <div class="container">
   <p>调整浏览器窗口的高度以查看字体如何变化。</p>
</div>
</body>
</html>

CSS 测量单位 - vi 单位

此单位设置相对于初始包含块大小的大小根元素内联轴的方向。 1vi = 包含块大小的 1%（内联轴）:

<html>
<head>
<style>
   body {
      font-size:20px;
   }
   .container {
      width:80vi;
   }
   p {
      font-size:5vi;
   }
</style>
</head>
<body>
   <div class="container">
   <p>调整浏览器窗口的高度以查看字体如何变化。 1vh = 分别为视口高度和宽度的 1%。</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="/css/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>

让我们再看一个百分比用法的示例，其中列表的嵌套值是根据父元素 font-size 的值计算的:

 <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>
   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="/css/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>