一個初學者對雙飛翼布局和聖杯布局的理解
阿新 • • 發佈：2018-12-09
head 給他 就是 固定 class ack scrip 特點 css
Hi！大家好！歡迎大家進入我的博客！
現在好多的大公司寫頁面的時候都會用到三欄布局，接下來要說的聖杯布局就是三欄布局中較為典型的例子。特點是，左右邊欄寬度固定，中間欄寬度自適應。廢話不多說直接上代碼。
聖杯布局：
我們先看看最終實現的效果
1、首先看一下html中的結構。（因為瀏覽器加載html文檔的順序是由上到下的，我們想讓中間欄先加載，我們只能把中間欄放在最前面）
2、接下來我們讓middle（中間欄）的寬度為100%，然後在給左右邊欄設置寬高。
.main {
width: 100%;
height: 400px;
}
.middle {
width: 100%;
background: #fd8c84;
height: 400px;
}
/*給左邊和右邊的元素設置屬性*/
.left {
width: 100px;
height: 400px;
background: red;
}
.right {
width: 100px;
height: 400px;
background: #1d9fd3;
}
我們來看一下效果
當然這個樣子肯定是不行的，我們接下來在對這個樣式進行修飾
3、我們得保證這三個盒子在同一行顯示，我們最先想到的當然是float，所以我們給這三個盒子設置float（一浮全浮）。
/*三欄布局指定是讓他們在一行顯示：所以我們最先想到的方法就是float*/
.middle, .left, .right {
float: left;
}
你會發現就算設置了浮動他們還不在同一行顯示，這是為什麽呢？
別著急，那是因為我們給middle的寬度設置了100%，所以第一行沒有位置了，他們只能在第二行顯示嘍！
但是我們可以假裝他們兩個在第一行
4、我們給middle的父元素設置padding然他把自己的內容壓縮，空出來的部分用來放左右邊欄。
這裏我們為什麽要用padding呢？因為我們可以通過box-sizing:border-box;來控制
.main {
padding: 0 100px;
box-sizing: border-box;
}
這是你會發現中間欄的兩邊會有100px的留白，這正是我們要的效果
5、重點部分：利用margin負值的思想
1>先將左邊的盒子放在對應的位置
.left {
position: relative;
left: -100px;
margin-left: -100%;
}
註意：我們給左邊的盒子設置完margin-left:-100%;的時候他會和middle的左邊重合，所以我們給他加了相對定位（相對自己原來的位置）。
2>同理右邊的盒子也做同樣的操作
.right {
margin-left: -100px;
position: relative;
left: 100px;
}
通過上面5個步驟我們最終實現了聖杯布局。
全部代碼：
<!DOCTYPE html >
<html lang="en">
<head>
<meta name="keywords" content="">
<meta name="description" content="">
<title>雙飛翼和聖杯布局</title>
<style type="text/css">
/*個人理解，雙飛翼和聖杯布局之不過就是三欄布局中特殊的寫法，下面先對聖杯布局進行解析*/
/*第一步：讓中間元素的寬度為100%*/
.main {
width: 100%;
height: 200px;
}
.middle {
width: 100%;
background: #fd8c84;
height: 200px;
}
/*給左邊和右邊的元素設置屬性*/
.left {
width: 100px;
height: 200px;
background: red;
position: relative;
left: -100px;
margin-left: -100%;
}
.right {
width: 100px;
height: 200px;
background: #1d9fd3;
margin-left: -100px;
position: relative;
left: 100px;
}
/*三欄布局指定是讓他們在一行顯示：所以我們最先想到的方法就是float*/
.middle, .left, .right {
float: left;
}
/*我們會發現他們並不在同一行，因為middle盒子的寬度是100%，所以我們如果想讓他們上去
我們只能在middle擠出來位置來放置left和right這兩個盒子
這裏我們想到用padding， 因為這裏如果用margin，你會發現這個頁面會有一個橫向的滾動條
其實padding也會出現橫向的滾動條，但是我們可以通過box-sizing:border-box;這個屬性來控制*/
.main {
padding: 0 100px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="main">
<div class="middle"><h2>我是中間元素</h2></div>
<div class="left"><h2>我是左邊元素</h2></div>
<div class="right"><h2>我是右邊元素</h2></div>
</div>
</body>
</html>
一個初學者對雙飛翼布局和聖杯布局的理解