CSS单位详解-优快云博客

本文链接：https://blog.youkuaiyun.com/github_38535279/article/details/72512976

本文详细介绍了CSS中的单位，包括绝对单位和相对单位，并重点探讨了px、%、em和rem这几种常用的相对单位。通过实例说明了这些单位在网页布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   初学CSS，相信大家都会用**px**作为单位使用，其实CSS还有很多单位，可以分为两类：**绝对单位**和**相对单位**。绝对单位一般用于传统平面印刷，很少用于前端开发，这里我们只讨论相对单位。

相对单位主要有以下这些：
- px：像素
- %：百分比
- em：1em等于“当前元素”的字体大小
- rem：1rem等于“根元素”的字体大小

除以上这些单位，还有vm，ex，vh等，这些一般用于移动端开发，这里暂且不讨论。

1.px
全称是pixel（像素），指的是一张图片或者计算机屏幕中的最小的点，很多地方把px作为绝对单位来讲，严格来讲，px也属于相对单位，因为屏幕分辨率不同，1px的大小也不同。

2.%
在CSS中，使用%作为单位的属性大致可以分为三类：
1. width,height,font-size的百分比值相对于父元素”相同属性”的值来计算的。
2. line-height的百分比值是根据父元素的“font-size”值计算的。
（line-height有点特殊，如line-height：150%是根据父元素的font-size值计算的，而line-height：1.5是根据当前元素的font-size值计算的）
3. vertical-align的百分比是根据当前元素的line-height值来计算的。

3.em
em的大小是相对于“当前元素”的字体大小而言的，其中1em等于当前元素的font-size值，如果当前元素没有定义font-size，则继承其父元素的font-size，若父元素也没有定义，就使用浏览器默认的font-size值，这里同时指出，所有浏览器的默认font-size都是16px。
关于em的三个应用：
(1)方便首行缩进两个字符
可以使用text-indent:2em，这样无论当前字体多少px，都可以用这个属性值实现首行缩进两个字符。
(2)使用em作为统一单位
首先如前面所说，所有浏览器的默认font-size值都是16px。
如果我们不想用px作为整个页面的单位，而是使用em的话，就可以拿默认字体大小开刀，因为62.5%×16px=10px，所以首先申明body{font-size:10px}或者body{font-size:62.5%}，使得默认字体大小变为10px，以后任何元素就都不需要设置多少px，只要将需要的px值除以10，就能得到以em为单位的值。比如12px=1.2em

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>em单位</title>

    <style type="text/css">
        body{font-size:62.5%;}
        #p1{font-size:1em;}
        #p2{font-size:1.5em;}
        #p3{font-size:2em;}
        #p4{font-size:10px;}
        #p5{font-size:15px;}
        #p6{font-size:20px;}
    </style>
</head> 
<body>
    <p id="p1">当前字体大小为1em</p>
    <p id="p2">当前字体大小为1.5em</p>
    <p id="p3">当前字体大小为2em</p>
    <p id="p4">当前字体大小为10px</p>
    <p id="p5">当前字体大小为15px</p>
    <p id="p6">当前字体大小为20px</p>
</body>
</html>

以上代码的运行结果如图，可见两种表示方法的字体大小是一样的。
以上代码结果如图
ps：要时刻注意em是相对于”当前元素“的font-size，比如当一个元素中重写了font-size的值，而不是依旧继承body的值，若当这个元素需要定义长或宽等一些值时，是根据当前元素的font-size值，而不是body的font-size值。在实际开发中，我们一般都需要计算两次。
(3)使用em作为字体大小单位
对于一个页面的字体，使用px的可扩展性不好，使用%也不符合习惯，最佳选择就是使用em作为字体单位，当需要改变页面整体字体大小时，只要改变根元素的大小即可，em在跨平台网站开发中有着明显的优势。
4.rem
rem，指的是相对于根元素(即html元素)的字体大小,是CSS3新引进的单位，除IE8及以前的版本外都支持，是移动端常用单位。