使用相对长度单位em布局网页内容

妖狐艹你老母 2022-12-25 02:48 139阅读 0赞

![format_png][]

![format_png 1][]

顺便问一下哈？那个辣椒酱大家感觉怎么样，你们也买了也尝了，是不是该反馈反馈啦~~如果还有想要的，可以联系我呐！

原文地址：[自从有了这款辣椒酱，拌饭再也不用老干妈][Link 1]

前言：在页面开发中，页面元素的尺寸大小和页面的字体大小都是我们不可忽略的内容，一个美观大方、层次分明的页面会让人看起来非常舒服，反之，一个排版布局乱七八糟的页面，不仅用户体验度差，还会增加页面的复杂性，况且在各种设备终端层出不穷的今天，页面的设计更是重要中的重要！对此，我们可以试着对页面元素的大小以及字体的大小，都设置为相对值，不再是固定不变的，怎么样？CSS中，专门有这样的一个单位——em(相对长度单位)即可实现，我们今天就来看看**如何使用相对长度单位em布局网页内容？**

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?

![format_png 2][]

答案是16px,也就是当我们html的值是1em时，它的子元素的字体大小都是以浏览器默认的字体大小来呈现出来的。带着这个结论，我们在CSS中新添如下代码：

body{
        font-size: 1.5em;
    }

再次看看“段落1”的字体大小是多少？

![format_png 3][]

答案是24px，那么这个24是如何来的呢？“段落1”的字体大小=继承自父元素body的像素1.5em\*16px而得来的。接下来我们将p的的字体大小也改成1.5em，你们猜“段落1”的字体大小是多少呢？

p{
        font-size: 1.5em;
    }

![format_png 4][]

答案是36px。“段落1”的字体大小=1.5em\*该父级元素body的字体大小24px，这个规律大家都知道吧。

到现在为止，我们就可以总结一下em的特点了：

1.  em的值并不是固定的，比如有同学可能自己算了算，将em的默认值当成了16px，其实不然。如果照1em=16px来算的话，最后“段落1”的字体大小应该是1.5em\*16px=24px才对，但是实际却是36px。

1.  em会随着父级元素的字体大小的变化而变化的。

如何让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呢？

![format_png 5][]

确实是的！那是如何做到的呢？前面我们也说过，浏览器默认的字体大小是16px.言外之意就是设置了100%，那如何让它变成10px呢？不就是62.5%吗？

这就是相对长度单位em的用法，是不是很庆幸自己又学会了一个知识点呢？

![format_png 6][]

**往期精彩**

[binarySearch与IndexOf的那些事儿~][binarySearch_IndexOf]

[2020-11-01][binarySearch_IndexOf]

[![format_png 7][] ][binarySearch_IndexOf]

[新机必装！那些你不知道的实用技软件在这里！文末免费获取][Link 2]

[2020-10-31][Link 2]

[![format_png 8][] ][Link 2]

[自从有了这款辣椒酱，拌饭再也不用老干妈][Link 1]

[2020-10-30][Link 1]

[![format_png 9][] ][Link 1]

[如何使用bootstrap实现轮播图？][bootstrap]

[2020-10-29][bootstrap]

[![format_png 10][] ][bootstrap]

[班级日常分享：一天一瞬间！][Link 3]

[2020-10-29][Link 3]

[![format_png 11][] ][Link 3]

[中流击水，浪遏飞舟][Link 4]

[2020-10-28][Link 4]

[![format_png 12][] ][Link 4]

![format_png 13][]

![format_png 14][]

点分享

![format_png 15][]

点点赞

![format_png 16][]

点在看

[format_png]: /images/20221120/9a0a547800bc4aa491d69a424abd2e02.png
[format_png 1]: /images/20221120/484eb3357617498e954dc2ec3d88f303.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef7da0f8666b66e75eef8907fb9a9e8e55a0ea9a2fd87cc986259f3c3866c05c77aaab98&idx=1&mid=2247497116&scene=21&sn=c72b9c0f8d08612b1187bf31d42c8e31#wechat_redirect
[format_png 2]: /images/20221120/8fa98f7da5714137a2f47ab68c55ae5c.png
[format_png 3]: /images/20221120/a6280a2f60ba48f39944ba411b0937e9.png
[format_png 4]: /images/20221120/569bc7cb09f14f1dab4dcc84cd2f6f24.png
[format_png 5]: /images/20221120/389d464b1a1847ac8d7a259c564593e1.png
[format_png 6]: /images/20221120/9c3d462dd2c74deb86d5cddeeb48e6a1.png
[binarySearch_IndexOf]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef2da0f8663b796ed49537e087039e66ad2e49d1179bd32a2fe9b97b2218874281a54e7a&idx=1&mid=2247497164&scene=21&sn=ea481730efb5c9b9d112968edf6adf23#wechat_redirect
[format_png 7]: /images/20221120/dfede9c4a2034c2d8f85d6bd048ce50c.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef43a0f866559246d6b1a44235025fe3c6658b9ae3ae5ad0c281fcb590e6e7f90c568e50&idx=1&mid=2247497122&scene=21&sn=9e3f76c4bcf2b1613de1e2d478130790#wechat_redirect
[format_png 8]: /images/20221120/e7e9e1a9c7c844888314dbefc6ab79c0.png
[format_png 9]: /images/20221120/df4ce7ffe5be4d22ac1d32d8e2c350ee.png
[bootstrap]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef66a0f86670e227bf586ba840d0472375dc3649e3e344dd5d83909636f30d9bdc3f48e5&idx=1&mid=2247497095&scene=21&sn=00a48378c3447b28c7b22de2c005ef1f#wechat_redirect
[format_png 10]: /images/20221120/c93b5581313a4ec6afdfa47537add93b.png
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef66a0f8667062e2e7c8be7c13a75a73e029c8a35635c41ca80680e5f7fb8dc2d973d998&idx=2&mid=2247497095&scene=21&sn=8d22cb8183ae274c8c64712be2fb5d41#wechat_redirect
[format_png 11]: /images/20221120/f7f63c74a6994cac97ef2d90ecf4ee57.png
[Link 4]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978feff1a0f866e7504fbc0e5596403ad11a6922d6525a3b9667452dd04bd9afd56637b61bd6&idx=1&mid=2247496976&scene=21&sn=d57b6c1e0895ea16a66c61feacadb5a8#wechat_redirect
[format_png 12]: /images/20221120/c4c40f45eb3f4ea38e112c72ec5b6fef.png
[format_png 13]: /images/20221120/777e6289aaac4ca4982de467ddfdf8a8.png
[format_png 14]: /images/20221120/1e72d7ad328642c782dfa503cf0fa30a.png
[format_png 15]: /images/20221120/09dfbd01f11941ecb59e5508e96050ca.png
[format_png 16]: /images/20221120/14288eaf0c504821b933aee8cc6b9f01.png