数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究CSS 单位 – %, em, rem, px, vh, vw
在 CSS 或层叠样式表中，有许多单位可用于以不同方式表示不同属性的值，以满足需要。CSS 属性如：字体大小、高度、宽度和行高等用于为容器定义不同的属性。这些属性的值可以以不同单位的形式赋值。
在本文中，我们将详细了解不同的 CSS 单位，并通过实践将其应用到代码中，以便了解每个单位的使用方法。
CSS 中有许多可用的 CSS 单位，但本文只介绍或讨论以下属性：
像素 (px) − 像素或 px 单位是最小单位，初学者通常使用它来设置不同长度属性的值。从数学上讲，1px 定义为 1 英寸的 1/96，即 1px = 1 英寸的 1/96。
语法
以下语法将向您展示如何使用像素单位来设置不同长度属性的值：
property_name: numeric_value px;
em − em 属性用于设置长度属性的值相对于元素的字体大小。如果我们将 em 与像素进行比较，我们会发现 1em 等于 16px，即 1em = 16px。
语法
以下语法将向您展示如何使用像素单位来设置不同长度属性的值：
property_name: numeric_value em;
rem − rem 属性设置属性的值相对于 HTML 中根元素的字体大小，即 <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 − 在下一步中，我们将在 <head> </head> 标签内定义的 <style> </style> 元素中，为上一步中定义的元素定义样式。
步骤 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 单位为元素分配高度、宽度和字体大小。
结论
在本文中，我们学习了不同的 CSS 单位，可以使用它们来设置 CSS 中长度属性的值。我们通过代码示例的实践，详细讨论了它们。
798 次浏览
