使用相对长度单位em布局网页内容
前言：在页面开发中，页面元素的尺寸大小和页面的字体大小都是我们不可忽略的内容，一个美观大方、层次分明的页面会让人看起来非常舒服，反之，一个排版布局乱七八糟的页面，不仅用户体验度差，还会增加页面的复杂性，况且在各种设备终端层出不穷的今天，页面的设计更是重要中的重要！对此，我们可以试着对页面元素的大小以及字体的大小，都设置为相对值，不再是固定不变的，怎么样？CSS中，专门有这样的一个单位——em(相对长度单位)即可实现，我们今天就来看看如何使用相对长度单位em布局网页内容？
01
1em等于多少px?
下面我们可以先来看一段代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html {
font-size: 1em;
}
</style>
</head>
<body>
<p>段落1</p>
</body>
</html>
本代码中，我们将html的字体设置成了1em,一般浏览器默认字体大小是16px，那我们来看看，“段落1”的字体大小是多少px?
编辑
答案是16px,也就是当我们html的值是1em时，它的子元素的字体大小都是以浏览器默认的字体大小来呈现出来的。带着这个结论，我们在CSS中新添如下代码：
body{
font-size: 1.5em;
}
再次看看“段落1”的字体大小是多少？
编辑
答案是24px，那么这个24是如何来的呢？“段落1”的字体大小=继承自父元素body的像素1.5em*16px而得来的。接下来我们将p的的字体大小也改成1.5em，你们猜“段落1”的字体大小是多少呢？
p{
font-size: 1.5em;
}
编辑
答案是36px。“段落1”的字体大小=1.5em*该父级元素body的字体大小24px，这个规律大家都知道吧。
到现在为止，我们就可以总结一下em的特点了：
- em的值并不是固定的，比如有同学可能自己算了算，将em的默认值当成了16px，其实不然。如果照1em=16px来算的话，最后“段落1”的字体大小应该是1.5em*16px=24px才对，但是实际却是36px。
- em会随着父级元素的字体大小的变化而变化的。
02
如何让1em=10px？
由前面的结论我们知道了，浏览器默认的字体大小为16px.那么可以定位html的1em的值就为16px，下面层级如果有变化，依次去乘以16px即可，那么问题来了，次次乘以父级元素的大小也是很麻烦的，可不可以把em的值等于10px,这样10em即是100px,岂不是更好？
我们可以这样修改一下代码：
html{
font-size: 62.5%;
}
p{
font-size: 1.5em;
}
再看看“段落1”的字体大小是不是1.5em*10px=15px呢？
编辑
确实是的！那是如何做到的呢？前面我们也说过，浏览器默认的字体大小是16px.言外之意就是设置了100%，那如何让它变成10px呢？不就是62.5%吗？
这就是相对长度单位em的用法，是不是很庆幸自己又学会了一个知识点呢？
- 点赞
- 收藏
- 关注作者
评论（0）