1. 程式人生 > >聖杯布局的理解學習筆記

聖杯布局的理解學習筆記

ade flow 超出 head 負數 ner style oot itl

聖杯布局

 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{ 26
float: 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

聖杯布局的理解學習筆記