HTML学习笔记16——尺寸的表示

HTML学习笔记16——尺寸的表示_px、%、em三种

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>

View Code

效果：

4. rem的表示方法，rem是相对于根元素的大小而言的。