数值在 CSS 中的基本含义与分类
带单位数值与无单位数值的区别
在 CSS 中，数值可以带有单位，也可以是单位无单位的数值。带单位的数值明确了长度、时间、角度等的度量单位，如 px、em、rem、%、deg 等，便于跨浏览器的一致渲染。单位无单位的数值通常用于一些需要纯数量或比例的属性，如 line-height 的无单位写法、font-weight 的数字、以及 z-index 这类不需要单位的数值。正确区分两者有助于避免意外的布局跳变。
/* 带单位示例 */
.box { width: 200px; height: 50px; font-size: 16px; }/* 无单位示例（某些属性） */
.text { line-height: 1.5; z-index: 10; font-weight: 600; }
此外，0 是一个特殊的数值，在多数属性中可以省略单位书写，例如 margin: 0、(0 也可以写成 0px、0em 等形式，浏览器会正确解析，但通常推荐省略单位以提升可读性)。理解 0 的单位可省略性是编写简洁 CSS 的关键之一。
/* 0 可以直接写为 0 */
.box { margin: 0; padding: 0; }/* 也可写成带单位的 0，但不推荐 */
.box2 { margin: 0px; padding: 0em; }
常见单位及其适用场景
常见单位按语义分为绝对单位与相对单位。px 是最常用的绝对单位，适合精确像素对齐；em 与 rem 属于相对单位，便于实现响应式字体和间距的缩放；% 根据父元素进行相对布局，常用于宽度和高度的自适应；vw、vh、vmin、vmax 则用于视口尺度的自适应。选择合适的单位能够提升跨设备的一致性与可维护性。
:root { --gap: 1rem; }
/* 结合不同单位实现自适应排布 */
.card { width: 90%; max-width: 1200px; padding: 1rem; font-size: 1rem; }/* 示例：视口单位实现自适应宽度与边距 */
.hero { width: 100vw; height: 50vh; margin-left: 5vw; }
动态布局中的数值计算：calc、clamp、min/max
calc 的基本用法
calc() 提供在同一属性中混合使用不同单位的能力，便于实现灵活的布局与尺寸。通过 加减乘除运算，可以把百分比、视口单位、像素等组合起来，达到更精准的排布效果。注意运算符之间要有空格，以确保浏览器正确解析。
/* 常见用法：宽度随容器变化，同时保留内部留白 */
.panel { width: calc(100% - 40px); padding: calc(1em + 6px); }/* 结合不同单位的复杂示例 */
.grid { grid-gap: calc(2vmin + 8px); }
响应式取值：clamp、min、max
clamp()、min()、max() 可以在一个表达式中表达上下界，常用于实现响应式字体、间距等。clamp 的形式为 clamp(min, val, max)，会在 min 与 max 之间截取 val；如果 val 小于 min 就取 min，大于 max 就取 max。这是实现自适应设计的强大工具。
/* 响应式字体：在最小 14px 与最大 24px 之间随视口变化 */
body { font-size: clamp(14px, 2vw + 6px, 24px); }/* 宽度自适应上限与下限 */
.container { width: clamp(320px, 60%, 1200px); }
前端开发实战：数值在字体、布局、动画中的应用
字体、行高、字距的数值策略
在排版层面，字体大小通常使用相对单位（如 rem），以便随根元素字体缩放而整体协同放大或缩小。行高可以使用无单位数值实现紧凑或通透的竖向节奏，也可以搭配单位以实现更直观的间距感。字距和字重的数值选择直接影响可读性，需结合设计系统进行统一。
:root { font-size: 16px; }
.body-copy { font-size: 1rem; line-height: 1.5; letter-spacing: 0.01em; }/* 结合响应式策略的字体与行高 */
.article-title { font-size: clamp(20px, 2.5vw, 32px); line-height: 1.1; }
变换、过渡与动画中的数值
在交互和动画中，数值用于控制时间、距离、角度等，例如 transition-duration、transform、animation 等属性。单位不僅是美观，还是性能与流畅度的重要影响因素，应结合硬件加速和节流策略进行设计。
/* 平滑的平移与缩放动画 */
.box { transition: transform 0.25s ease; transform: translateX(40px) scale(1.02); }/* 使用贝塞尔曲线控制动画曲线与时长 */
.floating { animation: float 2s cubic-bezier(.25,.8,.25,1) infinite; }
@keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
