学习时间2016.11.21
参考资料:CSS中强大的EM
Quick Start
用em取代px的好处
例如,在用css对有行高的文字进行处理时,如果我们决定改变字号就得同时调整行高,因为这两个属性都写成了 绝对值。更麻烦的是,行高并没有反映出它跟字号的关系,因此我们还得做 些算术,算出字号改变之后的行高该是多少。当某些值相互依赖时,应该把 它们的相互关系用代码表达出来。em就可以体现这种转换关系,当我们改变量时,它设定了em的子集元素就会根据这种转换关系进行变换。
实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css.css"> <title>css揭秘练习</title> </head> <body> <div id="wrap"> <h1>这是一个标题,用来测试</h1> <p>这是一个文本,用来测试啦啦啦啦啦啦啦啦啦</p> <p><img src="1.png" alt="" /></p> </div> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| html {font-size: 100%;} body {font-size: 1em;} #wrap { width: 46.25em; margin: 1.5em auto; border: 0.0625em solid #ccc; height: 31.25em; } p{ font-size: 0.75em; line-height: 1.5em; margin: 1.5em; } h1 { font-size: 1.125em; line-height: 1em; margin: 1em; } p img{ width: 25em; height: 25em; margin: 0 1.5em 1.5em 0; float: left; }
|
总结
1.< body >的默认字体大小为16px。
2.当默认字体改变时,为了使弹性布局不被打破,就需要重新进行计算,重新进行调整。所以完美的设置是:
这种设置方式在IE浏览器仍会打破弹性布局,所以我们再在body的父级html设置:
3.如果元素自身没有设置字体大小,那么元素自身上的所有属性值都是以它父元素的font-size为单位。
如上表中的
1 2 3 4 5 6
| #wrap { width: 46.25em;/*740px ÷ 16 = 46.25em */ margin: 1.5em auto;/*24px ÷ 16 = 1.5em*/ border: 0.0625em solid #ccc;/*1px ÷ 16 = 0.0625em*/ height: 31.25em;/*500px*/ }
|
< div id=“wrap” >的父级为< body >,所以#wrap是以< body >默认字体大小16px为基量。
4.如果元素设置了字体大小,那么该字体大小的转换仍然是以它父元素的font-size为基量。
如上表中的
1 2 3 4 5 6
| p{ font-size: 0.75em;/*0.0625em × 12 = 0.750em */ } h1 { font-size: 1.125em; /*0.625em × 18 = 1.125em*/ }
|
p,h1的父元素是
,由于
没有设置字体大小,再以
的父元素默认字体16px为基量。
5.如果字体设置了字体大小,此元素的其他属性都是以它自身的font-size为基量。
如上表中的
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| p{ line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */ margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */ } h1 { line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */ margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */ } p img{ width: 25em;/*300px(图片的宽度)÷12(父元素font-size)*/ height: 25em;/*300px(图片的高度)÷12(父元素font-size)*/ margin: 0 1.5em 1.5em 0; float: left; }
|
因为p,h1元素自身设定了font-size,所以以它自身的font-size为基量。在对p标签中的img元素单独进行设置时,不要忘记p元素已经有了font-size。
使用em切图效果:点击查看