CSS 单位 %，em，rem，px，vh，vw

在CSS或层叠样式表中，有许多单位可用于根据需要以不同方式表示不同属性的值。 CSS属性如： 字体大小、高度、宽度 和行高等用于定义容器的不同属性。这些属性的值可以以不同的单位形式赋值。

在本文中，我们将详细了解不同的CSS单位，并实际实施它们以了解每个单位的用法。

CSS中有许多可用的单位，但在本文中，我们只将学习或讨论以下属性：

像素（px） - 像素或px单位是最小的单位，新手通常用它来设置不同长度属性的值。数学上，1px被定义为1英寸的1/96部分，即1px = 1/96英寸。

语法

以下语法将显示如何使用像素单位来设置不同长度属性的值：

property_name: numeric_value px;

em - em属性用于将长度属性的值设置为相对于元素的字体大小。如果我们将em与像素进行比较，我们会发现1em等于16px，即1em = 16px。

语法

以下语法将向您展示如何使用像素单位来设置不同长度属性的值 –

property_name: numeric_value em;

rem - rem属性相对于HTML中根元素的字体大小进行设置。即根元素是标签。如果将rem与像素进行比较，我们会发现1rem与16px是一样的，即1rem = 16px。

语法

以下语法将展示如何使用像素单位来设置不同长度属性的值 –

property_name: numeric_value rem;

注意 - 在开发网页或应用程序时，建议不要使用像素、em和rem作为单位。因为这样做会导致HTML中的容器无法根据网页响应式设计时的视口大小动态改变其宽度和高度。

视口宽度 (vw) - 视口宽度或vw属性用于根据用户在浏览网页时的当前视口宽度设置值。它允许容器根据网页的当前视口宽度动态改变其宽度。

语法

以下语法将展示如何使用像素单位来设置不同长度属性的值 –

property_name: numeric_value vw;

视口高度（vh） − 视口高度或vh几乎类似于视口宽度属性。vw用于设置元素的动态宽度，而vh用于设置元素的动态高度。它将根据用户更改的高度，动态设置元素相对于当前视口高度的高度。

语法

以下语法将向您展示如何使用像素单位设置不同长度属性的值-

property_name: numeric_value vh;

百分比 (%) - 百分比或%属性还将动态值设置为我们要分配给HTML文档中的元素的属性。我们可以使用相同的％符号为每个属性分配值，而不是各个属性使用不同的 vw和 vh。

语法

以下语法将向您展示如何使用像素单位设置不同长度属性的值-

property_name: numeric_value %;

现在让我们讨论每一个并通过实际使用代码示例来看看它们的区别。

步骤

步骤1 - 在第一步中，我们将定义不同的HTML元素来设置它们的不同长度属性，使用不同的CSS单位。
步骤2 − 下一步，我们将在<style> </style>元素中为上一步中定义的元素定义样式，该元素定义在<head> </head>标签中.
- 步骤3 − 最后一步，我们将使用不同的CSS单位来为属性赋值，并查看它们之间的差异.

示例

下面的例子将帮助你理解所有CSS单元之间的区别，并实际地理解它们 −

<html>
<head>
   <style>
      .div1 {
         margin-top: 5%;
         width: 50%;
         height: 20%;
         background-color: aqua;
      }
      .div2 {
         margin-top: 5vh;
         width: 50vw;
         height: 20vh;
         background-color: aqua;
      }
      .para1 {
         font-size: 16px;
      }
      .para2 {
         font-size: 1.2em;
      }
      .para3 {
         font-size: 1.3rem;
      }
   </style>
</head>
<body>
   <h2>CSS units – %, em, rem, px, vh, vw</h2>
   <div class = "div1"> width: 50% <br> height: 20% </div>
   <div class = "div2"> width: 50vw <br> height: 20vh </div>
   <p class = "para1"> Paragraph with font-size: 16px </p>
   <p class = "para2"> Paragraph with font-size: 1.2em or 19.2px </p>
   <p class = "para3"> Paragraph with font-size: 1.3rem or 20.8px </p>
</body>
</html>

在上面的例子中，我们使用了不同的CSS单位来为元素指定高度、宽度和字体大小.