CSS px、em和ex有什么区别

在本文中，我们将介绍CSS中的px、em和ex单位，并详细讨论它们之间的区别以及在网页设计中的应用。

阅读更多：CSS 教程

px（像素）

像素是CSS中最常用的单位之一，用于确定元素在屏幕上的尺寸。像素是一个固定单位，表示屏幕上的一个单一点。在大多数情况下，像素单位在网页设计中通常是最常用的。例如，在以下代码中，我们为一个元素设置一个宽度为200px：

#example {
  width: 200px;
}

px单位在不同屏幕上都是固定的，不会随着屏幕尺寸的变化而改变。

em（字体的相对长度单位）

em单位相对于其父元素的字体大小而定。默认情况下，1em等于父元素的字体大小。例如，如果父元素的字体大小为16px，那么1em就等于16px。如果我们以em单位设置了一个元素的字体大小，那么该元素的字体大小将基于它的父元素。以下代码将使一个元素的字体大小设置为其父元素字体大小的1.5倍：

#example {
  font-size: 1.5em;
}

利用em单位，我们可以轻松地在整个网页上进行相对调整，因为它们可以随着父元素的字体大小变化而进行自适应。

ex（字符x的高度）

ex单位是根据元素所使用的字母“x”的高度来测量的。具体而言，1ex等于字母“x”的高度。它通常用于设置元素的垂直尺寸，特别是在排列文本和行高方面。例如，以下代码将使一个元素的高度设置为父元素字体大小的0.8倍：

#example {
  height: 0.8ex;
}

与em单位类似，ex单位也是相对单位，它们会随着父元素的字体大小而变化。

px、em和ex的区别

px是绝对单位，不会随着父元素的变化而改变。
em和ex都是相对单位，它们的值取决于父元素的字体大小。
使用px单位在设计中更为常见，特别是在确定固定尺寸的元素时更为实用。
使用em和ex单位可以实现网页设计的相对调整，特别是当需要自适应大小时。
父元素的字体大小改变时，em和ex单位的值也会相应地改变。

以下示例进一步说明这些单位的区别：

#parent {
  font-size: 16px;
}

#child-px {
  width: 100px;
}

#child-em {
  width: 4em;
}

#child-ex {
  width: 4ex;
}

在上述示例中，父元素的字体大小为16px。子元素child-px的宽度固定为100px，因此不会受到父元素字体大小的影响。而子元素child-em和child-ex的宽度将基于父元素的字体大小进行调整。如果我们将父元素的字体大小更改为20px，则child-em和child-ex的宽度也会相应变化。