双飞翼布局和圣杯布局

都挺好，刚刚好

已于 2023-12-27 17:01:59 修改

阅读量103

点赞数

分类专栏：面试题文章标签：前端 javascript css

于 2023-12-27 17:01:45 首次发布

原文链接：https://blog.csdn.net/digdevil/article/details/128480929?spm=1001.2014.3001.5502

版权

面试题专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一、两种布局的目的：

使得左右两边的宽度不随着浏览器窗口的变化而变化，是固定的，只有中间的部分才可以随着窗口变化而变化。

二、两种布局的区别：

圣杯布局是通过父元素padding来设置左右，不遮挡中间内容
双飞翼布局时通过设置margin来限制内部区域从而是中间内容不受影响

圣杯布局代码：

<body>
<!--圣杯布局重点结构就是中间的部分 顺序是center排在最前面 方面后面调整left right位置
 因为left right都排在center后面 这样很容易调整上去 如果left right排在center前面 很难调整位置
--> 
		<div id="header">header</div>
		    <div id="container" 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>

<style>
	#container{
		padding-left: 200px;
		padding-right: 190px;
		
		margin: auto;
	}
	#center{
		width: 100%;
		background-color: aqua;
	}
	.column{
		float: left;
	}
	#left{
		width: 200px;
		background-color: bisque;
		margin-left: -100%;
		position: relative;
		left: -200px;
	}
	#right{
		width: 190px;
		background-color: coral;
		margin-right: -190px;
	}
	#header,#footer{
		width: 100%;
		margin: auto;
		background-color: darkgray;
		text-align: center;
	}
	.clearfix::after{
		 display: table;
		content: "";
		clear: both;
	}
	</style>

双飞翼代码：

<body>
		<div id="header">header</div>
		<div id="center" class="column">
			<div id="center-warp">
				center
			</div>
		</div>
		<div id="left" class="column">left</div>
		<div id="right" class="column">right</div>
		<div id="footer">footer</div>
</body>

<style>
#container{
		padding-left: 200px;
		padding-right: 190px;
		
		margin: auto;
	}
	#center{
		width: 100%;
		height: 200px;
		background-color: aqua;
	}
	.column{
		float: left;
		text-align: center;
	}
	#center-warp{
		/*用margin隐性的扩展自己的边界*/
		      margin :0 190px 0 200px;
 
	}
	#left{
		width: 200px;
		height: 200px;
		background-color: bisque;
		margin-left: -100%;
	}
	#right{
		width: 190px;
		height: 200px;
		background-color: coral;
		margin-left: -190px;
	}
	#header,#footer{
		width: 100%;
		margin: auto;
		background-color: darkgray;
		text-align: center;
	}
</style>