CSS em|极客教程

CSS em

在CSS中，em是一个相对单位，它是相对于父元素的字体大小来计算的。在这篇文章中，我们将详细介绍em单位在CSS中的应用以及如何使用它来实现各种效果。

1. 什么是em单位

在CSS中，em单位是一个相对单位，它是相对于父元素的字体大小来计算的。例如，如果父元素的字体大小为16px，那么1em就等于16px。如果子元素的字体大小为0.5em，那么它的字体大小就是父元素的一半。

2. em单位的应用

2.1 设置字体大小

使用em单位可以很方便地设置字体大小，而且可以实现响应式设计。例如，我们可以将所有标题的字体大小设置为1.5em，这样它们的大小会根据父元素的字体大小而变化。

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}

p {
  font-size: 1em;
}

2.2 设置元素的宽度和高度

除了字体大小，em单位也可以用来设置元素的宽度和高度。例如，我们可以将一个div元素的宽度设置为2em，这样它的宽度会是父元素字体大小的两倍。

div {
  width: 2em;
  height: 1.5em;
}

2.3 设置内边距和外边距

em单位还可以用来设置元素的内边距和外边距。例如，我们可以将一个div元素的内边距设置为0.5em，这样它的内边距会是父元素字体大小的一半。

div {
  padding: 0.5em;
  margin: 1em;
}

3. em单位的注意事项

在使用em单位时，需要注意以下几点：

em单位是相对于父元素的字体大小来计算的，所以在嵌套元素中可能会出现累积效应。
如果父元素没有设置字体大小，那么em单位会继承上一级元素的字体大小，直到找到一个设置了字体大小的元素。
在响应式设计中，可以使用em单位来实现字体大小和元素大小的自适应调整。

4. 示例代码

4.1 设置字体大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>em css</title>
  <style>
    h1 {
      font-size: 2em;
    }

    p {
      font-size: 1.5em;
    }
  </style>
</head>
<body>
  <h1>em css</h1>
  <p>Welcome to geek-docs.com</p>
</body>
</html>

Output:

CSS em

4.2 设置元素的宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>em css</title>
  <style>
    div {
      width: 3em;
      height: 2em;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Output:

CSS em

4.3 设置内边距和外边距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>em css</title>
  <style>
    div {
      padding: 0.5em;
      margin: 1em;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div>geek-docs.com</div>
</body>
</html>

Output:

CSS em