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-不浮动&