按百分比布局,精度肯定不会有rem精确
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"> 7 <title>Document</title> 8 <style> 9 * { 10 padding: 0; 11 margin: 0; 12 } 13 14 .one { 15 width: 20%; 16 height: 100px; 17 float: left; 18 background: red; 19 } 20 21 .two { 22 width: 30%; 23 height: 100px; 24 float: left; 25 background: blue; 26 } 27 28 .three { 29 width: 50%; 30 height: 100px; 31 float: left; 32 background: green; 33 } 34 35 .four { 36 width: 50%; 37 height: 50%; 38 background: #fff; 39 } 40 </style> 41 </head> 42 43 <body> 44 <div class="one"></div> 45 <div class="two"></div> 46 <div class="three"> 47 <div class="four"></div> 48 </div> 49 50 </body> 51 52 </html>
meta就不多说了,同样在meta标签内
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
在body下面有三个div,其中第一个div样式如下,
.one {
20%;
height: 100px;
float: left;
background: red;
}
在样式里面,可以看到width我设置为20%,在以容器body为父级
占据body的width的20%
但是height无法被设置为百分比,为什么?因为无法确定父级容器body的height
总之一句话，要想设置当前容器的高度或宽度百分比，必须“明确”知道父容器的高度或宽度
所以height只能用px来表示
可以看到在上面的例子中截取的代码
1 .three { 2 50%; 3 height: 100px; 4 float: left; 5 background: green; 6 } 7 8 .four { 9 50%; 10 height: 50%; 11 background: #fff; 12 } 13 14 <div class="three"> 15 <div class="four"></div> 16 </div>
在已经确定父级div的宽高的情况下,子级div就可以用百分比来表示了,截图如下
