DIV+CSS难点之经验总结
1、网页居中显示：
需要设置两个地方，一个是body，一个是外边框div。
CSS：
body{
margin:0;
padding:0;
text-align:center;
}
#main{ /*最外层DIV*/
width:760px;
margin:0 auto;
padding:0
}
2、文字垂直居中显示：
在DIV中定义一个行高与其高度相同即可。
CSS：
.title{
height:25px;
line-height:25px;
vertical-align:middle;
}
3、图片垂直居中显示：
在<img>标签中加入align="absmiddle"
即可。
4、清除浮动：
如果在同一行上有几个DIV并列显示，那么必须在其中加入清除浮动代码，如果在一行上只是一个DIV，好象不必清除浮动。
CSS：
.clear{clear: both;}
HTML示例：
<div id="main">
<div
class="left"></div>
<div
class="center"></div>
<div
class="right"></div>
<div
class="clear"></div>
</div>
<!--清除浮动后，后面的
代码排列就不会有任何变形了，不管是在IE还是FF中，都很正确-->
<div ……
5、三列结构中的的DIV写法：
适用于左右栏是窄幅，中栏为主要内容显示，让其宽度自适应。
CSS:
#main{
width:760px;
margin:0 auto;
}
.left{
width:100px;
float:left;
}
.right{
width:120px;
float:right;
}
.center{
margin:0
120px 0 100px;/*页面
相关文档：
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
In CSS 2.1, horizontal margins ne ......
参考资料：http://www.blueidea.com/tech/web/2007/4546.asp，由浅入深漫谈margin属性 - 网页制作 - 蓝色理想
直接上代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>aaa</title>
<style type="text/css">
html { }
......
网上看到的一些CSS工具资源
在线CSS工具：
W3C CSS 校验服务 :提供万维网协会(W3C)样式表(CSS)校验服务。
CSS 在线编辑器:OnLine CSS Designer - CSS Style Editor。 CSS 样式在线编辑器，可以即时查看CSS 样式效果演示。
QrONE CSS Designer ：在线CSS编辑器，所见即所得。
SKUER - The CSS Search Engine :SKUER ......
垂直居中对表格来说是小菜一碟，只需指定单元格为vertical-align: middle即可，
但这在css布局中不管用。假设你将一个导航菜单的高度设为2em，
然后在css中指定垂直对齐的规则，文字还是会被排到盒的顶部，根本没有什么区别。
要解决这一问题，只需将盒的行高设为与盒的高度相同即可，
以这个例子来说，盒高2em,那么只� ......
