按百分比布局,精度肯定不會有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 {
width: 20%;
height: 100px;
float: left;
background: red;
}
在樣式里面,可以看到width我設置為20%,在以容器body為父級
占據body的width的20%
但是height無法被設置為百分比,為什么?因為無法確定父級容器body的height
總之一句話，要想設置當前容器的高度或寬度百分比，必須“明確”知道父容器的高度或寬度
所以height只能用px來表示
可以看到在上面的例子中截取的代碼
1 .three { 2 width: 50%; 3 height: 100px; 4 float: left; 5 background: green; 6 } 7 8 .four { 9 width: 50%; 10 height: 50%; 11 background: #fff; 12 } 13 14 <div class="three"> 15 <div class="four"></div> 16 </div>
在已經確定父級div的寬高的情況下,子級div就可以用百分比來表示了,截圖如下
