css經典佈局——聖盃佈局

CSS · 發表 2019-01-18 15:55:24

摘要：聖盃佈局和雙飛翼佈局一直是前端面試的高頻考點，聖盃佈局的出現是來自由 Matthew Levine 在 2006 年寫的一篇文章《In Search of the Holy Grail》。比起雙飛翼佈局，它的起源不是源於對頁面的形象表達。在西方，聖盃是表達“渴求之物”的意思。而雙飛翼佈...

聖盃佈局和雙飛翼佈局一直是前端面試的高頻考點，聖盃佈局的出現是來自由 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>複製程式碼

css經典佈局——聖盃佈局

效果圖

聖盃佈局要求

聖盃佈局的三種實現

您可能也會喜歡…