【css】css中使用em

学习时间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;/*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*/
}
p{
	font-size: 0.75em;/*0.0625em × 12 = 0.750em */
	line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */
	margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */
}
h1 {
	font-size: 1.125em; /*0.625em × 18 = 1.125em*/
	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;
}

总结

1.< body >的默认字体大小为16px。

2.当默认字体改变时，为了使弹性布局不被打破，就需要重新进行计算，重新进行调整。所以完美的设置是：

1
body{font-size:1em;}

这种设置方式在IE浏览器仍会打破弹性布局，所以我们再在body的父级html设置：

1
html{font-size:100%}

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切图效果：点击查看

JoseyDon

♥毛球Josey♥的博客

❀因为在跑，所以耳边有风。❀