px 与 em 单位区别
CSS 中 px 和 em 单位的使用场景与换算方式
问题
CSS 中 px 和 em 有什么区别？各自适合什么场景？
解答
px - 绝对单位
px 是固定像素值，不会随其他元素变化。
.box {
width: 200px;
font-size: 16px;
padding: 10px;
}em - 相对单位
em 相对于当前元素的 font-size 计算。如果用于 font-size 属性本身，则相对于父元素的 font-size。
<div class="parent">
<div class="child">文字内容</div>
</div>.parent {
font-size: 16px;
}
.child {
/* font-size 相对于父元素：16px * 1.5 = 24px */
font-size: 1.5em;
/* padding 相对于当前元素的 font-size：24px * 2 = 48px */
padding: 2em;
}嵌套问题
em 会产生嵌套累积：
/* 每层嵌套都会累积计算 */
.level1 { font-size: 1.2em; } /* 假设根 16px → 19.2px */
.level2 { font-size: 1.2em; } /* 19.2px * 1.2 = 23.04px */
.level3 { font-size: 1.2em; } /* 23.04px * 1.2 = 27.65px */rem - 解决嵌套问题
rem 始终相对于根元素（<html>）的 font-size：
html {
font-size: 16px;
}
.box {
font-size: 1.5rem; /* 始终是 24px */
padding: 2rem; /* 始终是 32px */
}完整示例
<!DOCTYPE html>
<html>
<head>
<style>
html { font-size: 16px; }
.px-box {
font-size: 20px;
padding: 10px;
border: 1px solid blue;
}
.em-box {
font-size: 1.25em; /* 父元素 16px * 1.25 = 20px */
padding: 0.5em; /* 当前 20px * 0.5 = 10px */
border: 1px solid green;
}
.rem-box {
font-size: 1.25rem; /* 根元素 16px * 1.25 = 20px */
padding: 0.5rem; /* 根元素 16px * 0.5 = 8px */
border: 1px solid red;
}
</style>
</head>
<body>
<div class="px-box">px 单位</div>
<div class="em-box">em 单位</div>
<div class="rem-box">rem 单位</div>
</body>
</html>关键点
px是绝对单位，值固定不变em相对于当前元素的font-size，用于font-size属性时相对于父元素em嵌套会累积计算，容易失控rem始终相对于根元素，避免嵌套问题- 响应式布局推荐
rem，组件内部间距可用em
目录