聖盃佈局的理解學習筆記
阿新 • • 發佈：2018-11-17
聖盃佈局
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>聖盃佈局</title> 6 <style type="text/css"> 7 *{ 8 margin: 0;/*margin預設值為0，實際chrome表現卻不一致*/ 9 padding: 0;/*預設值為0，但瀏覽器可以設定各自的預設值，這裡需要統一初始化*/ 10 } 11 html,body{ 12 height: 100%; 13 } 14 body{ 15 min-width: 700px;/* 最小寬度必須大於等於container的左右內邊距之和+left寬度,否則main元素的寬度無法完全容納浮動的left元素*/ 16 } 17 /*如果不設定body的最小寬度，在視窗縮放至較小時，會導致body的width無法完全容納浮動的left，而導致left的一部分在main的下面，無法浮動上去*/ 18 .container{ 19 height: 90%; 20 padding-left: 300px; /*這裡也可設定margin-left/right，但是考慮網站很多有background圖片或色塊，background只能覆蓋width+padding區域*/ 21 padding-right: 100px; 22 background-color: #8E8E8E; 23 /*overflow: hidden;*/ 24 } 25 .main,.left,.right{ 26float: left; 27 position: relative; 28 } 29 .main{ 30 width: 100%; 31 background-color: green; 32 height: 100%; 33 } 34 .left{ 35 background-color: red; 36 height: 100%; 37 width: 300px; 38 margin-left:-100%; /*左外邊距設定為負數時，塊框向左移動，且能超出其父元素，如果同時設定float，則可忽略與其他元素的碰撞，這裡左外邊距寬度的設定為其父元素（container)width值的百分數，剛好向左且上浮為main元素的寬度，此時left元素左側與main元素左側平齊*/ 39 left:-300px; /*向左移動left元素的寬度，進入container的padding-left區域*/ 40 } 41 .right{ 42 width: 100px; 43 background-color: blue; 44 height: 100%; 45 margin-left: -100px; 46 right:-100px; 47 } 48 .header,.footer{ 49 width: 100%; 50 height: 5%; 51 text-align: center; 52 clear: both; 53 } 54 .header{ 55 background-color: yellow; 56 } 57 .footer{ 58 background-color: pink; 59 } 60 .main-wrap{ 61 margin: 25% 25%; 62 background-color: orange; 63 font-size: 50px; 64 } 65 /*為了定位main的內容，設定了一個main-wrap*/ 66 </style> 67 </head> 68 <body> 69 <div class="header">header</div> 70 <div class="container"> 71 <div class="main"> 72 <div class="main-wrap"> 73 主列在此! 74 </div> 75 </div> 76 <div class="left"> 77 左列守護 78 </div> 79 <div class="right"> 80 右列守護 81 </div> 82 </div> 83 <div class="footer">footer</div> 84 </body> 85 </html>
header 主列在此! 左列守護 右列守護 footer