长度单位

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7         /*
 8         长度单位
 9         1.像素 px
10         像素是我们在网页中使用的最多的一个单位
11         一个像素就相当于我们屏幕中的一个小点
12         显示的效果越好，像素就越小
13         2.百分比 %
14         也可以将单位设置为一个百分比的形式
15         这样浏览器将会根据父元素的样式来计算该值
16         当父元素属性值改变时，子元素也会随之改变
17         3.em
18         和百分比类似，他是相当于当前元素的字体大小来计算的
19         1em=1fint-size
20         使用em时，当字体大小发生改变时，em也会随之改变
21         */
22        .box{
23            width: 200px;
24            height: 200px;
25            background-color: aquamarine;
26        }
27        .box1{
28            width: 100px;
29            height: 100px;
30            background-color: antiquewhite;
31        }       
32        .box2{
33            font-size: 100px;
34            width: 1em;
35            height: 50%;
36            background-color: darkseagreen;
37        }
38        </style>
39     </head>
40     <body>
41         <div class="box">
42         <div class="box1">
43         <div class="box2"></div></div>
44         </div>
45     </body>
46 </html>