• 技术文章 >web前端 >html教程

    CSS 中 px,em和rem的区别 学习笔记_html/css_WEB-ITnose

    2016-06-24 11:40:20原创580

    简单讲,px是绝对单位,em和rem是相对单位。px大家都熟悉,这里主要讨论em和rem。

    现在有以下一个段落:

    当斧头来到树林的时候,好多树都说,至少它的手柄是自己人

    当不给它设置字体大小时,使用默认大小,也就是16px大小,效果如下:

    em

    em是指相对于父元素的大小,也就是说对于p和span而言,它的大小都是1em,这里的1em = 16px。

    我们将span的大小改为2em,效果如下:

    span{ font-size: 2em; }

    可以看到span的大小相对于p大了一倍,假设span里面还有一级标签:

    当斧头来到树林的时候,好多树都说,至少它的手柄是自己人

    现在我们知道p标签大小是1em,span的大小是2em,如果想让a标签的大小和p标签一样,应该设置为多少?

    因为em是相对标签,所以不能设置成1em,而是相对于其父元素span的0.5em:

    a{ font-size: 0.5em; }

    rem

    使用em很好地将相对大小表现出来了,但是我们也发现在子元素里有时候想设置除了父元素以外的元素大小时,还要计算相对大小,rem就解决了这个问题。

    rem是指相对于html根元素的字体大小。

    还是刚才的例子,我们想保证a标签字体大小和p标签一样,而p标签的大小正好是相对于html的 1倍,所以我们也可以将a标签的大小设置为1rem:

    a{ font-size: 1rem; }

    效果也是一样的。

    版权声明:本文为博主原创文章,未经博主允许不得转载。

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:E11 css hack_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 为什么是这样的?_html/css_WEB-ITnose• [翻译]解读CSS中的长度单位_html/css_WEB-ITnose• 引入外部CSS的两种方式及区别_html/css_WEB-ITnose• 如何考评一名前端工程师?_html/css_WEB-ITnose• web开发中比较常用的html标签_html/css_WEB-ITnose
    1/1

    PHP中文网