2012前夜，我在干什么？
~!~相对大小：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml"lang="en" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title>~!~</title>
6 <style type="text/css">
7 body {font-size:12px; }
8 em {color:purple; }
9 p {font-size:16px; }
10 p.apple {font-size:2em; }
11 p.banana {padding:2em; line-height:2em; }
12 p.cherry {font-size:200%; }
13 p.fig {padding:200%; line-height:200%; }
14 </style>
15 </head>
16
17 <body>
18 <!--
19 2em是相对于“字体大小”的两倍，注意：依据属性的不同，共分为两种情况:
20 一：几乎所有的应用了2em的属性，都是指相对于该元素“自身字体大小”计算；
21 二：唯一的例外是：font-size属性是相对于该元素的“父元素字体大小”计算；
22 注意：无论什么方式：它们都是相对于“字体大小”；
23 而200%则相对来说复杂点儿；
24 一：若是文本类属性应用了200%，都是指相对于“字体大小”，所以此时与用em一样，（font-size相对于父元素字体大小计算，line-height相对于自身字体大小计算）；
25 二：除此之外的其它属性就不一样了，例如：padding若是应用了200%，则是指该元素的padding大小是相对于其“父元素内容区宽度”计算；
26 总之：em是相对于“该元素”的“字体大小”，font-size除外(它是相对于“父元素”的“字体大小”)；
27 %是相对于其“父元素”的“大小”，至于是什么对象的大小，就要依据属性来区分了，几乎可以肯定的是：就参照它那一类的属性，例如：font-size,line-height是文本类属性，那么他们的%是相对于“font-size”，padding,margin是盒模型属性，那么他们的%是相对于”width“；
28 麻烦死了，什么乱七八糟的这么多：在实际应用中，不需要我管这么多吧？记住下面的几条更重要：
29 1.font-size不管是用em或者%，都是相对于其父元素的字体大小计算；而line-height不管是用em或者%，都是相对于该元素自身的字体大小计算；
30 2.除此之外的其它属性，em就是相对于该元素自身的字体大小计算，而%就是相对于父元素的内容区宽度”width“计算；
31 -->
32 <p class="apple">apple_para! my font-size=12*2=24px;</p>
33 <p class="banana">banana_para! my font-size=16px, padding=16*2=32px, line-height=16*2=32px too;</p>
34 <p class="cherry">cherry_para! my font-size=12*200%=24px;<em>where's fig_para?</em></p>
35 <p class="fig">fig_para! my font-size=16px, padding=其父元素body的内容区宽度*200%, line-height=16*200%=32px;</p>
36 </body>
37 </html>
151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
