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是相對于根元素的大小而言的。

轉載于:https://www.cnblogs.com/Christeen/p/5712914.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/271267.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/271267.shtml
英文地址，請注明出處：http://en.pswp.cn/news/271267.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！