【CSS】圣杯布局和双飞翼布局（包括完整代码）

Love The Way You Lie 2022-10-13 12:52 123阅读 0赞

# 1. 前言 #

圣杯布局和双飞翼布局是各类网站经常使用的布局，本文将通过两种布局的 `示例图`、`布局过程`、以及 `完整代码` 进行讲解，如果你想进行练习，可以到我的 [github地址][github] 上获取已去除了关键代码的版本，**只留下最初始的元素和颜色样式**，供你对自己进行强化的练习；同时，你也可以在这里获取到 **完整代码**。

# 2. 圣杯布局 #

## 2.1 示例图 ##

*  拥有 `header` 和 `footer`，中间是主内容行
 *  `left` 和 `right` 分别固定了宽度，`center` 会随着整体布局宽度的变化而进行伸缩  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]

常见的类似圣杯布局如 CSDN 文章页：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1]

## 2.2 设计过程 ##

*  以下讲解中，会分别使用如 `center`、`left`、`right` 等叫法来描述某一个色块
 *  此讲解需要了解 `margin 为负值` 时会产生的效果，如果不了解的话请务必先看这篇文章 [margin为负值会发生什么？][margin]
 *  可以结合如下 `2.3 完整代码` 进行理解，里面的 **注释序号对应该设计过程的序号**

**1）初始样式**  
![在这里插入图片描述][2021070710481110.png]

**2）把中间部分留出左右元素的宽度**  
![在这里插入图片描述][20210707104820937.png]

**3）margin-right 能让 right 元素被其自身右方的空白元素覆盖上去，相当于自身宽度被消除，从而能浮动到 center 上去**  
![在这里插入图片描述][20210707104832903.png]

**4）left 向左移动 center 的宽度，来移动到 center 所在的行**  
![在这里插入图片描述][20210707104848844.png]

问：为何设置 `margin-left: 100%` 就能让 `left` 顶到 `center` 的最左边？

答：由于 `center` 内边距的存在，现在 `left` 的真实位置可以理解为如下图，因此向左偏移 `center` 的宽度，就让能 `left` 到达 `center` 的最左边  
![在这里插入图片描述][20210707104933754.png]

**5）left 再向左移动自身宽度，露出被覆盖的 center**  
![在这里插入图片描述][20210707105008752.png]

问：为何需要设置 `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` 会随着整体布局宽度的变化而伸缩  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 2]

## 3.2 设计过程 ##

**1）整体设置浮动**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 3]

**2）将 main 左右内边距留出 left 和right 的宽度**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 4]

**3）left 向左偏移 main 的宽度**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 5]

**4）right 向左偏移自身宽度**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 6]

## 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. 技术点总结 #

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th align="center">双飞翼</th> 
   <th align="center">圣杯</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>主内容两边的边距</td> 
   <td align="center">用 margin-left 和 margin-right</td> 
   <td align="center">用 padding-left 和 padding-right</td> 
  </tr> 
  <tr> 
   <td>左右元素的偏移</td> 
   <td align="center">均使用 margin-left<br>左：向左偏移main的宽度；<br>右：向左偏移自身宽度</td> 
   <td align="center">左：使用 margin-left（向左偏移main的宽度） <br>右：margin-right（取消自身宽度）</td> 
  </tr> 
 </tbody> 
</table>

[github]: https://github.com/Jokerlsss/css-demo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]: /images/20221005/df64f1cc24624aec9f7aed3366a44a84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/b789bc83744b41dba3f3e2b68a3134e2.png
[margin]: https://blog.csdn.net/weixin_42678675/article/details/118514164
[2021070710481110.png]: /images/20221005/3070fe7c37e84543be2627f8e8a4d07d.png
[20210707104820937.png]: /images/20221005/36e185ceea0f4030a69b39329ba51a0a.png
[20210707104832903.png]: /images/20221005/fae0995d4425452e9fbda43d9b133a52.png
[20210707104848844.png]: /images/20221005/9de6be0377e74e389b0faeecc401720a.png
[20210707104933754.png]: /images/20221005/4d5c05adfa1e4d4cb88b30cbce961531.png
[20210707105008752.png]: /images/20221005/0a9b1aa5ff274ea6bf1c1d8de11f2696.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/fd8250cbf6b04a80a4543226ecc011e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/dae6136878d24e6a9421588271eddebe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/506a7d3d51fc46628dc6870957733d49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 5]: /images/20221005/f7e37a930f11430ea3fed9216f4a4e2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 6]: /images/20221005/d4377170a1314b27a38481832c66c140.png