两种常用布局（圣杯布局&双飞翼）

最新推荐文章于 2024-04-16 19:34:40 发布

三生有幸ii

最新推荐文章于 2024-04-16 19:34:40 发布

阅读量178

点赞数 2

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/adminsir0/article/details/125730054

版权

布局

圣杯布局

<style type="text/css">
   		
   		body{
   			/* 防止布局破碎 */
   			min-width: 600px;
   			
   		}
   		/*设置左右两边区域*/
   		.fl,.fr{
   			width: 200px;
   			height: 200px;
   		}
   		.fl{
   			background-color: red;
   			/*通过给margin-leftg负值（块的宽度）将位置与center最左侧重合*/
   			margin-left: -100%;
   			/*通过相对定位，将块移动到左侧预留区域*/
   			position: relative;
   			left: -200px;
   		}
   		/*设置中间区域*/
   		.center{
   		/*宽度必须100%，高度与左右两边相同*/
   			width: 100%;
   			height: 200px;
   			background-color: green;
   		}
   		.fr{
   			background-color: blue;
   			/*通过给margin-leftg负值（块的宽度）将位置与center最右侧重合*/
   			margin-left: -200px;
   			/*通过相对定位，将块移动到右侧预留区域*/
   			position: relative;
   			left: 200px;
   			
   		}
   		.wrapper{
   		/*通过padding给center两侧预留出位置*/
   			padding: 0 200px;
   		}
   		.wrapper div{
   			float: left;
   		}
   	</style>

	<body>
		<div class="wrapper">
			<div class="center">中间</div>
			<div class="fl"></div>
			<div class="fr"></div>
		</div>
	</body>

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

特点：

1、两边定宽，中间100%
2、中间先渲染，提升用户体验

圣杯布局缺点：

当中间区域的宽度小与两边区域的时候回破碎

解决办法：

给body设置最小宽度

2.双飞翼布局

<style type="text/css">
			.wrapper{
				
			}
			.wrapper>div{
				float: left;
			}
			.fl,.fr{
				width: 200px;
				height: 200px;
			}
			.center{
				width: 100%;
				height: 200px;
				background-color: green;
			}
			.center .contain{
				/* width: inherit; */
				height: 200px;
				/* background-color: yellow; */
				margin:0  200px;
			}
			.fl{
				background-color: red;
				margin-left: -100%;
			}
			.fr{
				background-color: blue;
				opacity: 0.5px;
				margin-left: -200px;
				
			}
</style>

	<body>
		<div class="wrapper">
			<div class="center">
				<div class="contain">
					收到回复就是打发决定是否就爱上对方卡士大夫 的积分卡了圣诞节疯狂撒娇地方受到国家受到飞机撒打开飞机撒单联开关哈市的空间发生东方闪电恢复大师见覅
				</div>
			</div>
			<div class="fl"></div>
			<div class="fr"></div>
		</div>
	</body>

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

特点：

1、两边定宽，中间100%
2、中间先渲染，提升用户体验
3、双飞翼布局不会破碎

总结：

圣杯布局：
wrapper（div中 div上 div下）
1、wrapper>div,float:left;
2、wrapper设置左右padding
3、div左,margin-left:-100%;relative
4、div右,margin-left:-200px;relative
双飞翼布局
wrapper（div中（div.contain） div上 div下）
1、wrapper>div,float:left;
2、contain设置左右margin
3、div左,margin-left:-100%;
4、div右,margin-left:-200px;

透明度与层级

<style type="text/css">
			.wrapper{
				position: relative;
			}
			.first,.second,.third,.fourth{
				width: 200px;
				height: 200px;
			}
			.first{
			/* 针对背景颜色设置透明度 */
				background-color: rgba(255, 0, 0, 0.5);
				position: absolute;
				left: 50px;
				top: 50px;
				z-index: -1;
			}
			.second{
				background-color: aqua;
				/* 针对背景颜色设置透明度 */
				opacity: 0.5;
				position: absolute;
				left: 100px;
				top: 100px;
				
				/* 
					z-index,只针对定位元素有效 
					值越大，层级越高，默认是1
					可以设置负数
				*/
				z-index: 2;
			}
			.third{
				background-color: yellow;
				
				position: absolute;
				left: 150px;
				top: 150px;
				
			}
			.fourth{
				background-color: green;
				
			}
		</style>

	<body>
		<div class="wrapper">
			<div class="first"></div>
			<div class="second"></div>
			<div class="third"></div>
			<div class="fourth"></div>
		</div>
	</body>

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

总结：

设置透明度的方法：
1、rgba（255,0,0,0,5）
括号前三个为颜色，最后一个为透明度（数值0-1）；
2、background-color:red;
opacity:0.5;(设置透明度，数值在0-1之间)；
设置层级：
z-index:-1;(数值越大层级越高，可以设负值，一般将背景图片设置为负值)