css經典佈局——聖盃佈局
聖盃佈局和雙飛翼佈局一直是前端面試的高頻考點,聖盃佈局的出現是來自由 Matthew Levine 在 2006 年寫的一篇文章 ofollow,noindex">《In Search of the Holy Grail》 。 比起雙飛翼佈局,它的起源不是源於對頁面的形象表達。在西方,聖盃是表達“渴求之物”的意思。而雙飛翼佈局則是源於淘寶的UED,可以說是靈感來自於頁面渲染。
效果圖
原本錄製了一個小視訊,奈何不能上傳到部落格中,視訊中通過縮放頁面可以發現隨著頁面的寬度的變化,這三欄佈局是中間盒子優先渲染,兩邊的盒子框子寬度固定不變,即使頁面寬度變小,也不影響我們的瀏覽。 注意:為了安全起見,最好還是給body加一個最小寬度!
聖盃佈局要求
- header和footer各自佔領螢幕所有寬度,高度固定。
- 中間的container是一個三欄佈局。
- 三欄佈局兩側寬度固定不變,中間部分自動填充整個區域。
- 中間部分的高度是三欄中最高的區域的高度。
聖盃佈局的三種實現
【1】浮動margin-left: -100%; padding-left: 200px;padding-right: 150px; left: -200px; margin-right: -150px;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> </head> <style> body { min-width: 550px;/* 2x leftContent width + rightContent width */ font-weight: bold; font-size: 20px; } #header, #footer { background: rgba(29, 27, 27, 0.726); text-align: center; height: 60px; line-height: 60px; } #footer { clear: both; } #container { padding-left: 200px;/* leftContent width */ padding-right: 150px;/* rightContent width */ overflow: hidden; } #container .column { position: relative; float: left; text-align: center; height: 300px; line-height: 300px; } #center { width: 100%; background: rgb(206, 201, 201); } #left { width: 200px;/* leftContent width */ right: 200px;/* leftContent width */ margin-left: -100%; background: rgba(95, 179, 235, 0.972); } #right { width: 150px;/* rightContent width */ margin-right: -150px;/* rightContent width */ background: rgb(231, 105, 2); } </style> <body> <div id="header">#header</div> <div id="container"> <div id="center" class="column">#center</div> <div id="left" class="column">#left</div> <div id="right" class="column">#right</div> </div> <div id="footer">#footer</div> </body> </html>複製程式碼
【2】flex彈性佈局
display: flex; flex: 1;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> </head> <style> body { min-width: 550px; font-weight: bold; font-size: 20px; } #header, #footer { background: rgba(29, 27, 27, 0.726); text-align: center; height: 60px; line-height: 60px; } #container { display: flex; } #container .column { text-align: center; height: 300px; line-height: 300px; } #center { flex: 1; background: rgb(206, 201, 201); } #left { width: 200px; background: rgba(95, 179, 235, 0.972); } #right { width: 150px; background: rgb(231, 105, 2); } </style> <body> <div id="header">#header</div> <div id="container"> <div id="left" class="column">#left</div> <div id="center" class="column">#center</div> <div id="right" class="column">#right</div> </div> <div id="footer">#footer</div> </body> </html>複製程式碼
【3】grid佈局
如上圖所示,我們把body劃分成三行四列的網格,其中有5條列網格線
display: grid;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> </head> <style> body { min-width: 550px; font-weight: bold; font-size: 20px; display: grid; } #header, #footer { background: rgba(29, 27, 27, 0.726); text-align: center; height: 60px; line-height: 60px; } #header { grid-row: 1; grid-column: 1/5; } #footer { grid-row: 3; grid-column: 1/5; } .column { text-align: center; height: 300px; line-height: 300px; } #left { grid-row: 2; grid-column: 1/2; background: rgba(95, 179, 235, 0.972); } #center { grid-row: 2; grid-column: 2/4; background: rgb(206, 201, 201); } #right { grid-row: 2; grid-column: 4/5; background: rgb(231, 105, 2); } </style> <body> <div id="header">#header</div> <div id="left" class="column">#left</div> <div id="center" class="column">#center</div> <div id="right" class="column">#right</div> <div id="footer">#footer</div> </body> </html>複製程式碼