几种常见的CSS布局

最新推荐文章于 2024-07-08 20:41:07 发布

笑望灬星辰

最新推荐文章于 2024-07-08 20:41:07 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/hu1628299958/article/details/115498453

版权

css 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

html

22 篇文章 0 订阅

订阅专栏

本文详细介绍了三种常见的CSS布局方式：流体布局、圣杯布局和双飞翼布局。流体布局通过浮动元素实现自适应宽度；圣杯布局利用相对定位和负边距创建三栏布局，主要内容区域居中，两侧栏分别固定；双飞翼布局则通过浮动和内边距负值确保内容区域与侧边栏的相对位置。这些布局方法对于响应式设计和复杂网页结构至关重要。

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

几种常见的CSS布局

流体布局

.left {
	float: left;
	width: 100px;
	height: 200px;
	background: red; 
}

.right {
	float: right;
	width: 200px;
	height: 200px;
	background: blue; 
}

.main {
	margin-left: 120px;
	margin-right: 220px;
	height: 200px;
	background: green; 
}

<div class="container">
 	<div class="left"></div>
 	<div class="right"></div>
 	<div class="main"></div>
</div>

圣杯布局

.container {
	margin-left: 120px;
 	margin-right: 220px; 
 }
 
.main {
 	float: left;
 	width: 100%;
 	height:300px;
	background: green; 
}

.left {
 	position: relative;
 	left: -120px;
 	float: left;
 	height: 300px;
 	width: 100px;
 	margin-left: -100%;
 	background: red; 
 }
 
.right {
 	position: relative;
 	right: -220px;
 	float: right;
 	height: 300px;
 	width: 200px;
 	margin-left: -200px;
 	background: blue; }
 	
<div class="container"> 
	<div class="main"></div> 
	<div class="left"></div> 
	<div class="right"></div>
</div>

双飞翼布局

.content {
 	float: left;
	 width: 100%; 
}

.main {
	 height: 200px;
	 margin-left: 110px;
	 margin-right: 220px;
	 background: green; 
}

.main::after {
 	content: '';
	 display: block;
	 font-size:0;
	 height: 0;
 	zoom: 1;
	 clear: both;
}

.left {
 	float:left;
 	height: 200px;
 	width: 100px;
 	margin-left: -100%;
 	background: red; 
}

.right {
 	float: right;
 	height: 200px;
 	width: 200px;
 	margin-left: -200px;
 	background: blue; 
}

<div class="content">
 	<div class="main"></div>
</div> 
<div class="left"></div> 
<div class="right"></div>