【CSS】圣杯布局和双飞翼布局（包括完整代码）
1. 前言
??圣杯布局和雙飛翼布局是各類網站經常使用的布局，本文將通過兩種布局的 示例圖、布局過程、以及 完整代碼 進行講解，如果你想進行練習，可以到我的 github地址 上獲取已去除了關鍵代碼的版本，只留下最初始的元素和顏色樣式，供你對自己進行強化的練習；同時，你也可以在這里獲取到 完整代碼。
2. 圣杯布局
2.1 示例圖
- 擁有 header 和 footer，中間是主內容行
- left 和 right 分別固定了寬度，center 會隨著整體布局寬度的變化而進行伸縮
常見的類似圣杯布局如 CSDN 文章頁：
2.2 設計過程
- 以下講解中，會分別使用如 center、left、right 等叫法來描述某一個色塊
- 此講解需要了解 margin 為負值 時會產生的效果，如果不了解的話請務必先看這篇文章 margin為負值會發生什么？
- 可以結合如下 2.3 完整代碼 進行理解，里面的 注釋序號對應該設計過程的序號
1）初始樣式
2）把中間部分留出左右元素的寬度
3）margin-right 能讓 right 元素被其自身右方的空白元素覆蓋上去，相當于自身寬度被消除，從而能浮動到 center 上去
4）left 向左移動 center 的寬度，來移動到 center 所在的行
問：為何設置 margin-left: 100% 就能讓 left 頂到 center 的最左邊？
答：由于 center 內邊距的存在，現在 left 的真實位置可以理解為如下圖，因此向左偏移 center 的寬度，就讓能 left 到達 center 的最左邊
5）left 再向左移動自身寬度，露出被覆蓋的 center
問：為何需要設置 position: relative？
答：因為 relative 設置，并且設置了 right: 200px 后，元素只會 自身進行移動，不會影響到其他元素。
2.3 完整代碼
<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圣杯布局</title><style type="text/css">body {min-width: 550px;}#header {background-color: #999999;}#middle{/* 2.把中間部分留出左右元素的寬度 */padding-left: 200px;padding-right: 150px;}#middle .column{float: left;height: 200px;}#left{width: 200px;background-color: #FFFF00;/* 4. 向左移動center的寬度 */margin-left: -100%;/* 5. 再向左移動自身寬度，露出被覆蓋的center塊 */position: relative;right: 200px;}#center{width: 100%;background-color: pink;}#right{/* 3.margin-right讓右方元素覆蓋自身，達到消除自身寬度的目的，浮動到center上面去 */margin-right: -150px;width: 150px;background-color: #CCCCCC;}#footer {background-color: #999999;}.clearfix:after{display: table;content: '';clear: both;}</style></head><body><div id="header">header</div><div id="middle" class="clearfix"><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>3. 雙飛翼布局
3.1 示例圖
- left 和 right 固定寬度
- 中間 main 會隨著整體布局寬度的變化而伸縮
3.2 設計過程
1）整體設置浮動
2）將 main 左右內邊距留出 left 和right 的寬度
3）left 向左偏移 main 的寬度
4）right 向左偏移自身寬度
3.3 完整代碼
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>雙飛翼布局</title><style type="text/css">body {min-width: 550px;}.col {/* 1.設置浮動 */float: left;}#main {width: 100%;height: 200px;background-color: #FFC0CB;}#main-wrap {/* 2.將 main 左右內邊距留出 left 和 right 的寬度 */margin: 0 200px 0 150px;}#left {width: 150px;height: 200px;background-color: #FFFF00;/* 3.left 向左偏移 main 的寬度 */margin-left: -100%;}#right {width: 200px;height: 200px;background-color: #cccccc;/* 4.right 向左偏移自身寬度 */margin-left: -200px;}</style> </head> <body><div id="main" class="col"><div id="main-wrap">main</div></div><div id="left" class="col">left</div><div id="right" class="col">right</div> </body> </html>4. 技術點總結
| 主內容兩邊的邊距 | 用 margin-left 和 margin-right | 用 padding-left 和 padding-right |
| 左右元素的偏移 | 均使用 margin-left 左：向左偏移main的寬度； 右：向左偏移自身寬度 | 左：使用 margin-left（向左偏移main的寬度） 右：margin-right（取消自身寬度） |
總結
以上是生活随笔為你收集整理的【CSS】圣杯布局和双飞翼布局（包括完整代码）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 优化设备管理，提升企业效益——工程设备管
- 下一篇： CSS3---选择器分类，最全版