圣杯布局和双飞翼布局对比

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

酷酷的橙007

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

阅读量274

点赞数

分类专栏：前端文章标签：前端布局

本文链接：https://blog.csdn.net/xiecheng1995/article/details/90247408

版权

前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

摘要

今天在刷某公司前端笔试题时，遇到一个编程题，实现双飞翼布局和圣杯布局。双飞翼布局和圣杯布局主要描述的是上下header，中间宽度自适应，左右宽度固定的一类布局方式。这两种布局方式是公司笔试或面试中最基础的也是必考的知识点，因此在这里记录一下，方便以后复习。

HTML结构对比

双飞翼布局和圣杯布局其实最后的效果是一样的，css样式上也基本类似，但是在设计时还是有明显不同的。简单来说，首先对于HTML的标签，双飞翼布局包括：header、middle（内含inside）、left、right、footer，圣杯布局包括：header、container（内含middle、left、right）、footer。代码对比如下：
双飞翼布局：

<body>
	<div class="header">
		<h4>header</h4>
	</div> 
	<div class="middle column">
		<div class="inside">
			<h4>middle</h4>
		</div>
	</div>
	<div class="left column">
		<h4>left</h4>
	</div>
	<div class="right column">
		<h4>right</h4>
	</div>
	<div class="footer">
		<h4>footer</h4>
	</div>
</body>

圣杯布局：

<body>
	<div class="header">
		<h4>header</h4>
	</div>

	<div class="container">
		<div class="middle column">
			<h4>middle</h4>

		</div>
		<div class="left column">
		<h4>left</h4>

		</div>
		<div class="right column">
		<h4>right</h4>

		</div>
	</div>
		
	<div class="footer">
		<h4>footer</h4>
	</div>
</body>

注意：在写HTML标签时，一定切记middle要写在left和right之前。

CSS样式对比

双飞翼布局和圣杯布局在CSS样式上有比较大的不同，代码如下：
双飞翼布局：

*{
	margin:0;
	padding:0
}
h4{
	text-align:center
}
.header, .footer{
	background:pink
}
.column{
	float:left;
}
.middle{
	background:yellow;
	width:100%;
}
.middle .inside{
	margin:0 100px 0 200px
}
.left{
	background:red;
	width:200px;
	margin-left:-100%;
}
.right{
	background:green;
	width:100px;
	margin-left:-100px;
	
}
.footer{
	clear:both
}

圣杯布局：

*{margin: 0;padding: 0;}
body{
	min-width:500px
}
.header, .footer{
	background:pink
}
div{
	text-align:center
}
.container{
	padding:0 100px 0 200px;
}
.container .column {
	float:left
}
.middle{
	background:yellow;
	width:100%;
}
.left{
	background:red;
	width:200px;
	margin-left:-100%;
	position:relative;
	left:-200px
}
.right{
	background:green;
	width:100px;
	margin-left:-100px;
	position:relative;
	left:100px
}
.footer{
	clear:both
}

从区别来看，具体包括以下几点：

双飞翼布局的middle、left、right的父元素是body，圣杯布局的middle、left、right的父元素是container，因此双飞翼布局需要在middle中内嵌一个inside，方便在middle中写内容，而圣杯布局可以直接在middle中写内容；
双飞翼布局中的inside，其样式应包含左右外边距margin，为了给left和right留出位置；
双飞翼和圣杯布局中的left元素所包含的margin-left:-100%样式的含义是使left元素在最左侧浮动。对于双飞翼布局，100%是针对middle而言的，而圣杯布局是针对container而言的；
圣杯布局为了实现left和right元素在padding的留白中，需要使用position：relative相对定位，通过设置left/right移动，双飞翼布局不需要使用相对定位；
对于两种布局，middle的width都是100%，左右的width是定值；
本人在实际编写style时，习惯都用left或者margin-left定位；
对于圣杯布局来说，为了保证浏览器页面宽度缩小到一定距离时，元素不会窜到下一行，需要增加body的样式min-width，大小为两个left元素的宽度+一个right元素的宽度，双飞翼布局不用考虑这一问题；
footer一定要清除浮动，即clear：both，保证footer元素两边没有浮动元素，这样就可以使footer以块级元素一直在待在下面；
相比较而言，我觉得双飞翼布局在灵活性上要高于圣杯布局。

效果展示

双飞翼和圣杯布局效果是一样的，只不过对于双飞翼布局来说，中间黄色middle块和left/right块是覆盖关系，即left/right在middle上方，且位于两边；圣杯布局middle块的两边是left和right块，无覆盖关系。如下所示：

具体实际理解我觉得还是多练习几遍，就会加深对上述两种布局的印象了。

酷酷的橙007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局和双飞翼布局对比

摘要今天在刷某公司前端笔试题时，遇到一个编程题，实现双飞翼布局和圣杯布局。双飞翼布局和圣杯布局主要描述的是上下header，中间宽度自适应，左右宽度固定的一类布局方式。这两种布局方式是公司笔试或面试中最基础的也是必考的知识点，因此在这里记录一下，方便以后复习。HTML结构对比双飞翼布局和圣杯布局其实最后的效果是一样的，css样式上也基本类似，但是在设计时还是有明显不同的。简单来说，首先对于H...
复制链接

扫一扫