CSS中常见的长度单位

rainyang 发布于2019-08-29 12:21 / 2174人阅读

摘要：可视区高度单位和可视区宽度单位单位与可视区的高度相关。的值等于可视区高度的。因此会随着父元素对应的长度值得变化而变化。

px - 像素

px 是 CSS 中最常用的长度单位，可以用来指定字体大小，元素的宽度、高度、边框、内边距，外边距的大小等等, 它是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI

px 单位的值必须是整数值

与px相关的一些单位

in - 表示英寸，是一个物理单位，在CSS中被直接映射成为px; 转换的方法是 1in = 96px

cm - 表示厘米，在生活中常用的单位，同样被映射为 px; 转换方法为 1cm = 37.8px

mm - 表示毫米，与cm类似，转换方法为 1mm = 0.1cm = 3.78px

em 与 rem

em 单位的值等于基本元素或父元素的字体大小。

例如，如果父元素的字体大小为16px，则所有直接子元素中的1em值将计算为16px。基于基本单元的知识，可以很方便的增大或减小子元素的字体大小。这里的值不需要是整数。

使用em可以轻松地将各种元素的字体大小保持在固定比例。

例如，如果父元素的font-size的值为50px，则将子元素的字体大小设置为2em, 相当于设置为100px。类似的，将它设置为0.5em将使得子元素的字体大小为25px。

另外有一点需要注意：如果想要通过 em 设置当前元素的大小值，并且不是相对于直接父元素，而是相对父元素的父元素或者根元素，就会变得很复杂，因为每一层都要进行计算

例如:

.parent {
    font-size: 20px;
}

.child1 {
    font-size: 1.5em;
}

.child2 {
    font-size: 1.2em;
}

那么就需要经过计算: child1的字体大小为 20 x 1.5 = 30px, 而 child2 的字体大小就等于 20 x 1.5 x 1.2 = 36px

rem 也是一个相对单位，与 em 的不同点在于rem的长度总是相对于根元素, 而不是像 em 使用级联的方式来计算尺寸。这种单位使用起来就简单很多

同样是上面的例子，不过使用的单位是 rem

.parent {
    font-size: 20px;
}

.child1 {
    font-size: 1.5rem;
}

.child2 {
    font-size: 1.2rem;
}

那么就需要经过计算: child1的字体大小为 16 x 1.5 = 24px, 而 child2 的字体大小就等于 16 x 1.2 = 19.2px; 这里为什么是使用 16 来乘而不是 20 呢？这就是因为rem的长度总是相对于根元素, 就是指 html, 而 html文档中默认字体大小为 16px, 因此这里使用 16来计算

可视区相对长度单位

可视区相对长度基于视图窗口或视口(屏幕上的可视区域或者框架)的宽度和高度。

可视区高度单位（vh）和可视区宽度单位（vw）

vh单位与可视区的高度相关。vh的值等于可视区高度的1/100。如果我们要根据浏览器窗口的高度来调整元素，这个单位是有用的。例如，如果可视区的高度是400px，则1vh等于4px。如果可视区高度为800px，则1vh等于8px。

类似的，vw单位与可视区的宽度相关。因此可以推算1vw的值。 1vw就等于可视区宽度的1/100。例如，如果窗口的宽度为1200px，则1vw将为12px。

vmin 和 vmax

vmin 是当前 vm 和 vh 中较小的一个值，也就是说，是可视区域较小的一边的1/100的长度；例如：可视区大小为 1000x800, 则 wmin = 800/100 = 8px; 如果可视区大小为 600x800, 则 wmin = 600/100 = 6px;

类似的, wmax 是当前 vm 和 vh 中较大的一个值，也就是说，是可视区域较大的一边的1/100的长度；例如：可视区大小为 1000x800, 则 wmin = 1000/100 = 10px; 如果可视区大小为 600x800, 则 wmin = 800/100 = 8px;

百分比表示的长度

以百分比为单位的长度值是基于具有相同属性的父元素的长度值。因此会随着父元素对应的长度值得变化而变化。例如：设置父元素的宽度为 100px, 设置直接子元素的宽度为 50%，则子元素的宽度为 50px;

云服务器服务器托管 java中二维数组的长度 js中常见的变量名称 php中css的用法 c语言中数据长度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111832.html

[译]HTML&CSS Lesson3: 了解CSS

摘要：我们会在组合选择器中来了解为什么权重值要加连字符。组合选择器中的权重值会分别对不同类型的选择器进行计数。对比两组选择器，第二组选择器有两个选择器，拥有更高的权重值。 CSS是一门复杂的语言，拥有相当的大能力。它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。首先，我们要明确的了解样式是怎么被渲染的。具体的...

lavnFan 2019-08-01 17:17 评论0 收藏0
[译]HTML&CSS Lesson3: 了解CSS

摘要：我们会在组合选择器中来了解为什么权重值要加连字符。组合选择器中的权重值会分别对不同类型的选择器进行计数。对比两组选择器，第二组选择器有两个选择器，拥有更高的权重值。 CSS是一门复杂的语言，拥有相当的大能力。它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。首先，我们要明确的了解样式是怎么被渲染的。具体的...

soasme 2019-08-29 13:04 评论0 收藏0
css专业术语笔记

摘要：属性如等，称作的属性。如属性值属性冒号后面的所有内容统一称为属性值。例如声明属性名加上属性值就是声明例如声明块声明块是花括号包裹的一系列声明，例如规则或规则集出现了选择器，而且后面还跟着声明块。1. 属性如height、color等，称作css的属性。 2. 值在css中，如：10px, 50%, #ccc等这些都称作css的值。比较常见的类型值有：整数值，数值，百分比值，长度值，颜色值...

番茄西红柿 2019-04-23 13:18 评论0 收藏0
CSS通用数据类型

摘要：相反的，通用数据类型并不和任何特定的属性相关联。本文，我将整体讲述一下所有的通用数据类型。这样以来就能够避免和字符串数据类型混淆。距离距离数据类型表示距离的单位，有两种长度单位。渐变函数使用数据类型来定义。 CSS中属性的值有着许多种格式。为了让用户代理（即浏览器）能够识别一个值是否有效，则需要确认该值是否符合该类值支持的格式的其中一种。这些属性值所支持的格式叫做数据类型，在规范中用的...

Elle 2019-08-02 16:15 评论0 收藏0
CSS通用数据类型

摘要：相反的，通用数据类型并不和任何特定的属性相关联。本文，我将整体讲述一下所有的通用数据类型。这样以来就能够避免和字符串数据类型混淆。距离距离数据类型表示距离的单位，有两种长度单位。渐变函数使用数据类型来定义。 CSS中属性的值有着许多种格式。为了让用户代理（即浏览器）能够识别一个值是否有效，则需要确认该值是否符合该类值支持的格式的其中一种。这些属性值所支持的格式叫做数据类型，在规范中用的...

Markxu 2019-08-29 18:46 评论0 收藏0