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

最新推荐文章于 2024-04-19 05:54:56 发布

波吉

最新推荐文章于 2024-04-19 05:54:56 发布

阅读量1.5k

点赞数 6

分类专栏：面试前端 CSS 文章标签： css3 html css html5

本文链接：https://blog.csdn.net/weixin_42678675/article/details/118542011

版权

前端同时被 3 个专栏收录

71 篇文章 4 订阅

订阅专栏

面试

14 篇文章 0 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

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（取消自身宽度）