单位

Thu, 10 Oct 2024 00:00:00 +0800

说起CSS单位，我们最熟悉的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就分别来看看这些单位。

1. 相对单位

相对单位就是相对于另一个长度的长度。CSS中的相对单位主要分为两大类：

字体相对单位，他们都是根据font-size来进行计算的。常见的字体相对单位有：em、rem、ex、ch；
视窗相对单位，他们都是根据视窗大小来决定的。常见的视窗相对单位有vw、vh、vmax、vmin。

下面就来看看这些常见的CSS单位。

（1）em 和 rem

em是最常见的相对长度单位，适合基于特定的字号进行排版。根据CSS的规定，1em 等于元素的font-size属性的值。

em 是相对于父元素的字体大小进行计算的。如果当前对行内文本的字体尺寸未进行显示设置，则相对于浏览器的默认字体尺寸。当DOM元素嵌套加深时，并且同时给很多层级显式的设置了font-size的值的单位是em，那么就需要层层计算，复杂度会很高。

当然，上面的这个说法是不严谨的。来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .parent {
 width: 300px;
 height: 300px;
 font-size: 20px;
 }
 .child {
 border: 1em solid ;
 }
 </style>
</head>
<body>
 <div class="parent">
 <div class="child">
 子元素
 </div>
 </div>
</body>
</html>

这里给父元素设置了字体大小为20px，然后给子元素的border宽度设置为1em，这时，子元素的border值为20px，确实是相对于父元素的字体大小设置的：

那如果我们给子元素的字体设置为30px：

.child {
 font-size: 30px;
 border: 1em solid ;
}

这时可以看到，子元素的边框宽度就是30px，它是相对自己大小进行计算的：

所以，可以得出结论：如果自身元素是没有设置字体大小的，那么就会根据其父元素的字体大小作为参照去计算，如果元素本身已经设置了字体，那么就会基于自身的字体大小进行计算。

em单位除了可以作用于 font-size之外，还可以运用于其他使用长度的属性，比如border-width、width、height、margin、padding、text-shadow等。

所以，em的使用还是比较复杂的，它可能会继承任意一级父元素的字体大小。需要谨慎使用。

rem相对于em就简单了很多，它是根据页面的根元素（根元素）的字体大小来计算的。来对上面的例子进行修改：

.child {
 font-size: 30px;
 border: 1rem solid ;
}

html {
 font-size: 25px;
}

效果如下，可以看到，边框的长度变成了25px，它是根据根元素html的字体大小计算的：

单位 on Last Stand

单位

1. 相对单位

（1）em 和 rem