CSS3 补充内容 - CSS3 单位 - ex

一、基本概念

ex单位是CSS中的一个相对长度单位，它表示当前字体中小写字母"x"的高度（x-height）。具体来说，1ex等于当前字体中小写字母"x"的高度。这个单位在排版中特别有用，尤其是当需要基于字体的x-height进行布局时。

核心知识点：

  • ex：表示当前字体中小写字母"x"的高度，1ex = 一个小写字母"x"的高度
  • ex单位是相对单位，会随着字体、字体大小和字体样式的变化而变化
  • ex单位与字体的x-height相关，不同字体的x-height可能不同
  • ex单位通常用于设置与字体高度相关的尺寸，如行高、内边距等
  • ex单位不受父元素或视口尺寸的直接影响，只与字体相关
  • ex单位在垂直居中对齐和创建与字体高度相关的间距时特别有用

二、语法

使用ex单位的语法非常简单，只需要在数值后面加上"ex"即可：

/* 基本语法 */
选择器 {
  属性: 值ex;
}

/* 示例 */
.element {
  font-size: 2ex; /* 字体大小为2个小写x的高度 */
  line-height: 1.5ex; /* 行高为1.5个小写x的高度 */
  margin: 1ex;
  padding: 0.5ex;
  height: 10ex; /* 高度为10个小写x的高度 */
}

注意事项：

  • ex单位的数值可以是整数或小数
  • ex单位依赖于当前使用的字体，不同字体的x-height可能不同
  • 在大多数字体中，ex单位大约等于字体大小的一半，但这不是绝对的
  • ex单位通常用于垂直方向的尺寸，因为它与字体的高度相关
  • ex单位在某些旧浏览器中可能存在兼容性问题

三、使用场景

ex单位在以下场景中特别有用：

  1. 垂直居中对齐：基于字体的x-height实现垂直居中
  2. 行高设置：根据字体的x-height设置合适的行高
  3. 内边距和外边距：创建与字体高度相关的间距
  4. 图标对齐：确保图标与文本的垂直对齐
  5. 数学公式排版：在数学公式中设置符号的高度
  6. 响应式字体相关尺寸：创建随字体大小变化的尺寸

四、实用案例分析

案例1：垂直居中对齐

场景：使用ex单位实现文本和图标的垂直居中对齐，确保在不同字体大小下都能保持良好的对齐效果。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ex单位垂直居中示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f5f5f5;
      padding: 2rem;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
      margin-bottom: 2rem;
      text-align: center;
      color: #2c3e50;
    }

    h2 {
      margin: 2rem 0 1rem;
      color: #34495e;
    }

    /* 使用ex单位实现垂直居中 */
    .vertical-center {
      margin: 2rem 0;
    }

    .center-item {
      display: flex;
      align-items: center;
      margin-bottom: 1.5rem;
      padding: 1rem;
      background-color: #f8f9fa;
      border-radius: 4px;
    }

    .icon {
      display: inline-block;
      width: 2ex;
      height: 2ex;
      background-color: #3498db;
      border-radius: 50%;
      margin-right: 1rem;
      /* 使用ex单位确保图标与文本垂直对齐 */
      vertical-align: middle;
    }

    .text {
      font-size: 1.2rem;
    }

    /* 不同字体大小的示例 */
    .font-small {
      font-size: 0.8rem;
    }

    .font-medium {
      font-size: 1.2rem;
    }

    .font-large {
      font-size: 1.6rem;
    }

    /* 按钮垂直居中 */
    .btn {
      display: inline-flex;
      align-items: center;
      padding: 0.5ex 1.5ex;
      font-size: 1rem;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-right: 1rem;
      margin-bottom: 1rem;
    }

    .btn:hover {
      background-color: #2980b9;
    }

    .btn-icon {
      display: inline-block;
      width: 1.2ex;
      height: 1.2ex;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 2px;
      margin-right: 0.5ex;
    }

    /* 不同字体的示例 */
    .font-arial {
      font-family: Arial, sans-serif;
    }

    .font-times {
      font-family: 'Times New Roman', serif;
    }

    .font-courier {
      font-family: 'Courier New', monospace;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>ex单位垂直居中示例</h1>
    
    <p>ex单位表示当前字体中小写字母"x"的高度，在垂直居中对齐和设置与字体高度相关的尺寸时非常有用。</p>

    <h2>1. 图标与文本垂直对齐</h2>
    <p>以下示例使用ex单位确保图标与文本在不同字体大小下都能保持良好的垂直对齐：</p>
    
    <div class="vertical-center">
      <div class="center-item font-small">
        <span class="icon"></span>
        <span class="text">小字体大小的文本</span>
      </div>
      
      <div class="center-item font-medium">
        <span class="icon"></span>
        <span class="text">中等字体大小的文本</span>
      </div>
      
      <div class="center-item font-large">
        <span class="icon"></span>
        <span class="text">大字体大小的文本</span>
      </div>
    </div>

    <h2>2. 按钮中的垂直居中</h2>
    <p>以下示例使用ex单位设置按钮的内边距和图标大小，确保在不同字体大小下都能保持良好的布局：</p>
    
    <div class="buttons">
      <button class="btn font-small">
        <span class="btn-icon"></span>
        小按钮
      </button>
      
      <button class="btn font-medium">
        <span class="btn-icon"></span>
        中等按钮
      </button>
      
      <button class="btn font-large">
        <span class="btn-icon"></span>
        大按钮
      </button>
    </div>

    <h2>3. 不同字体的x-height差异</h2>
    <p>不同字体的x-height可能不同，以下示例展示了相同字体大小下不同字体的ex单位表现：</p>
    
    <div class="vertical-center">
      <div class="center-item font-arial">
        <span class="icon"></span>
        <span class="text">Arial字体的文本</span>
      </div>
      
      <div class="center-item font-times">
        <span class="icon"></span>
        <span class="text">Times New Roman字体的文本</span>
      </div>
      
      <div class="center-item font-courier">
        <span class="icon"></span>
        <span class="text">Courier New字体的文本</span>
      </div>
    </div>

    <h2>4. 基于ex单位的行高设置</h2>
    <p>使用ex单位设置行高，可以确保行高与字体的x-height相关，提高文本的可读性：</p>
    
    <div style="font-size: 1rem; line-height: 2ex; background-color: #f8f9fa; padding: 1rem; border-radius: 4px; margin: 1rem 0;">
      <p>这是一段使用ex单位设置行高的文本示例。通过使用ex单位，行高会自动适应字体的x-height，确保在不同字体和字体大小下都能保持良好的可读性。</p>
      <p>这种方法特别适合多语言文本或需要在不同字体间切换的场景，因为它能自动适应不同字体的特性。</p>
    </div>
  </div>
</body>
</html>

效果：通过使用ex单位，实现了图标与文本的垂直居中对齐，并且在不同字体大小和不同字体下都能保持良好的对齐效果。ex单位的大小会随着字体和字体大小的变化而自动调整，确保了布局的一致性和可读性。

案例2：数学公式排版

场景：在数学公式排版中使用ex单位，确保公式中的符号和文本能够正确对齐。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ex单位数学公式排版示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f5f5f5;
      padding: 2rem;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
      margin-bottom: 2rem;
      text-align: center;
      color: #2c3e50;
    }

    h2 {
      margin: 2rem 0 1rem;
      color: #34495e;
    }

    /* 数学公式样式 */
    .math-formula {
      margin: 1.5rem 0;
      padding: 1.5rem;
      background-color: #f8f9fa;
      border-radius: 4px;
      font-family: 'Times New Roman', serif;
      font-size: 1.2rem;
    }

    /* 使用ex单位设置数学符号的大小和位置 */
    .math-sup {
      font-size: 0.8ex;
      vertical-align: 0.8ex;
    }

    .math-sub {
      font-size: 0.8ex;
      vertical-align: -0.4ex;
    }

    .math-frac {
      display: inline-block;
      text-align: center;
      margin: 0 0.5ex;
    }

    .math-frac-numerator {
      border-bottom: 1px solid #333;
      padding-bottom: 0.2ex;
      margin-bottom: 0.2ex;
    }

    .math-frac-denominator {
      padding-top: 0.2ex;
    }

    .math-sqrt {
      position: relative;
      display: inline-block;
      padding-left: 1ex;
    }

    .math-sqrt::before {
      content: "";
      position: absolute;
      top: -0.5ex;
      left: 0;
      width: 0;
      height: 0;
      border-left: 0.5ex solid transparent;
      border-right: 0.5ex solid #333;
      border-bottom: 1.5ex solid #333;
    }

    .math-sqrt-content {
      padding-left: 0.5ex;
    }

    /* 不同字体大小的公式 */
    .formula-small {
      font-size: 1rem;
    }

    .formula-medium {
      font-size: 1.4rem;
    }

    .formula-large {
      font-size: 1.8rem;
    }

    /* 公式说明 */
    .formula-description {
      margin-top: 0.5rem;
      font-size: 0.9rem;
      color: #7f8c8d;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>ex单位数学公式排版示例</h1>
    
    <p>在数学公式排版中，ex单位非常有用，因为它基于字体的x-height，可以确保公式中的符号和文本能够正确对齐，并且在不同字体大小下保持良好的比例。</p>

    <h2>1. 上标和下标</h2>
    
    <div class="math-formula">
      <p>x<sub class="math-sub">1</sub> + x<sub class="math-sub">2</sub> = 10</p>
      <p>a<sup class="math-sup">2</sup> + b<sup class="math-sup">2</sup> = c<sup class="math-sup">2</sup></p>
      <p>e<sup class="math-sup">x</sup> = 1 + x + x<sup class="math-sup">2</sup>/2! + x<sup class="math-sup">3</sup>/3! + ...</p>
    </div>
    
    <div class="formula-description">
      使用ex单位设置上标和下标的大小和位置，确保它们与基文本的比例协调。
    </div>

    <h2>2. 分数</h2>
    
    <div class="math-formula">
      <p>1 + <span class="math-frac"><span class="math-frac-numerator">1</span><span class="math-frac-denominator">2</span></span> = <span class="math-frac"><span class="math-frac-numerator">3</span><span class="math-frac-denominator">2</span></span></p>
      <p><span class="math-frac"><span class="math-frac-numerator">a</span><span class="math-frac-denominator">b</span></span> + <span class="math-frac"><span class="math-frac-numerator">c</span><span class="math-frac-denominator">d</span></span> = <span class="math-frac"><span class="math-frac-numerator">ad + bc</span><span class="math-frac-denominator">bd</span></span></p>
    </div>
    
    <div class="formula-description">
      使用ex单位设置分数的间距和线条位置，确保分数在不同字体大小下都能保持良好的比例。
    </div>

    <h2>3. 平方根</h2>
    
    <div class="math-formula">
      <p><span class="math-sqrt"><span class="math-sqrt-content">x</span></span> + <span class="math-sqrt"><span class="math-sqrt-content">y</span></span></p>
      <p><span class="math-sqrt"><span class="math-sqrt-content">a<sup class="math-sup">2</sup> + b<sup class="math-sup">2</sup></span></span> = c</p>
    </div>
    
    <div class="formula-description">
      使用ex单位设置平方根符号的大小和位置，确保它能够正确覆盖根号内的内容。
    </div>

    <h2>4. 不同字体大小的公式</h2>
    
    <div class="math-formula formula-small">
      <p>小字体: a<sup class="math-sup">2</sup> + b<sup class="math-sup">2</sup> = c<sup class="math-sup">2</sup></p>
    </div>
    
    <div class="math-formula formula-medium">
      <p>中等字体: a<sup class="math-sup">2</sup> + b<sup class="math-sup">2</sup> = c<sup class="math-sup">2</sup></p>
    </div>
    
    <div class="math-formula formula-large">
      <p>大字体: a<sup class="math-sup">2</sup> + b<sup class="math-sup">2</sup> = c<sup class="math-sup">2</sup></p>
    </div>
    
    <div class="formula-description">
      无论字体大小如何变化，使用ex单位的数学公式都能保持良好的比例和对齐效果。
    </div>
  </div>
</body>
</html>

效果：通过使用ex单位，实现了数学公式中各种元素（上标、下标、分数、平方根）的正确排版和对齐。ex单位的大小会随着字体大小的变化而自动调整，确保了公式在不同字体大小下都能保持良好的比例和可读性。

五、总结

ex单位是CSS中一个与字体相关的相对长度单位，它表示当前字体中小写字母"x"的高度。通过合理使用ex单位，可以实现以下效果：

  1. 垂直居中对齐：确保图标、按钮等元素与文本的垂直居中对齐
  2. 行高设置：根据字体的x-height设置合适的行高，提高文本可读性
  3. 内边距和外边距：创建与字体高度相关的间距，保持布局的一致性
  4. 数学公式排版：确保公式中的符号和文本能够正确对齐
  5. 响应式字体相关尺寸：创建随字体大小变化的尺寸

最佳实践：

  • 在需要基于字体x-height进行布局的场景中使用ex单位
  • 结合其他单位（如em、rem、px）使用，发挥各自的优势
  • 在垂直居中对齐和设置与字体高度相关的尺寸时优先考虑ex单位
  • 测试不同字体下的ex单位表现，确保布局的一致性
  • 在数学公式和特殊符号排版中使用ex单位，确保正确的比例和对齐

注意事项：

  • ex单位依赖于字体，不同字体的x-height可能不同
  • 在某些旧浏览器中，ex单位的支持可能有限
  • ex单位通常用于垂直方向的尺寸，因为它与字体的高度相关
  • 对于需要精确控制的场景，可能需要结合其他单位使用

通过掌握ex单位的使用方法，你可以创建更加精确、一致和专业的排版效果，提高网页的整体质量和用户体验。虽然ex单位不如其他单位常用，但在特定场景下，它是实现精确排版的理想选择。

« 上一篇 CSS3 补充内容 - CSS3 单位 - ch 下一篇 » CSS3 补充内容 - CSS3 单位 - cm/mm/in
↑