盒子尺寸父子傳遞及嵌套Demo
阿新 • • 發佈：2019-04-13
-c XML head 尺寸 bottom style idt eight top
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>無標題文檔</title>6 <style type="text/css"> 7 <!-- 8 html,body{ 9 height:100%; 10 } 11 .box1 { 12 background-color: #0000FF; 13 height:100%; 14 position:relative; 15 } 16 .box2 { 17 background-color: #00FFFF; 18 height:90%; 19 width:90%; 20 left:5%; 21 top:5%; 22 position:absolute; 23 } 24 .box3 { 25 background-color: #FFFF00; 26 height:20%; 27 width:20%; 28 right:5%; 29 bottom:5%; 30 position:absolute; 31 } 32 --> 33 </style> 34 </head> 35 <body> 36 <div class="box1"> 37 <div class="box2"> 38 <div class="box3"></div> 39 </div> 40 </div> 41 </body> 42 </html>
盒子尺寸父子傳遞及嵌套Demo