常用的css布局技巧

演示示例，可以采用liveweave工具。地址：http://liveweave.com

更多牛逼的布局思想，可以参考老外的一个demo：http://blog.html.it/layoutgala/

一.列等高布局。

1.伪列布局

看看国内的w3school 首页：http://www.w3school.com.cn/，

代码示例：

html：

<div id="wrapper">
    <div id="navsecond"><h1>左侧栏</h1><p style="height:500px;"></p></div>
    <div id="maincontent"><h1>中间栏</h1></div>
    <div id="sidebar"><h1>右侧栏</h1></div>
    <div id="footer" style="clear:both; height:80px; border:2px solid #666; background:#eee; "><h1>footer</h1></div>
</div>

css：

* { margin:0; padding:0; }
#wrapper { margin: 0 auto; width: 966px; background: transparent url('http://www.w3school.com.cn/i/site_wrapper.gif') top left repeat-y;}
#navsecond { float: left; margin: 0 0 0 12px; width: 150px; _display:inline; }
#maincontent { float: left; width: 637px;  }
#sidebar { float: left;  width: 150px;  }

原理很简单，给撑开的父包含框#wrapper定义背景图平铺即可。

缺点：

• 列加border会崩溃
• 不适合液态布局

需要注意的是，这并没有解决一个最根本的问题，也就是让两列真的等高。测试加上border便知。

从灵活性上来讲，这个布局技巧很尴尬，加border，不要border，就很费事。假如，我需要给两列都加上border，怎么办？

两边的border需要wrapper的背景图提供，而上下的border需要额外的html结构来模拟。蛋疼ing~~~。

还有一点，该布局是针对固定宽度布局而言，液态布局就崩溃了。

2.负边距布局。

html:

<div id="wrapper">
    <div id="main">
        <h1>主栏</h1>
        <p style="height:800px;">内容填充</p>
    </div>
    <div id="sider">
        <h1>侧边栏</h1>
    </div>
    <b id="footer"></b>
</div>

css:

* { margin:0; padding:0; }
#wrapper { width:960px; margin:0 auto; overflow:hidden; zoom:1; }
#sider, #main { padding-bottom:9999px; margin-bottom:-9999px; }
#main { float:right; width:600px; border:2px solid blue; }
#sider { float:left; width:300px; border:2px solid green; }
#footer { display:block; width:960px; margin:0 auto; height:2px; overflow:hidden; background:url('border.png') no-repeat;/*对两列底部border的补充*/ }

缺点：

• border底部会崩溃，padding太大了
• 不适合定位，两列的底部很深

尽管采用了负边距和正填充技术，但是，依然没有解决最核心的问题，就是两列高度依据最高的一列。

这个技术的高度不是最小高度，所以，还是带来了一系列的问题。相比伪列技术，灵活性更好些。

边框问题比较好解决。

 3.css3列等高实现：

 html:

<div id="wrapper">
    <div id="main">
        <h1>主栏</h1>
        <p style="height:800px;">内容填充</p>
    </div>
    <div id="sider">
        <h1>侧边栏</h1>
    </div>
    <div id="extra"><h1>多余的</h1></div>
</div>

css:（只写了-webkit 内核的样式，mozilla内核的，自行添加）

* { margin:0; padding:0; }
body { font:12px/1.5 arial; }
#wrapper { width:1200px; margin:0 auto;display:-webkit-box; display:box; }
#main { -webkit-box-flex:3; box-flex:3; background:#eee; margin:0 10px; -webkit-box-ordinal-group:2; border:2px solid green; }
#sider { width:300px; background:#eee; -webkit-box-ordinal-group:1; border:2px solid #ddd; }
#extra { -webkit-box-flex:1; background:#eee; -webkit-box-ordinal-group:3; border:2px solid #900; }

技术核心是父级包含框使用display:box，其内部列就等高啦。然后使用 box-ordinal-group进行位置显示排序。

缺点是，opera和IE9不支持啊。蛋疼~~~~

4.display:table-cell：

就是模拟表格。IE6,7不支持。另外，表格的显示不是block，在定位上需要额外的嵌套。不过，实现的的确是两列等高。

IE6,7死了的那天，这个技术就放光芒啦。

二.一列固定，一列自适应布局

 1.定位技巧：

html:

<div id="wrapper">
    <div id="main">
        <h1>主栏</h1>
        <p style="height:800px;">内容填充</p>
    </div>
    <div id="sider">
        <h1>侧边栏</h1>
    </div>
</div>

css:

* { margin:0; padding:0; }
body { font:12px/1.5 arial; }
#wrapper { margin:0 10px; position:relative;  }
#main { position:absolute; left:220px; top:0; right:0;  background:#eee; }
#sider { width:200px; min-height:400px; background:#808000;  }

这个技巧是存在使用上的局限性的。footer我放哪里啊？

wrapper高度没法自适应，因为main已经脱离了文档流。所以，你在博客园的首页，就可以看到，首页虽然用了此布局技术，但是他的footer位置可是在main里。

2.浮动和负边距:

这个技术应当算作比较成熟的技术了。稳定，稳定。不好的地方就是需要多一层标签。

html:

<div id="wrapper">
    <div id="main">
        <div class="inner">
            <h1>主栏</h1>
            <p style="height:800px;">内容填充</p>
        </div>
    </div>
    <div id="sider">
        <h1>侧边栏</h1>
    </div>
    <div id="footer">
        <h1>底部填充</h1>
    </div>
</div>

css：

* { margin:0; padding:0; }
body { font:12px/1.5 arial; }
#wrapper { min-width:1024px; overflow:hidden; }
#main { width:100%; float:left; margin-left:-200px; }
#main .inner { margin-left:200px; min-width:800px; background:#eee; }
#sider { width:200px; float:right; min-height:400px; background:#808000; }
#footer { clear:both; height:80px; background:#ccc; }

核心就是，父层偏移负边距，子层再偏回来。这个布局用的最多，也好用。嘎嘎~~~

3.BFC技巧：

 使用BFC技巧来做这个布局，对于结构的先后次序是有要求的。所以，此方法可以了解下，不适合大布局，小地方经常用到。

html：

<div id="wrapper">
    <div id="sider">
        <h1>侧边栏</h1>
    </div>
    <div id="main">
        <h1>主栏</h1>
        <p style="height:800px;">内容填充</p>
    </div>
    <div id="footer">
        <h1>底部填充</h1>
    </div>
</div>

css:

* { margin:0; padding:0; }
body { font:12px/1.5 arial; }
#wrapper { min-width:1024px; overflow:hidden; }
#main { min-width:700px; overflow:hidden; margin-left:200px; background:#eee;  }
#sider { float:left; width:200px; float:left; min-height:400px;  background:#808000; }
#footer { clear:both; height:80px; background:#ccc; }

好啦，就讲这么多，三列的布局可以由此扩展。另外，可以参考射雕提出的双飞翼布局。

以上的代码只是在chrome下测试了，其他浏览器是否存在bug，自行修复，重在思想。