css中em相对单位怎么使用

本篇内容介绍了“css中em相对单位怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
　　em是CSS中一个比较常用的相对单位，因此有必要注意一些坑点。
　　1em等于当前元素的字体大小，除非你在设置font-size
　　有很多文章说1em是等于父元素的字体大小！这种说法实际上是不准确的。看以下例子：
　　

　　body{
　　font-size:16px;
　　}
　　div{
　　font-size:32px;
　　padding-bottom:2em;
　　background-color:aquamarine;
　　}
　　
　　
　　
　　
　　
　　
　　
　　字体大小和长度有什么关系呢？字体不是一个方块吗？实际上，字体大小被定义为M的宽度。
　　为什么有人误认为1em等于父元素的字体大小呢？这是因为如果在设置font-size的时候使用em单位，此时font-size还是默认值inherit，因此此时1em还等于父元素的字体大小。这是在设置font-size时才有的特例！这个特例很好理解，毕竟我正在设置当前元素的字体大小呢！怎么能用此刻正在设置的字体大小作为单位呢！这不是悖论吗！
　　举个例子，如果这个悖论真的发生了，就会出现以下情况：水果店老板对你说：“你要多少斤橘子，我给你装起来”，而你却对老板说：“我要的数量是我最终要的数量的2倍”（类比于设置font-size:2em）。这个时候水果店老板估计就要崩溃了，他到底要给你装多少橘子呢？
　　为了避免这种事情发生，在你指定数量的时候如果使用相对单位，那这个单位必定不能相对于你此刻所指定的数量。你可以对老板这样说：“我要的数量是上一个顾客买的2倍”（类比于设置font-size:2em）。当你买完橘子以后，又可以对老板这样说：“我还要一些苹果，数量是刚才买的橘子的2倍”（类比于设置padding-bottom:2em）。
　　除了这个特例以外，当设置其他css属性的时候，1em就等于当前元素的字体大小。
　　在上面的例子中，设置font-size的时候使用em，就能证明这个特例的存在：
　　

　　body{
　　font-size:16px;
　　}
　　div{
　　font-size:2em;/*仅仅这一行改变了！*/
　　padding-bottom:2em;
　　background-color:aquamarine;
　　}
　　
　　
　　
　　
　　
　　
　　最终高度依然是64免费云主机、域名px，因为在设置font-size的时候，1em==16px；在设置padding-bottom的时候，1em就等于32px了。
　　如果在根元素上的font-size使用em会怎么样呢？它没有父元素了啊！没关系，对于inheritedproperties（其中就包括font-size），在根元素上的默认值为initial，对于大部分浏览器，font-size的initial值就是16px。因此在设置根元素上的font-size时，它的值还是16px，1em也就等于16px
　　

　　html{
　　/*2*16px=32px*/
　　font-size:2em;
　　}
　　div{
　　/*2*32px=64px*/
　　font-size:2em;
　　/*2*64px=128px*/
　　padding-bottom:2em;
　　background-color:aquamarine;
　　}
　　
　　
　　
　　
　　
　　
“css中em相对单位怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站，小编将为大家输出更多高质量的实用文章！免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

相关推荐: CSS3中transition, transform和animation的区别是什么

本文小编为大家详细介绍“CSS3中transition, transform和animation的区别是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS3中transition, transform和animation的区别是什么”文章能帮助大家解决…