CSS 绝对与相对单位

网站

CSS 长度单位

CSS 单位

引入

写 CSS 时，很多地方都要设置大小，比如文字大小、宽高、边距、圆角、间距。

这时候就会遇到单位问题：有的单位是固定的，有的单位会跟着字体、父元素或者屏幕大小变化。理解单位，主要是为了知道尺寸到底是写死，还是跟着环境变化。

正文

定义

定义

CSS 单位用于表示长度或尺寸。常见可以分成两类：绝对单位和相对单位。

绝对单位的大小比较固定，不依赖父元素或视口。

相对单位会参考其他东西来计算，比如父元素尺寸、当前字体大小、根元素字体大小、视口宽高等。

为什么需要区分

如果所有尺寸都只用固定值，页面虽然容易控制，但在不同屏幕下可能不够灵活。

如果合理使用相对单位，页面在手机、平板、电脑上会更容易适配，也更适合做响应式布局。

可以先简单记住：

• px 更固定，适合明确尺寸
• em、rem、%、vw、vh 更适合相对变化
• 做响应式页面时，相对单位通常更常见

语法

单位通常跟在数值后面一起使用。

.box {
  width: 300px;
  padding: 1rem;
  margin-bottom: 10%;
  font-size: 1.2em;
}

这里的 300px、1rem、10%、1.2em 都是长度值。

绝对单位

绝对单位表示比较固定的长度。

日常写网页最常见的绝对单位是 px，其他像 cm、mm、in 更常见于打印或特定排版场景。

常见绝对单位

单位	作用
px	像素，网页开发里最常用的固定单位
pt	点，常见于打印排版
cm	厘米
mm	毫米
in	英寸

px

px 是最常见的长度单位。

h1 {
  font-size: 24px;
}
 
.card {
  width: 320px;
}

它的特点是比较直观，写多少就是一个比较明确的尺寸，适合用来控制边框、圆角、小范围间距、图标大小等。

但如果大量尺寸都完全写死，页面在不同设备上可能不够灵活。

其他绝对单位

有些绝对单位平时网页里不常用，但知道就行。

单位	大致理解
in	英寸
cm	厘米
mm	毫米
pt	点，1pt 是 1/72 英寸
pc	派卡，1pc 等于 12pt

这些单位在普通网页布局里通常不如 px 常用。

相对单位

相对单位不会只看自己，而是会参考别的尺寸。

它更适合做自适应、响应式和跟随上下文变化的样式。

常见相对单位

单位	相对于谁
%	相对于父元素的相关尺寸
em	相对于当前元素的字体大小
rem	相对于根元素的字体大小
vw	相对于视口宽度
vh	相对于视口高度

%

% 表示百分比，通常是相对于父元素来计算。

.container {
  width: 80%;
}

这表示 .container 的宽度是父元素宽度的 80%。

常见场景：

• 容器宽度跟着父元素变化
• 图片、输入框宽度自适应
• 布局中不想把尺寸写死

img {
  max-width: 100%;
}

这里的 100% 表示图片最大不要超过父元素宽度。

注意：% 到底参考谁，要看具体属性。有些属性参考父元素宽度，有些参考父元素高度，不能一概而论。

em

em 相对于当前元素的字体大小。

.title {
  font-size: 20px;
  margin-bottom: 1em;
}

这里的 1em 就等于 20px。

如果当前元素的 font-size 变了，em 计算出来的结果也会跟着变。

.button {
  font-size: 16px;
  padding: 0.5em 1em;
}

这种写法常用于按钮、标签、局部组件，让间距跟着文字大小一起变化。

注意：em 会受到层级影响，如果父元素和子元素都用了 em，有时候会越算越大，初学时比较容易绕。

rem

rem 是 root em，相对于根元素，也就是 html 的字体大小。

html {
  font-size: 16px;
}
 
.text {
  font-size: 1.5rem;
}

这里的 1.5rem 就等于 24px。

rem 的好处是参考基准更统一，不像 em 那样容易受到局部层级影响。

所以很多项目会用 rem 控制：

• 文字大小
• 内外边距
• 圆角
• 组件间距

浏览器默认根字体大小通常是 16px，所以：

• 1rem 通常等于 16px
• 2rem 通常等于 32px
• 0.75rem 通常等于 12px

但这个值不是永远固定的，如果根元素字体大小改了，rem 也会一起变化。

vw 和 vh

vw 和 vh 是和视口相关的单位。

• 1vw 表示视口宽度的 1%
• 1vh 表示视口高度的 1%

.banner {
  width: 100vw;
  height: 50vh;
}

这表示：

• .banner 宽度占整个视口宽度
• 高度占视口高度的一半

这种单位常用于：

• 首屏区域
• 全屏背景
• 根据屏幕大小变化的模块

注意：移动端浏览器的地址栏显示和收起，可能会让 vh 的表现看起来有点跳动，所以实际项目里要多测试。

em 和 rem 的区别

这两个单位很容易混。

单位	参考对象	特点
em	当前元素的字体大小	更灵活，但容易受层级影响
rem	根元素字体大小	更统一，项目里更常用

如果只是想统一控制整站大小，通常优先考虑 rem。

如果是某个小组件内部，想让间距跟文字一起变化，em 也很合适。

calc() 函数

calc() 是 CSS 的计算函数，可以在写样式时进行动态计算，支持混合使用不同单位。

语法

.box {
  width: calc(100% - 80px);
  height: calc(100vh - 120px);
  padding: calc(1rem + 10px);
}

calc() 里可以用 +、-、*、/ 四种运算符。

运算规则

• + 和 - 运算符两边必须有空格
• * 和 / 运算符两边可以不加空格，但建议加上更清晰
• 可以混合不同单位，比如 100% - 20px、50vw + 2rem
• 除法运算时，除数不能为 0
• 支持嵌套使用，但不建议嵌套太深

/* 正确 */
width: calc(100% - 20px);
width: calc(100% / 3);
 
/* 错误：加减运算符两边缺少空格 */
width: calc(100%-20px);
 
/* 正确：乘除可以不加空格，但建议加 */
width: calc(100% * 0.5);
width: calc(100%*0.5);

常见使用场景

固定边距的自适应宽度

.sidebar {
  width: 300px;
}
 
.content {
  width: calc(100% - 300px);
}

让内容区域占据除侧边栏之外的全部宽度。

视口减去固定高度

.header {
  height: 80px;
}
 
.main {
  height: calc(100vh - 80px);
}

让主内容区域占满除头部外的所有视口高度。

网格布局中的间距计算

.card {
  width: calc(33.333% - 20px);
  margin-right: 20px;
}

实现三列布局，每列之间有固定间距。

响应式字体大小

h1 {
  font-size: calc(1.5rem + 2vw);
}

让标题大小随视口宽度变化，同时保持基础大小。

居中偏移

.tooltip {
  position: absolute;
  left: calc(50% - 100px);
}

让元素在父元素中心位置左侧偏移固定距离。

特点

• 计算在浏览器渲染时实时进行，不是预处理
• 可以解决单纯用百分比或固定单位难以实现的布局
• 比用 JavaScript 计算更高效，样式更集中
• 在响应式设计中特别有用

注意事项

• 加减运算符（+ 和 -）两边必须有空格，否则无效
• 不能用于不支持数值计算的属性，比如 display、position
• 浏览器兼容性很好，现代浏览器都支持
• 过于复杂的嵌套计算会降低可读性，建议保持简洁

例子

响应式内容区域

这个例子里同时用了 px、% 和 rem。

<div class="content">
  <h1>文章标题</h1>
  <p>这是一段正文内容。</p>
</div>

.content {
  width: 90%;
  max-width: 720px;
  padding: 1.5rem;
  margin: 24px auto;
}
 
.content h1 {
  font-size: 2rem;
}

这里可以这样理解：

• width: 90%; 让内容区域跟着页面宽度变化
• max-width: 720px; 防止大屏幕上内容太宽
• padding: 1.5rem; 让内边距跟整体字号体系更统一
• margin: 24px auto; 让内容块上下有固定间距，并水平居中

让按钮跟着文字大小变化

<button class="btn">提交</button>

.btn {
  font-size: 18px;
  padding: 0.5em 1em;
  border-radius: 0.5em;
}

这里按钮的内边距和圆角都跟 font-size 有关系。

如果文字变大，按钮也会一起显得更协调。

常见用法

场景	更常见的单位
边框粗细	px
小图标尺寸	px
文字大小体系	rem
组件内局部间距	em
容器宽度	%
全屏区域高度	vh
跟屏幕宽度变化的模块	vw

特点

• px 比较固定，写起来直观
• % 适合跟着父元素变化
• em 适合让局部组件按自己的字号一起缩放
• rem 适合统一整站的尺寸节奏
• vw、vh 适合和视口尺寸绑定
• 单位没有绝对谁更好，关键是看场景

注意事项

• 不要所有尺寸都只用 px，不然后期做响应式会比较累
• em 容易受到嵌套层级影响，写复杂结构时要特别注意
• rem 更稳定，通常比 em 更适合做全局尺寸体系
• width: 100vw; 有时会因为滚动条导致轻微横向溢出，要实际测试
• height: 100vh; 在移动端可能受浏览器界面影响
• % 的参考对象要看属性，不是所有百分比都按同一个基准算

理解

我现在会把 CSS 单位理解成“尺寸参照物”的选择。

如果我想要一个明确固定的大小，就更偏向用 px。

如果我希望它能跟着父元素、字体或者屏幕一起变化，就更适合用 %、em、rem、vw、vh。

所以单位本身不只是写法区别，它其实决定了页面是更死板，还是更灵活。

引出

理解了单位之后，后面再看 CSS 响应式设计、CSS 盒模型 和 CSS Flexbox 会更容易明白尺寸为什么会那样变化。