css圣杯布局和双飞翼布局（超详细）

最新推荐文章于 2023-08-19 17:02:38 发布

小k铁柱

最新推荐文章于 2023-08-19 17:02:38 发布

阅读量1.5k

点赞数 18

分类专栏：笔记文章标签： html css css3

本文链接：https://blog.csdn.net/qq_40890601/article/details/106210257

版权

笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

参考文章

圣杯布局

大抵就是一个左右两边固定宽度，中间宽度自适应的三栏式布局。
如下图所示：
在这里插入图片描述
大致要求是：

header和footer固定高度；
左右两边固定宽度；
中间宽度自适应；
中间部分的高度是三栏中最高的区域的高度。

实现过程（顺序无所谓）：
1、先定义好header 和footer，container 和其中的left , right ,middle.其中middle在最前面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>圣杯布局练习</title>
		<link href="css/shengb.css" rel="stylesheet">
	</head>
	<body>
<!-- 		header和footer各自占领屏幕所有宽度，高度固定。
		中间的container是一个三栏布局。
		三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
		中间部分的高度是三栏中最高的区域的高度。 -->
		
		<header>
			header
		</header>
		<div class="container">
			<div class="middle">middle<p>hello</p></div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<footer>
			footer
		</footer>
	</body>
</html>

为提高代码优化，css样式建议加入以下。

* {
	box-sizing: border-box;
}
body {
	margin: 0;
	color: #fff; /*为了适应背景 把字体颜色调成白色*/
}

2、设置footer和header的样式

header {
	width: 100%;
	height: 50px;
	background: #6daca7;
	line-height: 50px;
	text-align: center;
}
footer {
	width: 100%;
	height: 30px;
	background: #52797a;
	clear: both;
	line-height:30px;
	text-align: center;
}

3、分别设置left , middle ,right 的样式，左边宽度为200px，右边宽度为150px，中间宽度为100%
并且设置为相对定位，左浮动。

.left , .right, .middle {
	position: relative;
	float: left;
}
.left {
	width: 200px;
	background: #1b4887;
}
.right {
	width: 150px;
	background: #578353;
}
.middle {
	width: 100%;
	background: #138686;
}

这时候的布局是这样的：
在这里插入图片描述
4、这时候把左边left的margin-left设置为-100%,把它推到middle的左边

5、这时我们发现left把middle遮住了，看上面的middle不见了。只需要在container上加上 padding-left: 200px;padding-right: 150px;，在左右两边为left 和 right 留出空间（ left 和 right 的宽度）。
在这里插入图片描述
6、接下来把left左移，用到相对定位。在left盒子上设置left属性为-200px（刚好是left的宽度），这样left的位置就对了，也没有遮住middle。

7、接下来把right移动到正确的位置。只需要设置margin-right: -150px。把它推到middle的右边。
在这里插入图片描述
总结：只要是float的盒子，它就是脱离普通流的。
css代码地址

双飞翼布局

相比圣杯布局，双飞翼布局在container多了一个子节点，为其左右两边设置margin-left 和 margin-right ，为left 和 right留出空间。双飞翼布局不是像圣杯布局那样使用相对定位，而是在middle内部新增一个子节点，并设置它的margin-left 和 margin-right ，这样left设置margin-left为100%之后就不会被遮挡了，而right只需要margin-left: 150px就可以。相比来说，双飞翼布局比圣杯布局更简单，没有用到定位。以下是双飞翼布局的css样式代码。

* {
	box-sizing: border-box;
}
body {
	margin: 0;
	color: #fff;
}
header {
	width: 100%;
	height: 50px;
	background: #6daca7;
	line-height: 50px;
	text-align: center;
}
header {
	width: 100%;
	height: 50px;
	background: #6daca7;
	line-height: 50px;
	text-align: center;
}
footer {
	width: 100%;
	height: 30px;
	background: #52797a;
	clear: both;
	line-height:30px;
	text-align: center;
}
.container {
	
}
.left , .right, .middle {
	float: left;
}
.left {
	width: 200px;
	background: #18b0b0;
	margin-left: -100%; 
}
.right {
	width: 150px;
	background: #2a6f82c7;
	margin-left:-150px;

}
.middle {
	width: 100%;
}
.middle .sub {
	margin-left: 200px;
    margin-right: 150px;
    min-height: 150px;
	background: #184a7cad;
}

如有任何错误，烦请指正。
本作者从未收到过来自广大csdner的点赞，乞求看到这里的各位大大帮忙点个赞好吗？太卑微了我。

小k铁柱

关注

18
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
css圣杯布局和双飞翼布局（超详细）

参考文章圣杯布局大抵就是一个左右两边固定宽度，中间宽度自适应的三栏式布局。如下图所示：大致要求是：header和footer固定高度；左右两边固定宽度；中间宽度自适应；中间部分的高度是三栏中最高的区域的高度。（三列高度不固定）实现过程（顺序无所谓）：1、先定义好header 和footer，container 和其中的left , right ,middle.其中middle在最前面<!DOCTYPE html><html> <head>
复制链接

扫一扫

专栏目录