CSS的EM
CSS中除了 使用px和百分数%进行大小定义以外，em和rem也是一种大小定义。em代表相对大小，1em等同于该html元素的font size字体大小定义，看看如下定义：
<article>
<h1>Title</h1>
<p>内容</p>
</article>
css定义如下：
article { font-size: 1.25em; }
大部分浏览器是将16px作为其字体的默认大小，也就是根元素的默认值，当然可以定制，这样这里的article元素中字体大小将使用16 * 1.25=20进行显示，也就是font-size:20px
那么如果是h1会怎样？
h1 { font-size: 1.25em; }
这里也定义了比基准大1.25倍，那么也是20px吗？不是，因为h1是嵌套在article这个已经有font-size为20px的里面，这样，1.25倍应该是其父元素article大小的1.25倍，也就是font-size:25px。如果h1在article外面，处于body下直接子元素，那么16px将是其默认大小，16*1.25则是20px。
em确实如此能够实现动态大小的定义，可以让每个元素都有自己的相对大小。
上面h1的大小是依据嵌套的父元素大小为基准，这种称为compounding复合特性，如果你不喜欢如此动态，那么使用rem可以获得全部是相对根元素大小相对变化。
rem表示根元素（root element，html）的字体大小。
h1 { font-size: 1.25rem; }
这里h1的大小将会是20px。
CSS的独特性Specificity
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
