关于CSS单位

来源：互联网发布：法院淘宝拍卖房产税费编辑：程序博客网时间：2024/06/05 16:36

   初学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及以前的版本外都支持，是移动端常用单位。

PSPS:国外大部分主流网站都是用em作为单位，w3c也建议我们使用em作为单位，因为有些法律规定网站要有适应性，国内大多数网站都是用px作为单位，至于用哪个好，只能说各有千秋吧。

阅读全文

0 0