Css 简明教程

CSS - Measurement Units

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

Values and units, in CSS, are significant as they determine the size, proportions, and positioning of elements on a web page.

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

Units, define the measurement system used to specify the values. CSS offers a number of different units for expressing length and measurement. CSS unit is used to specify the property size for a page element or its content.

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

There are a number of ways to specify and measure length in CSS. It is used to specify margins, padding, font size, width, height, border, etc.

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

For example- font-size: 50px, here number 50 has a suffix px i.e., pixel, it is a CSS measurement unit.

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

Following table shows the different types of values and units that we mostly use in CSS styling:

Data type

Description

Example

<integer>

Represents a whole number

55, -55, etc.

<number>

Represents a decimal number. It may or may not have a decimal point.

1.5, 234, -1.5, etc.

<dimension>

Represents a <number> with a unit attached to it. Also includes value types such as <length>, <angle>, <time> and <resolution>

5px, 30deg, 2s, 2.5dpi

<percentage>

Represents a fraction of other value, that is, it is always relative to other value.

80%, 25%, etc.

Length Units

长度单位可分为两类：

Length units can be categorized into two types:

  1. Absolute units

  2. Relative units

Absolute Length Units

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

These units are categorized as fixed-length units, which means that lengths specified with absolute units maintain an exact, unchanged size on the screen.

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

These units prove to be very effective when the browser has comprehensive information about the properties of the screen, the printer being used, or other appropriate user agents.

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

The following table contains all the types of absolute units:

Unit

Description

Equivalent value

Example

mm

Refers to millimetre, it is used to specify the measurements in millimetres.

1mm = 1/10th of 1cm

font-size: 10mm;

cm

Refers to centimetre, it is used to specify the measurements in centimetres.

1cm = 37.8px = 25.2/64in

font-size: 5cm;

Q

Refers to Quarter-millimeters, it is used to specify the measurements in centimetres.

1Q = 1/40th of 1cm

font-size: 5Q;

in

Refers to inches, it is used to specify the measurement in inches.

1in = 2.54cm = 96px

font-size: 1in;

pt

Refers to point, it is used to specify the measurements in points.

1pt = 1/72 of 1in

font-size: 20pt;

pc

Refers to picas, it is used to specify the measurement in picas.

1pc = 1/6th of 1in

width: 6pc;

px

Refers to pixels, it is used to specify the measurement in pixels.

1px = 1/96th of 1in

font-size: 15px;

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

Absolute units prove valuable for projects where responsiveness is not a priority. However, they are less beneficial for responsive websites because they do not adjust when screen dimensions change.

CSS Measurement Units - Using mm, cm, in, Q

以下是绝对单位（mm、cm、in、Q）的示例：

Here is an example of absolute units (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）的示例：

Here is an example of absolute units (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 length units are called such because they are measured in relation to other elements.

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

Relative units are great for styling responsive websites because they can be adjusted proportionally based on window size or parent elements. These units define lengths relative to other length properties.

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

The following table contains all the types of relative units:

Unit

Description

Example

em

Relative to the font-size of the element.

font-size: 4em;

ex

Relative to the x-height of the current font.

font-size: 4ex;

ch

Relative to width of the "0".

font-size: 4ch;

rem

Relative to font-size of the root element.

font-size: 2rem;

lh

It is relative to the line height of the element.

font-size: 4lh;

rlh

It is relative to the line height of the root element.

font-size: 4rlh;

vh

It is relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the viewport.

font-size: 4vh;

vw

It is relative to the width of the viewport. 1vw = 1% or 1/100 of the width of viewport.

width: 4vw;

vmin

It is relative to the smaller dimension of the viewport. 1vmin = 1% or 1/100 of the viewport’s smaller dimension.

width: 4vmin;

vmax

It is relative to the larger dimension of the viewport. 1vmax = 1% or 1/100 of the viewport’s larger dimension.

width: 4vmax;

vb

It is relative to the size of the initial containing block in the direction of the root element’s block axis. 1vb = 1% of containing block’s size (block axis).

font-size: 4vb;

vi

It is relative to the size of the initial containing block in the direction of the root element’s inline axis. 1vb = 1% of containing block’s size (inline axis).

font-size: 4vi;

svw, svh

It is relative to the width and height of the smaller viewport. 1svw = 1% or 1/100 of the smaller viewport’s width and 1svh = 1% or 1/100 of the smaller viewport’s height.

width: 40svw; height: 40svh;

lvw, lvh

It is relative to the width and height of the larger viewport. 1lvw = 1% or 1/100 of the larger viewport’s width and 1lvh = 1% or 1/100 of the larger viewport’s height.

width: 40lvw; height: 40lvh;

dvw, dvh

It is relative to the width and height of the dynamic viewport. 1dvw = 1% or 1/100 of the dynamic viewport’s width and 1dvh = 1% or 1/100 of the dynamic viewport’s height.

width: 40dvw; height: 40dvh;

CSS Measurement Units - em Unit

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

This unit sets the size relative to the font-size of the element:

<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 高度：

This unit sets the size relative to the x-height of the current font:

wQm6A 
<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”（零）字符的宽度。它主要用于创建随着字体大小缩放的自适应设计：

This unit sets the size relative to width of the "0" (zero) character in the chosen font. It is primarily used to create responsive designs that scale with the font size:

在以下示例中，我们将输入宽度设置为 10ch（这意味着它将显示 10 个字符）。尝试更改字体大小值，看看输入如何仍然显示 10 个字符或数字。

In the following exmaple we set the input width to 10ch (which means it will show 10 characters). Try changing the font-size value and see how input still shows 10 charactes or numbers.

<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 元素本身：

This unit sets the size relative to font-size of the root element, typically the HTML element itself:

<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 单位将大小设置为相对于元素的行高。

lh unit sets the size relative to the line height of the element.

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

rlh unit sets the size relative to the line height of the root element.

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

Following example demonstrates usage of both lh and rlh units (Try changing font-size to 10px, 2em, or 300%; in body > div:first-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。

vh (viewport height) unit sets the size relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the viewport.

vw （视口宽度）单位相对于视口宽度设置大小。1vw = 1% 或视口宽度的 1/100。

vw (viewport width) unit sets the size relative to the width of the viewport. 1vw = 1% or 1/100 of the width of viewport.

例如，我们将宽度设置为 20vw，高度设置为 20vh。假设视口宽度与高度分别为 1200px 和 1000px。在此情况下，20vw 的值将为 240px，20vh 的值为 200px。

For example, we set the width to 20vw and the height to 20vh. Say viewport width and height are respectively 1200px and 1000px. In this scenario, the value of 20vw will be 240px and that of 20vh will be 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。

vmin (viewport minimum) unit sets the size relative to the smaller dimension of the viewport. 1vmin = 1% or 1/100 of the viewport’s smaller dimension. For example, if the viewport is 1000px wide and 800px high. If we set the width of an element to 30vmin, it will be 30% of the height. So 30% of 800px is 240px.

vmax (viewport maximum) 相对于视口的较大尺寸设置大小。1vmax = 1% 或视口最大尺寸的 1/100。例如，如果视口宽 1000px，高 800px。如果我们将元素的宽度设置为 30vmax，则它将为宽度的 30%，即 300px。

vmax (viewport maximum) unit sets the size relative to the larger dimension of the viewport. 1vmax = 1% or 1/100 of the viewport’s larger dimension. For example, if the viewport is 1000px wide and 800px high. If we set the width of an element to 30vmax, it would be 30% of the width, or 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%（块轴）：

This unit sets the size relative to the size of the initial containing block in the direction of the root element’s block axis. 1vb = 1% of containing block’s size (block axis):

<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%（内联轴）：

This unit sets the size relative to the size of the initial containing block in the direction of the root element’s inline axis. 1vi = 1% of containing block’s size (inline axis):

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

Following example demonstrates using <resolution> data type, where the image resolution is set as 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

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

A percentage value is always set in relation with another value. For example, when a percentage value is passed as height or width of an element, it will be calculated as percentage of the height or width of the parent element.

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

Let us see an example to understand this better. Here a percentage value is passed to the height of an element:

<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 的值计算：

Let us see one more example of usage of percentage, where the nested values of a list are calculated based on the value of parent element 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> ，则传递的值只能是长度，不能是百分比。

There are some properties that accept a length or a percentage value, some properties that only accept length. If the permitted value indicates <length-percentage>, the value passed can be either length or percentage; and when the permitted value indicates <length>, the value passed should be only length and not percentage.

Example - Numbers

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

There are some properties of CSS that accepts the value types as numbers, without any unit attached to it. Properties such as opacity, line-height, etc.

例如， opacity 的值范围可以从 0 到 1 。

For instance, the value for opacity can range from 0 to 1.

这是不透明度的示例：

Here is an example for opacity:

<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 的示例：

Here is an example for 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>