1.像素表示： 23px
2.子像素可以用百分比表示其大小，如50%，表示為父元素的一半
如果塊狀子元素的寬度不指定，默認是占滿父元素的寬度；
3.用em表示字體大小時，表示相對大小，是與父元素的比值：
1em表示與父元素的字體大小相同；
0.5em表示是父元素的字體大小的一半；
2em表示是父元素的字體大小的2倍；
注：em是相對於自身字體大小而言的，如果自身未指定，那么就是繼承父元素的字體大小。
當父元素取10px時，子元素若取1.2em,1.5em...則表示子元素的字體大小為12px,15px.....
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尺寸的表示</title> 6 </head> 7 <style type="text/css"> 8 #father{ 9 width:600px; 10 height:300px; 11 background:blue; 12 } 13 #son1{ 14 height:50%; 15 background:green; 16 } 17 #son2{ 18 height: 25%; 19 width:25%; 20 background:red; 21 } 22 #test1{ 23 width:400px; 24 height:200px; 25 font-size: 30px; 26 background: pink; 27 } 28 #p1{ 29 font-size: 20px; 30 } 31 #p2{ 32 font-size: 1em; 33 } 34 </style> 35 <body> 36 <div id="father"> 37 <div id="son1"> 38 子div1只定義高度，未定義寬度，則默認與父div同寬； 39 </div> 40 <div id="son2"> 41 子div2定義寬高； 42 </div> 43 </div> 44 <div id="test1"> 45 我是test1，p標簽的父div； 46 <p id="p1"> 47 p1使用像素表示字體大小； 48 </p> 49 <p id="p2"> 50 p2使用em表示字體大小； 51 </p> 52 </div> 53 </body> 54 </html>
效果：
4. rem的表示方法，rem是相對於根元素的大小而言的。