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 11 要想设置当前容器的高度或宽度百分比，必须“明确”知道父容器的高度或宽度 12 */ 13 14 * { 15 padding: 0; 16 margin: 0; 17 } 18 19 .one { 20 width: 20%; 21 height: 100px; 22 float: left; 23 background: red; 24 } 25 26 .two { 27 width: 30%; 28 float: left; 29 background: blue; 30 } 31 32 .three { 33 width: 50%; 34 height: 100px; 35 float: left; 36 background: green; 37 } 38 39 .four { 40 width: 50%; 41 height: 50%; 42 background: #fff; 43 } 44 </style> 45 </head> 46 47 <body> 48 <div class="one"></div> 49 <div class="two"></div> 50 <div class="three"> 51 <div class="four"></div> 52 </div> 53 54 </body> 55 56 </html>