CSS网页布局基础_什么是css网页布局的基础-优快云博客

本文链接：https://blog.youkuaiyun.com/molu_chase/article/details/52334017

本文介绍了多种网页布局的方法，包括居中显示、限定宽度布局、左右浮动布局、三列布局及混合布局等。每种布局方式都提供了详细的CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.居中显示：margin:0 auto;

.main,.footer{ width:200px; margin:0 auto}

2.限定宽度的布局

<style type="text/css">
body{margin:0;padding:0}
.left{width:20%;height:500px;float:left;background:#ccc}
.right{width:80%;height:500px;float:right;background:#ddd}
.main{width:50%;margin:0 auto;padding:0}
</style>
</head>

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

3.设置左右浮动

<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:200px; height:600px; background:#ccc; float:left;}/*左浮动样式*/
.right{ width:300px; height:600px; background:#FCC; float:right;}/*右浮动样式*/
</style>
</head>

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

4.三列布局

<style type="text/css">
body{margin:0;padding:0}
.left{width:33%;height:500px;float:left;background:#ccc}
.middle{width:33%;height:500px;float:right;background:#ddd}
.right{width:33%;height:500px;float:right;background:#ddd}
.main{margin:0 auto;padding:0}
</style>
</head>

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

三列，中间自适应，两边固定

middle中的margin是设置距离上右下左的距离

<style type="text/css">
body{margin:0;padding:0}
.left{width:200px;height:500px;position:absolute;left:0;top:0;background:#ccc}
.middle{height:500px;margin:0 200px;background:#dea}
.right{width:200px;height:500px;position:absolute;right:0;top:0;background:#ddd}
.main{margin:0 auto;padding:0}
</style>
</head>

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

如下所示，设置中间的间距

.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px;background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}

5.混合布局

.left {
	width: 200px;
	height: 600px;
	background: #ccc;
	position: absolute;
	left: 0;
	top: 0
}

.main {
	height: 600px;
	magrin: 0 110px 0 210px;
	background: #9CF
}

.right {
	height: 600px;
	width: 100px;
	position: absolute;
	top: 0;
	right: 0;
	background: #FCC;
}

.left1 {
	width: 100px;
	height: 300px;
	background: blue;
	float: left
}

.right2 {
	height: 300px;
	width: 100px;
	float: right;
	background: red;
}
</style>
</head>

<body>

	<div class="left">left</div>

	<div class="main">
		<div class="left1">left</div>
		<div class="right2">right</div>
	</div>
	<div class="right">right</div>

</body>

clear:规定哪一侧不允许浮动元素