2012前夜,我在干什么?
~!~相对大小:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>