在编写网页样式时，CSS单位决定了元素尺寸、间距、字体大小该如何计算。不同单位有着完全不同的参照基准，选错单位可能导致页面在桌面端正常，到了移动端却严重错位。掌握CSS单位的表示方式与计算逻辑，是前端开发的基本功。
一、绝对长度单位
绝对长度单位与现实物理尺寸挂钩，在大多数屏幕渲染场景下，它们最终都会被映射为像素。最常见的绝对单位是px（像素）。我们在代码里写width: 200px，意思就是元素渲染宽度为200个设备无关像素。
除了px，CSS还定义了cm、mm、in、pt、pc等绝对单位，例如1in等于2.54厘米，1pt等于1/72英寸。但在Web开发中，这些单位极少用于屏幕布局，更多出现在打印样式里。下面是一段使用px和pt的对比示例：
/* 屏幕布局常用 px */
.box {
width: 300px;
font-size: 16px;
}
/* 打印场景可能用 pt */
@media print {
.paper {
width: 21cm;
font-size: 12pt;
}
}
绝对单位的优势是结果可预期，写多少就是多少；劣势是缺乏弹性，无法根据用户设备自动调整，因此在响应式设计中通常不单独使用。
二、相对字体单位em与rem
em是一个相对单位，它相对于当前元素的字体大小。如果一个元素自身font-size为16px，那么width: 2em就等于32px。需要注意的是，当em用于设置字体大小时，它参照的是父元素的字体大小，这就容易在多层嵌套时引发“连锁放大”问题。
rem则是相对于根元素（即html标签）的字体大小。无论嵌套多深，1.5rem永远等于根字体大小的1.5倍。正因为这个稳定性，rem成为移动端适配的主流方案。下面演示em与rem的差异：
html {
font-size: 16px;
}
.parent {
font-size: 20px;
}
/* 子元素用 em，基于父级 20px，实际 40px */
.child-em {
font-size: 2em;
}
/* 子元素用 rem，基于根 16px，实际 32px */
.child-rem {
font-size: 2rem;
}
使用rem时，我们常通过JavaScript动态修改根字体大小，或者借助媒体查询实现不同屏幕下的缩放。它的缺点是对于不需要随根字体变化的部分（如边框）也需谨慎使用，否则线条会跟着变粗变细。
三、视口单位vw与vh
视口单位以浏览器可视区域为基准。vw表示视口宽度的百分之一，vh表示视口高度的百分之一。比如width: 50vw代表元素占屏幕宽度一半，height: 100vh则可实现铺满整屏。
这类单位非常适合做全屏海报、左右分栏等布局。不过在移动端，vh有时会把地址栏高度计算进去，导致实际可见区域出现滚动偏差。可以配合calc()做兼容处理：
/* 全屏容器 */
.full-screen {
width: 100vw;
height: 100vh;
}
/* 使用 calc 避免溢出 */
.safe-box {
height: calc(100vh - 60px);
}
视口单位的优点是不依赖父级或根元素，直接响应窗口变化；缺点是精细控制能力弱，一般要和px、rem混用以兼顾细节。
四、百分比与无单位数值
百分比%是最容易被误解的单位之一。它的参照物不是视口，而是父元素的对应属性。例如父级宽400px，子级width: 50%就是200px；但若是padding-top: 50%，则是相对父级宽度而非高度计算，这一特性常被用来做自适应正方形。
此外，CSS中还有一些无单位数值，如line-height: 1.5、z-index: 2、opacity: 0.8。它们不是长度单位，却也是“值的表示法”的一部分。误给line-height加px是新手常见错误，会导致行高无法随字体缩放。
/* 自适应正方形：padding 百分比基于父宽 */
.square {
width: 100%;
padding-top: 100%;
position: relative;
}
/* 正确写法：无单位行高 */
.text {
font-size: 14px;
line-height: 1.6;
}
理解百分比的参照规则和单位的有无，能帮你避开大量布局诡异的坑。综合来看，现代项目多以rem负责宏观缩放，px负责细节描边，vw/vh负责视口级响应，三者组合最为稳妥。