一、聖杯布局
首先給出一個基本的結構
HTML代碼:
<html>
<head>
<title>聖杯布局</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">header</div>
<div class="content">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
加上CSS樣式：
*{
margin: 0;
padding: 0;
}
.header{
background-color: aquamarine;
}
.middle{
width: 100%;/*設定為100%，讓他始終占滿視窗，才會有自适應的效果，使middle随浏覽器視窗大小改變。*/
background-color: bisque;
}
.left{
width: 200px;
background-color: pink;
}
.right{
width: 200px;
background-color: yellow;
}
.footer{
width: 100%;
background-color: blueviolet;
}
middle
設定為100%，讓他始終占滿視窗，才會有自适應的效果，使middle随浏覽器視窗大小改變。
此時效果是這樣的：
給
left
、
right
、
middle
加上浮動：
float:left
此時浮動導緻父元素content高度塌陷
清除浮動：
.clear::after{
content: "";
display: block;
clear: both;
}
我們要把content中的三個元素放在一行
margin-left設定為負值時，表示目前元素的左邊界向左移動。
left
中加入
margin-left:-100%;/*-100%表示向左移動他的父元素content的寬度，這一行不能容納，
于是就移動到了上一行，剛好middle的左邊界與left的左邊界重合*/
right
中加入
margin-left:-200px;/*left移動之後，right的左邊界就到了他所在這一行的左邊。
因為right200px寬，是以讓他向左移200px，剛好使它的右邊界與middle的右邊界重合*/
從這裡開始與雙飛翼差別
這個時候已經實作了兩邊寬度不變，中間随浏覽器改變。
但是為
middle
添加内容，我們會發現存在一個bug。
這是因為浮動之後，脫離了文檔流，兩邊固定的寬度就會擋住内容。要想不被遮擋，可以為content加
padding
将middle往中間收縮。
.content{
padding: 0 -200px;
}
那麼兩邊已經空出了區域，這是将兩邊寬度移回去就行了。
用position将元素移回去
left:
position: relative;
left: -200px;/*在原有位置上向左移動*/
right:
position: relative;
left: 200px;
最後不要忽略一個問題
頁面的最小寬度：如果調整浏覽器視窗的大小，使得中心欄比左欄小，那麼在符合标準的浏覽器中，布局就會中斷。是以最小left+middle+right=600
body{
min-width: 600px;
}
二、雙飛翼布局
雙飛翼與聖杯大體相同，主要是在對于兩邊寬度會遮擋middle那裡的處理方式不同。
middle
中添加
inner
<div class="middle">
<div class="inner">middle Lorem ipsum dolor sit amet consectetur adipisicing elit. A ullam molestias vel repellendus veritatis non quos esse iure commodi, quod explicabo quia. Porro laborum ullam modi atque eveniet nulla ducimus?</div>
</div>
為
inner
添加内邊距。
.content .inner{
padding: 0 200px;
}
三、二者異同
聖杯布局與雙飛翼布局實作的效果是一樣的，即：
兩邊寬度不變，中間的部分會随浏覽器視窗大小而改變。
相同點
-
middle
- 都利用負的
margin-left
-
middle
的寬度設定為100%。
（處理遮擋文字以上的部分都相同）
不同點
- 聖杯布局為
middle
padding
middle
position
- 雙飛翼布局是在
middle
inner
inner