css布局双飞翼及圣杯

最新推荐文章于 2024-07-09 14:56:28 发布

伟大的人民艺术家

最新推荐文章于 2024-07-09 14:56:28 发布

阅读量173

点赞数 1

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/Haley_170/article/details/112793301

版权

首先不要觉得写前端用css很low，其实css很强大~选项卡轮播图动画这类大家觉得用js才能完成的东西其实用css也能实现。而且布局css真的很实用，
css布局中最经典的应该就是两边固定中间自适应的三栏布局，然而在这种经典布局中，又有几个方法，圣杯和双飞翼，下面来介绍

首先说说圣杯方法
首先它的html是

<body>
		<div class="box">
			<div class="center"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
</body>

首先先把三个子盒子设置宽高跟背景颜色（方便观察效果）

.box{
		height:120px;
		background:red;
}
.center{
		width:100%;
		height:100px;
		background:green;
}
.left{
		width: 180px;
		eight: 100px;
		background: yellow;
}
.right{
		width: 180px;
		height: 100px;
		background: blue;
}

此时页面的效果是
在这里插入图片描述
而我们要的效果是绿色在中间自适应，黄色跟蓝色在两边。所以我们给这三个子盒子一个定位让它们脱离文档流，并设置定位的位置，左边的盒子跟右边盒子设置绝对定位，这样大盒子box必须设置一个相对定位，左边盒子的位置定位在left：0，top：0的位置，右边盒子定位在right：0，top：0的位置
此时的css页面是：

            .box{		
			    height: 120px;
				position: relative;
				background: red;
			}
			.center{	
				width: 100%;
				background:green;
				height: 100px;
			}
			.left{		
				width: 180px;
				height: 100px;
				background:yellow;
				position: absolute;
				left: 0px;
				top: 0px; 
			}
			.right{		
				width: 180px;
				height: 100px;
				background: blue;
				position: absolute;
				top: 0px;
				right: 0px;
			}

在这里插入图片描述

圣杯就完成了。

接下来说说双飞翼方法
同样先写它的html

<body>
		<div class="center">
			<div class="box">12345</div>
		</div>
		<div class="left">left</div>
		<div class="right">right</div>
</body>

可以看出，双飞翼html的格式跟圣杯有所不同，圣杯是一个大盒子包含三个小盒子，而双飞翼是三个盒子，中间需要自适应的盒子包含了一个小盒子。
同样，先跟三个同级的盒子设置宽高跟背景颜色以作区分
此时的css是这样的

             .center{
				width: 100%;
				height: 400px;
				background: salmon;
			}
			.left{
				width: 200px;
				height: 300px;
				background: khaki;
			}
			.right{
				width: 200px;
				height: 300px;
				background: khaki;
			}
			.box{
				background: pink;
				height: 200px;
			}

此时页面的状态是
在这里插入图片描述
此时，左右两个盒子在中间盒子的下方，中间盒子中的小盒子宽度跟中间center的宽度一致，接下来我们要让左右两个盒子占到两边去，先浮动三个同等级盒子。

在这里插入图片描述

但是中间的盒子宽是100%，所以我们要用调试margin的方法把黄色跟蓝色的盒子放到两边
最左边的盒子左边距设置-100%，右边盒子左边距设置-（自身宽度），然后中间的盒子中的小盒子要设置左右边距（两边盒子的宽度）

           .center{
				float: left;
				width: 100%;
				height: 220px;
				background: salmon;
			}
			.left{
				float: left;
				width: 200px;
				height: 100px;
				background: khaki;
			    margin-left: -100%; 
			}
			.right{
				float: left;
				width: 200px;
				height: 100px;
				background: khaki;
				margin-left: -200px; 
			}
			.box{
				/* float: none; */
				background: pink;
				height: 200px;
				margin: 0 200px;
			}

此时，双飞翼的效果就做好了
在这里插入图片描述
这样双飞翼就完成了

下面说一下它们的区别
1.双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
2.圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题。
3.双飞翼布局不用设置相对布局，以及对应的left和right值。

伟大的人民艺术家

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css布局双飞翼及圣杯

首先不要觉得写前端用css很low，其实css很强大~选项卡轮播图动画这类大家觉得用js才能完成的东西其实用css也能实现。而且布局css真的很实用，css布局中最经典的应该就是两边固定中间自适应的三栏布局，然而在这种经典布局中，又有几个方法，圣杯和双飞翼，下面来介绍首先说说圣杯方法首先它的html是<body> <div class="box"> <div class="center"></div> <div class=
复制链接

扫一扫