CSS中的长度单位(em/ex/px/pt)使用介绍

在CSS中，长度单位用于指定元素的尺寸和位置。常见的长度单位包括em、ex、px和pt等。本攻略将详细讲解CSS中的长度单位使用介绍，包括各种长度单位的含义、使用场景和示例说明。

1. em单位

em单位是相对长度单位，它的值相对于父元素的字体大小。例如，如果父元素的字体大小为16px，那么1em就等于16px。如果子元素的字体大小为0.5em，那么子元素的字体大小就是父元素字体大小的一半，即8px。

em单位通常用于设置字体大小、行高和内边距等。例如：

.parent {
  font-size: 16px;
}

.child {
  font-size: 0.8em;
  line-height: 1.5em;
  padding: 0.5em;
}

上述代码中，父元素的字体大小为16px，子元素的字体大小为父元素字体大小的0.8倍，即12.8px。子元素的行高为字体大小的1.5倍，即19.2px。子元素的内边距为字体大小的0.5倍，即6.4px。

2. ex单位

ex单位也是相对长度单位，它的值相对于字体的x-height（小写字母x的高度）。x-height是字体中小写字母x的高度，通常是字体大小的一半左右。例如，如果字体大小为16px，那么x-height大约为8px，1ex就等于8px。

ex单位通常用于设置垂直方向的尺寸，例如行高和垂直内边距等。例如：

.parent {
  font-size: 16px;
  line-height: 1.5;
}

.child {
  padding-top: 0.5ex;
  padding-bottom: 0.5ex;
}

上述代码中，父元素的字体大小为16px，行高为字体大小的1.5倍，即24px。子元素的垂直内边距为字体x-height的0.5倍，即4px。

3. px单位

px单位是绝对长度单位，它的值不受其他因素的影响，例如字体大小或者屏幕分辨率。1px等于屏幕上的一个物理像素。px单位通常用于设置固定的尺寸和位置，例如边框宽度和绝对定位等。例如：

.parent {
  border: 1px solid black;
  position: relative;
  left: 10px;
  top: 20px;
}

.child {
  width: 100px;
  height: 50px;
}

上述代码中，父元素的边框宽度为1px，相对于父元素向左偏移10px，向上偏移20px。子元素的宽度为100px，高度为50px。

4. pt单位

pt单位是绝对长度单位，它的值等于1/72英寸。pt单位通常用于打印样式表中，因为打印机的分辨率是固定的，而且通常以点（pt）为单位。例如：

@media print {
  .page {
    width: 8.5in;
    height: 11in;
    margin: 0.5in;
  }

  .header {
    font-size: 12pt;
    line-height: 14pt;
  }

  .content {
    font-size: 10pt;
    line-height: 12pt;
  }
}

上述代码中，定义了一个打印样式表，设置了页面大小为8.5英寸×11英寸，页边距为0.5英寸。头部元素的字体大小为12pt，行高为14pt。内容元素的字体大小为10pt，行高为12pt。

5. 示例说明

5.1 示例一

下面是一个示例，演示了如何使用em单位设置字体大小和内边距。

.parent {
  font-size: 16px;
}

.child {
  font-size: 0.8em;
  padding: 0.5em;
}

上述代码中，父元素的字体大小为16px，子元素的字体大小为父元素字体大小的0.8倍，即12.8px。子元素的内边距为字体大小的0.5倍，即6.4px。

5.2 示例二

下面是另一个示例，演示了如何使用px单位设置边框宽度和绝对定位。

.parent {
  border: 1px solid black;
  position: relative;
  left: 10px;
  top: 20px;
}

.child {
  width: 100px;
  height: 50px;
}

上述代码中，父元素的边框宽度为1px，相对于父元素向左偏移10px，向上偏移20px。子元素的宽度为100px，高度为50px。

总结

在CSS中，长度单位用于指定元素的尺寸和位置。常见的长度单位包括em、ex、px和pt等。em和ex单位是相对长度单位，它们的值相对于父元素的字体大小和字体x-height。px和pt单位是绝对长度单位，它们的值不受其他因素的影响。在使用长度单位时，需要根据实际情况选择合适的单位，并采取相应的解决措施。