css布局

一列布局

居中显示：margin:0 auto;

二列布局

float:left; float:right;

脱离文档流：float和position：absolute;relative不能

三列布局

左边和右边固定，中间自适应：
.left{width:200px;height:500pxbackground:#ccc;position:absolute;left:0;top:0;}
.middle{height:500pxbackground:#999;margin:0 300px 0 200px}
.right{width:300px;height:500pxbackground:#ddd;position:absolute;right:0;top:0;}

混合布局

 

<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.top{ height:100px;background:#9CF}
.head,.main{ width:960px; margin:0 auto;}
.head{ height:100px; background:#F90}
.left{ width:220px; height:600px; background:#ccc; float:left;}
.right{ width:740px; height:600px;background:#FCC; float:right;}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left;}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right;}
.footer{ height:50px; background:#9F9; clear:both;}
</style>
</head>

<body>
<div class="top">
    <div class="head">head</div>
</div>
<div class="main">
    <div class="left">left</div>
    <div class="right">
        <div class="r_sub_left">sub_left
        </div>
        <div class=" r_sub_right">sub_right
        </div>
    </div>
</div>
<div class="footer">footer</div>
</body>

 

清浮动：

1.如果是要清除浮动影响的是浮动对象的父对象：
建议采用：设置父对象的overflow:hidden;
2.如果要清除浮动影响的是浮动对象后边紧邻的对象
建议采用：clear:both;

 

posted @ 2016-08-24 11:53  blogging  阅读(134)  评论(0)  编辑  收藏  举报