绝对单位

绝对单位是 CSS 中固定大小的单位，不会根据其他因素变化。理解绝对单位对于创建精确的布局和打印样式非常重要。

绝对单位概述

什么是绝对单位

绝对单位是固定大小的单位，它们的值不会根据屏幕大小、字体大小或其他因素变化。绝对单位主要用于打印样式和需要精确控制的场景。

绝对单位的特点

• 大小固定，不会变化
• 适合打印样式
• 适合需要精确控制的场景
• 不适合响应式设计

px（像素）

基本概念

像素是最常用的绝对单位，表示屏幕上的一个点。

使用方法

/* 使用像素设置宽度 */
.box {
  width: 200px;
}

/* 使用像素设置高度 */
.box {
  height: 100px;
}

/* 使用像素设置字体大小 */
.text {
  font-size: 16px;
}

/* 使用像素设置边框 */
.border {
  border: 1px solid #333;
}

/* 使用像素设置内边距 */
.padding {
  padding: 10px 20px;
}

/* 使用像素设置外边距 */
.margin {
  margin: 15px 30px;
}

实际应用

/* 卡片组件 */
.card {
  width: 300px;
  padding: 20px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 按钮样式 */
.button {
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 输入框样式 */
.input {
  padding: 10px 15px;
  font-size: 14px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

pt（点）

基本概念

点主要用于打印，1 点等于 1/72 英寸。

使用方法

/* 使用点设置字体大小（打印） */
.print-text {
  font-size: 12pt;
}

/* 使用点设置边距（打印） */
.print-margin {
  margin: 10pt 20pt;
}

实际应用

/* 打印样式 */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  h1 {
    font-size: 24pt;
    margin-bottom: 10pt;
  }

  p {
    margin-bottom: 10pt;
  }
}

cm（厘米）

基本概念

厘米用于表示物理尺寸，1 厘米等于 10 毫米。

使用方法

/* 使用厘米设置宽度 */
.box {
  width: 10cm;
}

/* 使用厘米设置高度 */
.box {
  height: 5cm;
}

实际应用

/* 打印样式 */
@media print {
  .page {
    width: 21cm;
    height: 29.7cm;
    padding: 2cm;
  }
}

mm（毫米）

基本概念

毫米用于表示物理尺寸，1 毫米等于 0.1 厘米。

使用方法

/* 使用毫米设置宽度 */
.box {
  width: 100mm;
}

/* 使用毫米设置高度 */
.box {
  height: 50mm;
}

实际应用

/* 打印样式 */
@media print {
  .page {
    width: 210mm;
    height: 297mm;
    padding: 20mm;
  }
}

in（英寸）

基本概念

英寸用于表示物理尺寸，1 英寸等于 2.54 厘米。

使用方法

/* 使用英寸设置宽度 */
.box {
  width: 4in;
}

/* 使用英寸设置高度 */
.box {
  height: 2in;
}

实际应用

/* 打印样式 */
@media print {
  .page {
    width: 8.5in;
    height: 11in;
    padding: 1in;
  }
}

绝对单位的对比

单位转换

1 in = 2.54 cm = 25.4 mm = 72 pt = 96 px

单位选择

/* 屏幕 - 使用 px */
.screen {
  width: 200px;
  font-size: 16px;
}

/* 打印 - 使用 pt */
.print {
  font-size: 12pt;
}

/* 物理尺寸 - 使用 cm 或 mm */
.physical {
  width: 10cm;
  height: 50mm;
}

绝对单位的实际应用

边框宽度

/* 使用像素设置边框宽度 */
.border {
  border: 1px solid #333;
}

.thick-border {
  border: 3px solid #333;
}

字体大小

/* 使用像素设置字体大小 */
.text {
  font-size: 16px;
}

.title {
  font-size: 24px;
}

间距

/* 使用像素设置间距 */
.padding {
  padding: 10px 20px;
}

.margin {
  margin: 15px 30px;
}

打印样式

/* 打印样式 */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    margin: 1in;
  }

  h1 {
    font-size: 24pt;
    margin-bottom: 10pt;
  }

  h2 {
    font-size: 18pt;
    margin-bottom: 8pt;
  }

  p {
    margin-bottom: 10pt;
  }
}

物理尺寸

/* 物理尺寸 */
.photo {
  width: 10cm;
  height: 15cm;
  border: 1px solid #333;
}

绝对单位的最佳实践

1. 屏幕设计使用 px

/* 推荐 - 屏幕设计使用 px */
.screen {
  width: 200px;
  font-size: 16px;
}

/* 不推荐 - 屏幕设计使用 pt */
.screen {
  width: 150pt;
  font-size: 12pt;
}

2. 打印样式使用 pt

/* 推荐 - 打印样式使用 pt */
@media print {
  body {
    font-size: 12pt;
  }
}

/* 不推荐 - 打印样式使用 px */
@media print {
  body {
    font-size: 16px;
  }
}

3. 物理尺寸使用 cm 或 mm

/* 推荐 - 物理尺寸使用 cm 或 mm */
.print {
  width: 21cm;
  height: 29.7cm;
}

/* 不推荐 - 物理尺寸使用 px */
.print {
  width: 794px;
  height: 1123px;
}

4. 避免在响应式设计中使用绝对单位

/* 推荐 - 响应式设计使用相对单位 */
.responsive {
  width: 100%;
  padding: 1rem;
}

/* 不推荐 - 响应式设计使用绝对单位 */
.responsive {
  width: 300px;
  padding: 16px;
}

总结

绝对单位是 CSS 中固定大小的单位：

1. px（像素）：最常用的绝对单位，用于屏幕设计
2. pt（点）：用于打印样式
3. cm（厘米）：用于物理尺寸
4. mm（毫米）：用于物理尺寸
5. in（英寸）：用于物理尺寸
6. 单位转换：1 in = 2.54 cm = 25.4 mm = 72 pt = 96 px
7. 实际应用：边框宽度、字体大小、间距、打印样式
8. 最佳实践：屏幕设计用 px，打印样式用 pt，物理尺寸用 cm 或 mm

记住以下几点：

• 理解绝对单位的特点和应用场景
• 掌握不同绝对单位的使用方法
• 学会根据需求选择合适的绝对单位
• 注意绝对单位不适合响应式设计
• 遵循绝对单位的最佳实践