1.CSS单位-CSS进阶
一、CSS单位
1.绝对单位
在
CSS中，绝对单位定义的大小是固定的。使用的是物理度量单位，显示效果不会受外界因素影响。但绝对单位一般多用于传统平面印刷，而极少用于前端开发。
在前端开发中，都不会用到绝对单位。
2.相对单位
在
CSS中，相对单位定义的大小是不固定的。
（1）常见的相对单位
| 相对单位 | 说明 |
|---|---|
| px | 像素 |
| % | 百分比 |
| em | 1em等于当前元素字体大小 |
| rem | 1rem等于根元素字体大小 |
（2）px
全称pixel，像素，指的是一张图片中最小的点，或计算机屏幕中最小的点。
当我们将一张图片放大n倍，你会发现：原来一张图片是由一个个小方点组成的，而每一个小方点就是一个像素。
① 分辨率
我们常听说，这台计算机的分辨率是
800px * 600px，指的就是计算机显示屏宽有800个小方点，高有600个小方点。
Ⅰ.分辨率不同，1px大小也不同
现在，我们知道
px是相对单位，但屏幕分辨率不同，1px的大小也不同。
（3）%
在
CSS中，支持百分比作为单位的属性很多，可分为 3 类：
width、height、font-size的百分比是相对于父元素“相同属性”的值来计算的。
line-height的百分比是相对于父元素的font-size值来计算的。
vertical-align的百分比是相对于当前元素的line-height值来计算的。
① 示例
Ⅰ.例1
若父元素
width、height为100px，子元素width、height为50%，则子元素的width、height实际为50px。若父元素
font-size为32px，子元素font-size为50%，则子元素的font-size实际为16px。
Ⅱ.例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style>
#dady{
width:200px;
height:160px;
border:1px solid #00FFFF; /*设置边框样式*/
font-size:32px;
}
#son{
width:50%; /*相对于父元素“相同属性”的值来计算的*/
height:50%;
border:1px solid #66A9FE; /*设置边框样式*/
font-size:50%;
}
</style>
</head>
<body>
<div id="dady">
見贤思齊
<div id="son">見贤思齊</div>
</div>
</body>
</html>
百分比单位例.png
（4）em
在
CSS中，em是相对于当前元素的字体大小而言。其中，
1em等于当前元素字体大小。此处的字体大小指的是以px为单位的font-size值。例如：当前元素的
font-size值为20px，则1em值为20px，依此类推。
注意
- 若当前元素的
font-size没有定义，则当前元素会继承父元素的font-size。
- 若当前元素的所有祖先元素都没有定义
font-size，则当前元素会继承浏览器默认的font-size，其中浏览器默认的font-size值都是16px。
3个小技巧
在
CSS中，em作为单位有以下 3 个小技巧：
- 首行缩进使用
text-index:2em实现。
- 使用
em作为统一单位。
- 使用
em作为字体大小单位。
① 首行缩进使用text-index:2em实现（重点）
我们写作文时，都会将每一段的段首缩进 2 个字的距离，这在网页排版中也是一样。
要想实现这个效果，
text-index值应该是font-size值的 2 倍。如果我们使用text-index:2em就可以轻松实现。
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style>
p{
font-size: 15px;
text-indent: 2em; /* 实现首行缩进，1em=当前元素字体大小，这里的2em等价于30px */
width: 360px;
}
</style>
</head>
<body>
<h3>念奴娇·赤壁怀古</h3>
<p>大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。</p>
<p>遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。</p>
</body>
</html>
首行缩进text-index为2em.png
对于首行缩进，使用
em作为单位会比使用px作为单位更好。因为使用
px作为单位，若我们定义当前元素的font-size为10px，则text-index为20px；若定义当前元素的font-size为15px，则text-index为30px，依此类推。也就是说，我们使用
em作为单位时，不管font-size定义为多少px，我们只需将text-index定义为2em即可，不需计算，十分方便。
② 使用em作为统一单位
所有浏览器默认字体大小都是
16px。我们若想要在一个页面中，统一使用
em作为单位，就可以拿默认字体大小开刀。简单来讲，对于任何元素我们都不需设置
font-size为多少px，二世继承根元素的font-size值16px，然后再使用em换算即可。
Ⅰ.简化font-size计算
若使用浏览器默认字体大小（16px），则em与px对应关系为：
1em = 16px * 1 = 16px
0.75em = 16px * 0.75 = 12px
但这有个缺点，就是结果不是整数，计算时还是有些麻烦，所以为了简化
font-size计算，我们在CSS中提前声明“body{font-size:62.5%}”。
Ⅱ.声明“body{font-size:62.5%}”
通过这个声明，我们可以使得默认字体大小变为
16px * 62.5% = 10px，此时em与px对应关系为：
1em = 10px
0.75em = 7.5px
在实际开发中，若想要统一使用
em作为单位，都是使用这个技巧。
Ⅲ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style>
body{
font-size: 62.5%; /*使得浏览器默认字体大小变为 10px */
}
#p1{
font-size: 1em;
}
#p2{
font-size: 1.5em;
}
#p3{
font-size: 2em;
}
</style>
</head>
<body>
<p id="p1">当前字体大小为1em，也就是10px</p>
<p id="p2">当前字体大小为1.5em，也就是15px</p>
<p id="p3">当前字体大小为2em，也就是20px</p>
</body>
</html>
使用em作为统一单位例1.png
Ⅳ.例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style>
*{
padding: 0;
margin: 0; /*设置内外边距为0*/
}
html{
font-size: 62.5%; /*使得浏览器默认字体大小变为 10px */
}
p{
display: inline-block;
border: 1px solid #DDA0DD;
}
#p1{ /*使用 px 作为单位*/
font-size: 15px;
width: 150px;
height: 75px;
text-indent: 30px; /*首行缩进2个字体大小*/
}
#p2{ /*使用 em 作为单位*/
font-size: 1.5em; /*此时，字体大小为15px*/
width: 10em; /*em是相对于当前元素的字体大小，等于10*1.5em = 10 * 15px */
height: 5em;
text-indent: 2em;
}
</style>
</head>
<body>
<p id="p1">人生若只如初见，何事秋风悲画扇。</p>
<p id="p2">人生若只如初见，何事秋风悲画扇。</p>
</body>
</html>
使用em作为统一单位例2.png
在
CSS中，em是相对于当前元素的字体大小而言。在第2个使用 em 作为单位中，
font-size为10px * 1.5 =15px，若width和height同样以em为单位，就要以当前元素的font-size再计算一次，width等于10 * 1.5em（15px）=150px，同理height等于5 * 1.5em（15px）=75px。
Ⅴ.实际开发
在实际开发中，对于
em，我们一般要计算2次：
- 第1次：计算当前元素
font-size属性的px值。
- 第2次：当前元素其它属性（如：width、height等）的
px值。
③ 使用em作为字体大小单位
对于一个页面的字体大小，使用
px作为单位时可扩展性不好，使用百分比作为单位时也不符合习惯，最佳选择是使用em作为单位来定义字体大小。使用em作为单位，当需要改变页面整体的文字大小时，我们只需要改变根元素字体大小即可，工作量变得非常少。
em这个特点在跨平台网站开发中有着明显的优势。
（5）rem
font size of the root element，指的是相对于根元素（html元素）的字体大小。
rem是CSS3新引入的单位，目前除了IE8及以前版本之外，大部分主流浏览器都是支持rem的。
rem布局是移动端最常用的字体大小之一。
① rem和em区别
- em是相对“ 当前元素 ”的字体大小。
- rem是相对“ 根元素 ”的字体大小。
- 这里的
font-size指的都是以px为单位的font-size值。
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style>
html{
font-size: 62.5%; /*使得浏览器默认字体大小变为 10px */
}
#daddy{
font-size: 2rem;
width: 200px;
height: 160px;
border:1px solid #00FFFF;
}
#girl{
font-size: 2rem;
width: 150px;
height: 100px;
border:1px solid #66A9FE;
}
</style>
</head>
<body>
<div id="daddy">
当时只道是寻常。
<div id="girl">当时只道是寻常。</div>
</div>
</body>
</html>
rem示例1.png
（6）实际开发
在实际开发中，
CSS单位用px好还是em好呢？在国外，大部分主流网站都是使用
em作为单位，而且W3C也建议使用em作为单位。但国内大多数网站，包括三大门户等，都是采用px作为单位。这是因为在国外，尤其是美国，有一些法律规定网站要具有适应性，对于
IE以前的版本无法调整那些使用px作为单位的字体大小，但现在的IE版本几乎都支持。在这里，推荐使用
px作为单位，因为px作为单位非常方便计算长度。
