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>