PHP前端开发

CSS 单位 – %、em、rem、px、vh、vw

百变鹏仔 3个月前 (09-20) #CSS

文章标签单位

在CSS或层叠样式表中，有许多单位可以根据需要以不同的方式表示不同属性的值。 CSS 属性如：font-size、height、width 和 line-height 等用于定义容器的不同属性。这些属性的值可以以不同单位的形式分配。

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

CSS 中有许多可用的 CSS 单元，但在本文中我们仅学习或讨论以下属性 -

像素 (px) - 像素或 px 单位是最小的，主要由初学者用来设置不同长度属性的值。从数学上讲，1px 定义为一英寸的 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 中根元素（即标签）的字体大小的属性值。如果我们将 rem 与像素进行比较，那么我们发现 1rem 也与 16px 相同，即 1rem = 16px。

语法

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

property_name: numeric_value rem;

注意 - 建议在开发网页或应用程序时不要使用像素、em 和 rem 作为单位。因为，它不会允许 HTML 中的容器在使网页响应时根据视口大小动态更改其宽度和高度。

Viewport-width (vw) - 视口宽度或 vw 属性用于根据用户查看网页的当前视口宽度设置值。它将允许容器根据网页的当前视口宽度动态更改其宽度。

语法

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

property_name: numeric_value vw;

Viewport-height (vh) - 视口高度或 vh 几乎与视口宽度属性相似。 vw 用于设置元素的动态宽度，vh 用于设置元素的动态高度。每次用户更改高度时，它都会动态设置元素相对于当前视口高度的高度。

语法

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

property_name: numeric_value vh;

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

语法

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

property_name: numeric_value %;

现在让我们讨论它们中的每一个，并通过在代码示例的帮助下实际实现它们来了解它们的差异。

步骤

第 1 步 - 在第一步中，我们将定义不同的 HTML 元素，以使用不同的 CSS 单元设置不同的长度属性。
第 2 步 - 在下一步中，我们将在标签。
第 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 单位。我们通过代码示例的帮助实际实现了它们，详细讨论了它们。

文章推荐

本站为非盈利性网站,不接受任何赞助和广告。

特别声明：本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。 | 举报邮箱：344225443@qq.com

互联网ICP备案：陕ICP备2023000799号 Copyright 2023-2024 sharedbk.com All rights reserved | (c)2008-2024 共享博客