css 长度单位

May 23, 2023 作者: yijianhao 分类: 前端 浏览: 85 评论: 0

css长度单位

css 长度单位可以分为两类：绝对长度单位和相对长度单位

绝对长度：

绝对长度单位是固定的，它们与其他任何东西都没有关系，通常被认为总是相同的大小。这些单位包括像素（px）、厘米（cm）、毫米（mm）、英寸（in）、点（pt）和派卡（pc）等。

例如，如果你使用 1in（1 英寸）作为长度值，那么无论在哪里使用，它都将恰好显示为 1 英寸。同样，如果你使用 10px（10 像素），那么无论在哪里使用，它都将恰好显示为 10 像素。

不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印布局。

绝对长度单位之间可以相互转换。1 英寸（in）等于 2.54 厘米（cm），1 厘米（cm）等于 10 毫米（mm），1 点（pt）等于 1/72 英寸，1 派卡（pc）等于 12 点（pt）。

但是，在 CSS 中，你通常不需要进行单位转换，因为浏览器会自动处理这些转换。你只需要选择一个合适的单位并使用它即可。

相对长度单位

相对长度单位是相对于其他一些东西，比如父元素的字体大小或视图端口的大小。这些单位包括 em、rem、百分比（%）、视口宽度（vw）、视口高度（vh）、视口较小尺寸（vmin）和视口较大尺寸（vmax）等。

例如，如果你使用 50% 作为长度值，那么它将相对于父元素的长度计算。如果父元素的长度为 200 像素，那么 50% 将等于 100 像素。

使用相对单位的好处是，经过一些仔细的规划，你可以使文本或其他元素的大小与页面上的其他内容相对应。例如，如果你使用 em 单位来定义字体大小，那么当用户更改浏览器的默认字体大小时，文本的大小也会相应地更改。

  • em：相对于元素的字体大小（font-size）。如果你在一个元素上使用 2em 作为字体大小，那么它将等于该元素父元素字体大小的两倍。

  • rem：相对于根元素的字体大小（font-size）。如果你在一个元素上使用 2rem 作为字体大小，那么它将等于根元素（即 <html> 元素）字体大小的两倍。

  • %：相对于父元素的尺寸。如果你在一个元素上使用 50% 作为宽度，那么它将等于父元素宽度的一半。

  • vw：相对于视口宽度的 1%。如果视口宽度为 1000 像素，那么 10vw 将等于 100 像素。

  • vh：相对于视口高度的 1%。如果视口高度为 800 像素，那么 10vh 将等于 80 像素。

  • vmin：相对于视口较小尺寸的 1%。如果视口宽度为 1000 像素，高度为 800 像素，那么 10vmin 将等于 80 像素。

  • vmax：相对于视口较大尺寸的 1%。如果视口宽度为 1000 像素，高度为 800 像素，那么 10vmax 将等于 100 像素。

  1. CSS 单位 (w3school.com.cn)

  2. CSS 的值与单位 - 学习 Web 开发 | MDN (mozilla.org)

#css(1)

评论