CSS3 补充内容 - CSS3 单位 - cm/mm/in

一、基本概念

CSS中除了相对长度单位外，还支持一些物理长度单位，这些单位基于现实世界的物理测量。其中，cm（厘米）、mm（毫米）和in（英寸）是最常用的物理长度单位。这些单位在需要精确控制元素物理尺寸的场景中特别有用，尤其是在打印样式和需要与物理世界尺寸对应的场景中。

核心知识点：

  • cm：厘米，1cm = 10mm = 0.3937in
  • mm：毫米，1mm = 0.1cm = 0.03937in
  • in：英寸，1in = 2.54cm = 25.4mm
  • 这些单位是绝对单位，它们的实际大小不会受到字体、屏幕尺寸或其他因素的影响
  • 在屏幕显示中，这些单位会被转换为像素，转换比例取决于设备的像素密度（DPI）
  • 在打印样式中，这些单位会直接对应到实际的物理尺寸

二、语法

使用这些物理单位的语法非常简单，只需要在数值后面加上相应的单位即可：

/* 基本语法 */
选择器 {
  属性: 值cm; /* 或 值mm, 值in */
}

/* 示例 */
.element {
  width: 5cm; /* 宽度为5厘米 */
  height: 100mm; /* 高度为100毫米 */
  font-size: 0.5in; /* 字体大小为0.5英寸 */
  margin: 1cm;
  padding: 5mm;
}

注意事项：

  • 这些单位的数值可以是整数或小数
  • 在屏幕显示中，这些单位的实际大小取决于设备的像素密度（DPI）
  • 在大多数现代显示器中，1英寸大约等于96像素（96 DPI），但这不是绝对的
  • 在打印样式中，这些单位会直接对应到实际的物理尺寸
  • 这些单位通常用于需要精确控制物理尺寸的场景，如打印样式、票据、标签等

三、使用场景

这些物理单位在以下场景中特别有用：

  1. 打印样式：创建与实际物理尺寸对应的打印布局
  2. 票据和标签：设计需要精确物理尺寸的票据、标签等
  3. 名片设计：创建标准尺寸的名片
  4. 海报和宣传材料：设计需要特定物理尺寸的宣传材料
  5. 工业应用：在需要与物理世界尺寸对应的工业应用中
  6. 多设备一致布局：在需要在不同设备上保持一致物理尺寸的场景中

四、实用案例分析

案例1：打印样式

场景：创建一个打印样式，使用物理单位确保打印出的文档具有精确的物理尺寸。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>物理单位打印样式示例</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;
    }

    p {
      margin-bottom: 1rem;
    }

    /* 打印样式 */
    @media print {
      body {
        background-color: white;
        padding: 0;
      }

      .container {
        max-width: 21cm; /* A4纸宽度 */
        width: 21cm;
        height: 29.7cm; /* A4纸高度 */
        margin: 0;
        padding: 2cm;
        box-shadow: none;
        border: none;
      }

      .page-header {
        height: 3cm;
        border-bottom: 1px solid #ddd;
        margin-bottom: 2cm;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .company-logo {
        width: 5cm;
        height: 2cm;
        background-color: #3498db;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
      }

      .document-title {
        font-size: 18pt;
        font-weight: bold;
        color: #2c3e50;
      }

      .content-section {
        margin-bottom: 2cm;
      }

      .section-title {
        font-size: 14pt;
        font-weight: bold;
        margin-bottom: 1cm;
        color: #34495e;
      }

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

      .table {
        width: 100%;
        border-collapse: collapse;
        margin: 1cm 0;
      }

      .table th,
      .table td {
        padding: 0.5cm;
        border: 1px solid #ddd;
        text-align: left;
      }

      .table th {
        background-color: #f8f9fa;
        font-weight: bold;
      }

      .page-footer {
        position: absolute;
        bottom: 2cm;
        left: 2cm;
        right: 2cm;
        height: 2cm;
        border-top: 1px solid #ddd;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 10pt;
        color: #7f8c8d;
      }
    }

    /* 打印按钮 */
    .print-btn {
      display: block;
      margin: 2rem auto;
      padding: 0.75rem 1.5rem;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .print-btn:hover {
      background-color: #2980b9;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="page-header">
      <div class="company-logo">公司标志</div>
      <div class="document-title">文档标题</div>
    </div>

    <h1>物理单位打印样式示例</h1>
    
    <p>本示例展示了如何使用物理单位（cm、mm、in）创建打印样式，确保打印出的文档具有精确的物理尺寸。</p>

    <div class="content-section">
      <h2 class="section-title">1. 文档内容</h2>
      <div class="text-content">
        <p>这是文档的主要内容区域。通过使用物理单位，我们可以确保在打印时，文档的各个部分都具有精确的物理尺寸。</p>
        <p>例如，页面宽度设置为21cm（A4纸宽度），页面高度设置为29.7cm（A4纸高度），页边距设置为2cm。</p>
      </div>
    </div>

    <div class="content-section">
      <h2 class="section-title">2. 表格示例</h2>
      <table class="table">
        <thead>
          <tr>
            <th>项目</th>
            <th>描述</th>
            <th>数量</th>
            <th>单价</th>
            <th>总价</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>项目1</td>
            <td>项目1的详细描述</td>
            <td>1</td>
            <td>100.00</td>
            <td>100.00</td>
          </tr>
          <tr>
            <td>项目2</td>
            <td>项目2的详细描述</td>
            <td>2</td>
            <td>50.00</td>
            <td>100.00</td>
          </tr>
          <tr>
            <td>项目3</td>
            <td>项目3的详细描述</td>
            <td>3</td>
            <td>33.33</td>
            <td>99.99</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="content-section">
      <h2 class="section-title">3. 注意事项</h2>
      <div class="text-content">
        <p>在使用物理单位时，需要注意以下几点：</p>
        <ul>
          <li>在屏幕显示中，物理单位会被转换为像素，转换比例取决于设备的像素密度（DPI）</li>
          <li>在打印样式中，物理单位会直接对应到实际的物理尺寸</li>
          <li>不同打印机可能会有微小的误差，但整体上会保持一致</li>
          <li>建议在设计打印样式时，使用标准纸张尺寸，如A4（21cm × 29.7cm）、Letter（8.5in × 11in）等</li>
        </ul>
      </div>
    </div>

    <div class="page-footer">
      <div>公司名称</div>
      <div>页码：1/1</div>
      <div>日期：2024年</div>
    </div>

    <button class="print-btn" onclick="window.print()">打印文档</button>
  </div>
</body>
</html>

效果：通过使用物理单位（cm），创建了一个A4纸尺寸的打印样式。在打印时，文档的各个部分都会按照指定的物理尺寸进行打印，确保打印出的文档具有精确的物理尺寸。

案例2：名片设计

场景：使用物理单位设计一个标准尺寸的名片。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>物理单位名片设计示例</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;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

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

    /* 名片样式 - 使用物理单位 */
    .business-card {
      width: 8.5cm; /* 标准名片宽度 */
      height: 5.5cm; /* 标准名片高度 */
      background-color: white;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      padding: 1cm;
      margin-bottom: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .card-front {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .card-header {
      margin-bottom: 0.5cm;
    }

    .name {
      font-size: 14pt;
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 0.2cm;
    }

    .title {
      font-size: 10pt;
      color: #7f8c8d;
      margin-bottom: 0.5cm;
    }

    .contact-info {
      font-size: 9pt;
      line-height: 1.4;
      color: #34495e;
    }

    .contact-item {
      margin-bottom: 0.2cm;
      display: flex;
      align-items: center;
    }

    .contact-label {
      width: 2cm;
      font-weight: bold;
    }

    .card-back {
      background-color: #2c3e50;
      color: white;
      padding: 1cm;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .company-info {
      font-size: 10pt;
      line-height: 1.4;
    }

    .company-name {
      font-size: 12pt;
      font-weight: bold;
      margin-bottom: 0.5cm;
    }

    .slogan {
      font-style: italic;
      margin-top: 0.5cm;
      font-size: 9pt;
      opacity: 0.8;
    }

    /* 打印样式 */
    @media print {
      body {
        background-color: white;
        padding: 0;
      }

      h1 {
        display: none;
      }

      .business-card {
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
      }

      .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1cm;
        justify-content: center;
      }
    }

    /* 名片容器 */
    .card-container {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
      justify-content: center;
    }

    /* 打印按钮 */
    .print-btn {
      margin-top: 2rem;
      padding: 0.75rem 1.5rem;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .print-btn:hover {
      background-color: #2980b9;
    }
  </style>
</head>
<body>
  <h1>物理单位名片设计示例</h1>
  
  <div class="card-container">
    <!-- 名片正面 -->
    <div class="business-card">
      <div class="card-front">
        <div class="card-header">
          <div class="name">张三</div>
          <div class="title">高级软件工程师</div>
        </div>
        <div class="contact-info">
          <div class="contact-item">
            <span class="contact-label">电话：</span>
            <span>13800138000</span>
          </div>
          <div class="contact-item">
            <span class="contact-label">邮箱：</span>
            <span>zhangsan@example.com</span>
          </div>
          <div class="contact-item">
            <span class="contact-label">网站：</span>
            <span>www.example.com</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 名片背面 -->
    <div class="business-card">
      <div class="card-back">
        <div class="company-info">
          <div class="company-name">科技有限公司</div>
          <div class="contact-item">
            <span class="contact-label">地址：</span>
            <span>北京市朝阳区</span>
          </div>
          <div class="contact-item">
            <span class="contact-label">电话：</span>
            <span>010-12345678</span>
          </div>
          <div class="contact-item">
            <span class="contact-label">邮箱：</span>
            <span>info@example.com</span>
          </div>
          <div class="slogan">创新科技，引领未来</div>
        </div>
      </div>
    </div>
  </div>

  <button class="print-btn" onclick="window.print()">打印名片</button>
</body>
</html>

效果：通过使用物理单位（cm），设计了一个标准尺寸的名片（8.5cm × 5.5cm）。在打印时，名片会按照指定的物理尺寸进行打印，确保打印出的名片具有标准的物理尺寸。

五、总结

cm、mm和in是CSS中的物理长度单位，它们基于现实世界的物理测量。通过合理使用这些单位，可以实现以下效果：

  1. 精确的物理尺寸：在需要精确控制元素物理尺寸的场景中使用
  2. 打印样式：创建与实际物理尺寸对应的打印布局
  3. 票据和标签：设计需要精确物理尺寸的票据、标签等
  4. 名片设计：创建标准尺寸的名片
  5. 海报和宣传材料：设计需要特定物理尺寸的宣传材料

最佳实践：

  • 在需要精确控制物理尺寸的场景中使用这些单位
  • 在打印样式中优先使用这些单位，确保打印出的文档具有精确的物理尺寸
  • 使用标准纸张尺寸，如A4（21cm × 29.7cm）、Letter（8.5in × 11in）等
  • 考虑不同打印机可能会有微小的误差
  • 结合其他单位（如pt、px）使用，发挥各自的优势

注意事项：

  • 在屏幕显示中，这些单位会被转换为像素，转换比例取决于设备的像素密度（DPI）
  • 在打印样式中，这些单位会直接对应到实际的物理尺寸
  • 不同设备的像素密度可能不同，因此在屏幕上看到的效果可能会有所差异
  • 对于不需要精确物理尺寸的场景，建议使用相对单位（如em、rem、%）

通过掌握这些物理单位的使用方法，你可以创建更加精确、专业的布局，尤其是在需要与物理世界尺寸对应的场景中。虽然这些单位不如相对单位常用，但在特定场景下，它们是实现精确物理尺寸的理想选择。

« 上一篇 CSS3 补充内容 - CSS3 单位 - ex 下一篇 » CSS3 补充内容 - CSS3 单位 - pt/pc
↑