CSS的EM_html/css_WEB-ITnose
程序员文章站
2022-04-28 19:23:58
...
CSS中除了 使用px和百分数%进行大小定义以外,em和rem也是一种大小定义。em代表相对大小,1em等同于该html元素的font size字体大小定义,看看如下定义:
Title
内容
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
推荐阅读
-
开源作品-PHP写的JS和CSS文件压缩利器-SuMinify_PHP_1_5,_PHP教程
-
前端技术-开发调试工具_html/css_WEB-ITnose
-
一个网页的子网址为什么不在该网页上显示链接(原谅我不知该怎么表述,见问题)?_html/css_WEB-ITnose
-
Hello World…_html/css_WEB-ITnose
-
CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins_html/css_WEB-ITnose
-
浅谈HTML文档模式_html/css_WEB-ITnose
-
处理同一页面中借助form+input[type="file"]上传图片出现的input无法清空问题_html/css_WEB-ITnose
-
刚更新的css hack技巧_html/css_WEB-ITnose
-
对于DIV+CSS的开发方式,我们也要听听另外的声音.(转贴)_html/css_WEB-ITnose
-
CSS压缩混淆 / 格式化 / 美化_html/css_WEB-ITnose