0Pricing
CSS Academy · 课时

绝对单位：px、pt、cm

学习何时使用像素、点和厘米等固定绝对单位。

绝对单位：px、pt、cm 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

绝对单位与相对单位

CSS 单位分为两类：绝对单位（固定的现实世界测量单位）和相对单位（相对于其他对象进行缩放）。绝对单位是与设备无关的物理测量单位。

px — 像素

像素（px）是屏幕上最常用的绝对单位。在标准显示屏上，1px = 1 个设备像素。在高 DPI（视网膜）屏幕上，CSS 像素会对应多个设备像素，同时保持元素的视觉尺寸不变。

<button class="button">10px 20px padding</button>

pt — 点

点（pt）是印刷设计中的单位：1pt = 1/72 英寸。在 CSS 中，1pt = 4/3px（约为 1.33px）。它主要用于印刷样式表中的排版。

<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>

cm、mm、in — 物理单位

CSS 支持厘米（cm）、毫米（mm）和英寸（in）。这些单位适用于印刷场景，但在屏幕上并不可靠，因为屏幕 DPI 各不相同。

<div class="page">A4-width page (21cm), used for print layouts</div>

屏幕上的 px：实用指南

对于基于屏幕的网页设计，px 是唯一实用的绝对单位。即便如此，也不建议使用 px 设置字体大小，因为它会覆盖用户对浏览器字体大小的偏好。

设备像素比

现代显示屏的设备像素比（DPR）大于 1。2 倍的视网膜屏幕会为每个 CSS 像素渲染 2 个设备像素。因此，高 DPI 图片的尺寸需要达到显示尺寸的 2 倍或 3 倍。

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />

何时使用 px

请将 px 用于：

  • 边框宽度（1px 显示清晰）
  • 阴影和变换
  • 媒体查询断点（不过基于 em 的断点更稳健）
  • 需要精确像素控制的固定 UI 元素

排版中何时 NOT 使用 px

在 html 或 body 上设置 font-size: 16px，会在许多浏览器中覆盖用户的无障碍偏好。请改用相对于浏览器默认值的 rem。

Q — 四分之一毫米

q 单位等于四分之一毫米。它用于日本印刷排版，以实现精细的排版控制。在一般网页设计中很少使用。

PC — 派卡

派卡（pc）等于 12 点或 1/6 英寸。与点一样，派卡是印刷单位，在数字屏幕上很少需要使用。

印刷样式表中的绝对单位

印刷样式表是 CSS 中使用绝对单位最主要且合理的场景。物理单位可以确保打印页面在纸张上具有准确的尺寸。

<div class="print-body">
    <p class="page-break">Section one (page breaks after this when printed)</p>
    <p>Section two</p>
  </div>

快速检查

哪个绝对 CSS 单位等于 1/72 英寸？

回顾

绝对单位是独立于父元素的固定测量单位。px 是实用的屏幕单位。物理单位（pt、cm、in）用于印刷样式表。避免使用 px 进行排版——它会覆盖用户对字体大小的偏好。请改用 rem。

常见问题解答

「绝对单位：px、pt、cm」课时是免费的吗？

是的 — 「绝对单位：px、pt、cm」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「绝对单位：px、pt、cm」这节课中我会学到什么？

学习何时使用像素、点和厘米等固定绝对单位。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「绝对单位：px、pt、cm」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 绝对单位：px、pt、cm
  2. 相对单位：em 与 rem
  3. 视口单位：vw、vh、dvh
  4. Min、Max 与 Clamp 函数
← 返回 CSS Academy