Css 简明教程

CSS - Measurement Units

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

单位定义了用来指定值的测量系统。CSS 为表达 length and measurement 提供了许多不同的单位。CSS 单位用来指定页面元素或其内容的属性大小。

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

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

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

Data type

Description

Example

Represents a whole number

55, -55, etc.

表示十进制数。它可能有小数点，或可能没有。

1.5, 234, -1.5, etc.

表示附加单位的 <数字>。还包括 <长度>、<角度>、<时间> 和 <分辨率> 等值类型

5px, 30deg, 2s, 2.5dpi

表示其他值的几分之一，即它总是相对于其他值。

80%, 25%, etc.

Length Units

长度单位可分为两类：

Absolute units
Relative units

Absolute Length Units

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

当浏览器拥有有关屏幕属性、正在使用的打印机或其他适当的用户代理的全面信息时，这些单位非常有效。

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

Unit

Description

Equivalent value

Example

指毫米，它用来指定毫米的测量值。

1 毫米 = 1 厘米的十分之一

font-size: 10mm;

指厘米，它用来指定厘米的测量值。

1 厘米 = 37.8 像素 = 25.2/64 英寸

font-size: 5cm;

Quarter-millimeter，它用于指定厘米的度量。

1Q=1厘米的1/40

font-size: 5Q;

英寸，用于指定英寸的度量。

1 英寸 = 2.54 厘米 = 96 px

font-size: 1in;

磅点，用于指定磅点的度量。

1 pt=1英寸的1/72

font-size: 20pt;

派卡，用于指定派卡的度量。

1 pc=1英寸的1/6

width: 6pc;

像素，用于指定像素的度量。

1 px=1英寸的1/96

font-size: 15px;

Absolute units 在响应优先级不太高的项目中是有价值的。然而，它们对于响应式网站而言就不是那么有利了，因为屏幕尺寸改变时它们不会进行调整。

CSS Measurement Units - Using mm, cm, in, 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 Measurement Units - Using 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>

Relative Length Units

Relative length units 被称为这样，是因为它们是根据其他元素进行测量的。

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

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

Unit

Description

Example

相对于元素的字体大小。

font-size: 4em;

相对于当前字体的 x 高度。

font-size: 4ex;

相对于“0”的宽度。

font-size: 4ch;

rem

相对于根元素的字体大小。

font-size: 2rem;

相对于元素的行高。

font-size: 4lh;

rlh

相对于根元素的行高。

font-size: 4rlh;

相对于视口的宽度。1vh = 1% 或 1/100 的视口高度。

font-size: 4vh;

相对于视口的宽度。1vw = 1% 或 1/100 的视口宽度。

width: 4vw;

vmin

相对于视口的较小尺寸。1vmin = 1% 或 1/100 的视口的较小尺寸。

width: 4vmin;

vmax

相对于视口的较大尺寸。1vmax = 1% 或 1/100 的视口的较大尺寸。

width: 4vmax;

相对于根元素 block 轴方向的初始包含块大小。1vb = 1% 的包含块大小（block 轴）。

font-size: 4vb;

相对于根元素行内轴方向的初始包含块大小。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 Measurement Units - em Unit

此单位将大小设置为相对于元素字体大小：

<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 Measurement Units - ex Unit

此单位将大小设置为相对于当前字体的 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>

CSS Measurement Units - ch Unit

此单位将大小设置为相对于所选字体中“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>

CSS Measurement Units - rem Unit

此单位将大小设置为相对于根元素的字体大小，通常是 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 Measurement Units - lh and rlh Unit

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

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

以下示例演示了 lh 和 rlh 单位的使用（尝试将字体大小更改为 10px、2em 或 300%；在 body > div >findFirst-of-type 中）：

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

CSS Measurement Units - vh Unit and vw Unit

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>

CSS Measurement Units - vmin (viewport minimum) and vmax (viewport maximum) Unit

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

vmax (viewport maximum) 相对于视口的较大尺寸设置大小。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>

CSS Measurement Units - vb Unit

此单位相对于根元素块轴方向中的初始包含块的大小设置大小。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>

CSS Measurement Units - vi Unit

此单位相对于根元素内联轴方向中的初始包含块的大小设置大小。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>

Example - Percentages

百分比值始终相对于另一个值设置。例如，当百分比值作为元素的高度或宽度传递时，它将计算为父元素的高度或宽度的百分比。

让我们看一个例子来更好地理解这一点。此处将百分比值传递给元素的高度：

<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> ，则传递的值只能是长度，不能是百分比。

Example - Numbers

CSS 的某些属性接受值类型为数字，而不附加任何单位。诸如 opacity, line-height 等属性。

例如， opacity 的值范围可以从 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>

这是 line-height 的示例：

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