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>
