CSS实现网页布局(一列，两列，三列)

最新推荐文章于 2024-07-28 13:07:38 发布

Bazingaea

最新推荐文章于 2024-07-28 13:07:38 发布

阅读量1.4w

点赞数 3

分类专栏： web 文章标签： css 布局

本文链接：https://blog.csdn.net/Bazingaea/article/details/50880460

版权

本文介绍了如何使用CSS实现一列、两列和三列布局。一列布局通过margin:0 auto实现水平居中；二列布局利用浮动布局float，通过clear属性清除浮动；三列布局则涉及position属性，如relative、absolute和fixed。对于三列自适应布局，可调整元素宽度比例，固定宽度布局则需结合绝对定位和margin设置。在实际设计中，常将这些布局方式灵活组合使用。

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

1.一列布局（又叫单列布局）
一列布局需要掌握3个知识点：标准文档流，其中又包含了块级元素和行级元素，还有margin属性，可以说实现一列布局的关键代码就是由margin属性实现的，通过设置margin:0 auto;来实现水平居中，auto就是它会根据浏览器的宽度自动设置两边的外边距。要设置margin，你首先得有一个盒子模型，比如这里的div，然后设置它的长宽，有一个固定的大小，才可以实现居中。

<style type="text/css">
	body{margin:0;padding:0;}
	.head{heigth:200px;background:blue;}
	.main{height:500px;width:800p;margin:0 auto;}
	.footer{background:blue;height:200px;width:800px;margin:0 auto;}
</style>

<div class="head"> This is head !</div>
<div class="main"> This is main !</div>
<div class="footer"> This is footer !</div>

2.二列布局（两列自适应）
浮动：
块级元素都是一行一行这样排列的，需要把两个块级元素并排时，就需要用到CSS中的浮动布局float，float有三个属性值，
left-左浮动，right-右浮动，none-不浮动&