CSS经典布局方案--三栏布局

最新推荐文章于 2024-10-23 02:47:28 发布

张哈哈zhh

最新推荐文章于 2024-10-23 02:47:28 发布

阅读量112

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/weixin_44383261/article/details/117216889

版权

本文详细介绍了前端布局中的两种经典方案——圣杯布局和双飞翼布局，它们都能实现左右固定，中间自适应的效果。圣杯布局通过内边距负 margin 实现，而双飞翼布局则是将中心区域与侧边栏分离。此外，还提到了使用 calc() 计算属性、flex 布局以及定位方式来实现相同效果的方法，展示了多种布局策略的灵活性和实用性。

摘要由CSDN通过智能技术生成

圣杯布局与双飞翼布局

这两种布局非常相似，都是左右固定，中间自适应
圣杯布局：

    <style type="text/css">
			body{
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			.container{
				height: 100%;
				/* 左右两边容器宽度都是100px，所以容器左右设置100的内边距 */
				padding: 0 100px;
			}
			.center{
				width: 100%;
				background-color: #008000;
				height: 100px;
			}
			.left{
				width: 100px;
				background-color: #0000FF;
				height: 100px;
			}
				
			.right{
				width: 100px;
				background-color: brown;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="center"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>

此时的页面是这样的：
在这里插入图片描述
第一步：给三个div都加上左浮动，因为center已经占满了第一行的内容区，所以left和right会并排放在第二行。
第二步：让三个div位于同一行上，给left加上margin-left:-100%;，它是基于父元素的百分比的，给right加上margin-right:-100px;
在这里插入图片描述第三步：左边的元素需要再忘左移动，给它加上position: relative;left: -100px;
完成。

双飞翼布局：

<div class="clearfix">
	<div class="container">
		<div class="center"></div>
	</div>
	<div class="left"></div>
	<div class="right"></div>
</div>

与圣杯布局的区别就是，center与left和right分离了。

        <style type="text/css">
			body{
				width: 100%;
				height: 100%;
				overflow: hidden;
				background-color: #A5A5A5;
			}
			.container{
				width: 100%;
			}
			.center{
				margin: 0 100px;
				height: 100px;
				background-color: #98FB98;
			}
			.container,.left,.right{
				float: left;
			}
			.left{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
			}
			.right{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
			}
		</style>

同样地，container有左右内边距，值等同于left与right的宽度，我们也让container、left、right左浮动，注意与圣杯布局的区别就是，left和right是与container同级的，圣杯布局是给center加的左浮动。
在这里插入图片描述接下来，给left加上margin-left: -100%;，right加上margin-left: -100px;

计算属性：CALC（有兼容，且性能不好）

		<style type="text/css">
			/* .container{
				width: 100%;
			} */
			.left,.right{
				width: 100px;
				height: 100px;
				float: left;
				background-color: #009DFD;
			}
			.center{
				width: calc(100% - 200px);
				height: 100px;
				float: left;
				background-color: #98FB98;
			}
		</style>
<body>
		<div class="container">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
</body>

注意这一行：width: calc(100% - 200px);，减号两边必须有空格，100%是屏幕宽度，减去左右两边的宽度，剩余就是center的宽度，三个div要按左中右的顺序写。

flex布局

<style type="text/css">
		.container{
			display: flex;
			/* 左中右排列 项目位于各行之间留有空白的容器内。*/
			justify-content: space-between;
			height: 100%;
		}
		.left,.right{
			/* 不放大不缩小 */
			flex: 0 0 200px;
			height: 100px;
			background-color: #00FFFF;
		}
		.center{
			flex: 1;
			height: 100px;
			background-color: #008000;
		}
	</style>
<body>
	<div class="container">
		<div class="left"></div>
		<div class="center"></div>
		<div class="right"></div>
	</div>
</body>

在这里插入图片描述

定位

	<style type="text/css">
		.container{
			position: relative;
			height: 100%;
		}
		.left,.right{
			position: absolute;
			top:0;
			width:200px;
			height: 100px;
			background-color: #009DFD;
		}
		.left{
			left: 0;
		}
		.right{
			right: 0;
		}
		.center{
			/* 宽度不写 */
			margin: 0 200px;
			height: 100px;
			background-color: #008000;
		}
	</style>

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