css布局方式

最新推荐文章于 2024-05-14 18:25:49 发布

ease_07

最新推荐文章于 2024-05-14 18:25:49 发布

阅读量131

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/weixin_44125957/article/details/103001466

版权

html/css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css布局方式

1.行布局

2.多列布局：两列三列

4.圣杯布局，双飞翼布局： 三列布局中间自适应宽度两边定宽中间优先渲染

圣杯布局与双飞翼布局的区别：

圣杯：加一个包含main,left,right整体的容器，设置容器左右的padding,浮动左右元素填充padding,需设置position:relative，因为要设置left,right位置，同时调节margin-left

双飞翼：只需要给main元素加一个容器，设置容器的margin-left,margin-right，左右元素浮动设置margin-left即可

<!--圣杯布局-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body{
			margin:0;
			padding:0;
			width:100%;
			min-width:700px;
			text-align:center;
		}
		.header,.footer{
			width:100%;
			height:40px;
			background:#eee;
			float:left;
		}
		.body{
			padding:0 200px 0 220px;
		}
		.main,.left,.right{
			position:relative;
			float:left;
		}
		.main{
			width:100%;
			min-height:300px;
			background:green;
		}
		.left{
			width:220px;
			min-height:300px;
			background:red;
			margin-left:-100%;
			left:-220px;
		}
		.right{
			width:200px;
			min-height:300px;
			background:blue;
			margin-left:-200px;
			right:-200px;
		}
	</style>
</head>
<body>

</body>
	<div class="header">header</div>
	<div class="body">
		<div class="main">middle</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
	<div class="footer">footer</div>
</html>

<!--双飞翼布局-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body{
			margin:0;
			padding:0;
			min-width:700px;
			color:#fff;
			text-align:center;
		}
		.header,.footer{
			width:100%;
			height:40px;
			background:#ddd;
			float:left;
		}
		.main,.left,.right{
			float:left;
		}
		.main{
			width:100%;
			min-height:300px;
		}
		.main-item{
			margin-left:220px;
			margin-right:200px;
			min-height:300px;
			background:green;
		}
		.left{
			width:220px;
			min-height:300px;
			background:gold;
			margin-left:-100%;
		}
		.right{
			width:200px;
			min-height:300px;
			background:orange;
			margin-left:-200px;
		}
	</style>
</head>
<body>

</body>
	<div class="header">header</div>
	<div class="body">
		<div class="main">
			<div class="main-item">main-item</div>
		</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
	<div class="footer">footer</div>
</html>

在这里插入图片描述

ease_07

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css布局方式

css布局方式1.行布局2.多列布局：两列三列4.圣杯布局，双飞翼布局：三列布局中间自适应宽度两边定宽中间优先渲染圣杯布局与双飞翼布局的区别：圣杯：加一个包含main,left,right整体的容器，设置容器左右的padding,浮动左右元素填充padding,需设置position:relative，因为要设置left,right位置，同时调节margin-left双飞翼：...
复制链接

扫一扫

专栏目录