css經典佈局——聖盃佈局

時間 2019-11-07

標籤 css 經典佈局欄目 CSS 简体版

原文原文鏈接

聖盃佈局和雙飛翼佈局一直是前端面試的高頻考點，聖盃佈局的出現是來自由 Matthew Levine 在 2006 年寫的一篇文章《In Search of the Holy Grail》。比起雙飛翼佈局，它的起源不是源於對頁面的形象表達。在西方，聖盃是表達「渴求之物」的意思。而雙飛翼佈局則是源於淘寶的UED，能夠說是靈感來自於頁面渲染。css

效果圖

本來錄製了一個小視頻，奈何不能上傳到博客中，視頻中經過縮放頁面能夠發現隨着頁面的寬度的變化，這三欄佈局是中間盒子優先渲染，兩邊的盒子框子寬度固定不變，即便頁面寬度變小，也不影響咱們的瀏覽。注意：爲了安全起見，最好仍是給body加一個最小寬度!html

聖盃佈局要求

header和footer各自佔領屏幕全部寬度，高度固定。
中間的container是一個三欄佈局。
三欄佈局兩側寬度固定不變，中間部分自動填充整個區域。
中間部分的高度是三欄中最高的區域的高度。

聖盃佈局的三種實現

【1】浮動

先定義好header和footer的樣式，使之橫向撐滿。
在container中的三列設爲浮動和相對定位(後面會用到)，center要放在最前面，footer清除浮動。
三列的左右兩列分別定寬200px和150px，中間部分center設置100%撐滿
這樣由於浮動的關係，center會佔據整個container，左右兩塊區域被擠下去了
接下來設置left的 margin-left: -100%;，讓left回到上一行最左側
但這會把center給遮住了，因此這時給外層的container設置 padding-left: 200px;padding-right: 150px;，給left和right空出位置
這時left並無在最左側，由於以前已經設置過相對定位，因此經過 left: -200px; 把left拉回最左側
一樣的，對於right區域，設置 margin-right: -150px; 把right拉回第一行
這時右側空出了150px的空間，因此最後設置 right: -150px;把right區域拉到最右側就好了。

<!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彈性佈局前端

header和footer設置樣式，橫向撐滿。
container中的left、center、right依次排布便可
給container設置彈性佈局 display: flex;
left和right區域定寬，center設置 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佈局jquery

如上圖所示，咱們把body劃分紅三行四列的網格，其中有5條列網格線面試

給body元素添加display: grid;屬性變成一個grid(網格)
給header元素設置grid-row: 1; 和 grid-column: 1/5; 意思是佔據第一行網格的從第一條列網格線開始到第五條列網格線結束
給footer元素設置grid-row: 3; 和 grid-column: 1/5; 意思是佔據第三行網格的從第一條列網格線開始到第五條列網格線結束
給left元素設置grid-row: 2; 和 grid-column: 1/2; 意思是佔據第二行網格的從第一條列網格線開始到第二條列網格線結束
給center元素設置grid-row: 2; 和 grid-column: 2/4; 意思是佔據第二行網格的從第二條列網格線開始到第四條列網格線結束
給right元素設置grid-row: 2; 和 grid-column: 4/5; 意思是佔據第二行網格的從第四條列網格線開始到第五條列網格線結束

<!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>複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。