【经典布局】圣杯布局和双飞翼布局

最新推荐文章于 2022-12-29 23:46:40 发布

1024A

最新推荐文章于 2022-12-29 23:46:40 发布

阅读量166

点赞数 1

分类专栏：前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_58309844/article/details/125744066

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、两种布局的对比
二、使用步骤
- 1. 圣杯布局
- 2. 双飞翼布局
总结

前言

圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

一、两种布局的对比

圣杯布局和双飞翼的特点：
1、两边定宽，中间100%
2、中间部分优先渲染，提升用户体验
圣杯布局缺点：当中间区域宽度小于两边时，布局会破碎
双飞翼布局不会破碎

二、使用步骤

1. 圣杯布局

圣杯布局：
步骤：

设置padding给左右两边预留空间
负外边距+相对定位移到空白区域
双飞翼不会破碎

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper>div{
				float: left;
			}
			.wrapper>.center{
				width: 100%;
				height: 200px;
				background-color: green;
			}
			.fl,.fr{
				width: 200px;
				height: 200px;
			}
			/* 2、负外边距+相对定位移到空白区域 */
			.fl{
				background-color: red;
				/* 负外边距 */
				margin-left: -100%;
				/* 相对定位 */
				position: relative;
				left: -200px;
			}
			.fr{
				background-color: blue;
				margin-left: -200px;
				position: relative;
				left: 200px;
			}
			/* 1、设置padding给左右两边预留空间 */
			.wrapper{
				padding-left: 200px;
				padding-right: 200px;
				min-width: 600px;
			}
			
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="center">中间</div>
			<div class="fl">左边</div>
			<div class="fr">右边</div>
		</div>
	</body>
</html>

展现效果：
在这里插入图片描述

2. 双飞翼布局

双飞翼:
步骤
wrapper(div中(div.contain) div左 div右)

wrapper >div,float:left
div.contain设置左右margin
div左, margin-left:-100%
div右, margin-left: px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper>div{
				float: left;
			}
			.center .contain{
				height: 200px;
				margin-left: 200px;
				margin-right: 200px;
				
			}
			.center{
				width: 100%;
				height: 200px;
				background-color: green;
			}
			.fl,.fr{
				width: 200px;
				height: 200px;
			}
			.fl{
				background-color: red;
				margin-left: -100%;
			}
			.fr{
				background-color: blue;
				margin-left: -200px;
			}
			
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="center">
				<div class="contain"></div>
			</div>
			<div class="fl"></div>
			<div class="fr"></div>
		</div>
	</body>
</html>