1、DIV+CSS布局与HTML表格定位方式不同。现在网站设计标准已经不再使用表格定位技术了，而是使用DIV+CSS的布局来实现各种定位。div盒子模型结构将各部分内容分配到不同的区块，再用CSS来设置盒子模型的位置、大小、边框、内外边距、排列方式等等。也即：div用来搭建网站结构即框架，css用来创建网站的外观表现即样式或美化。注意：不是所有的网页都需要DIV布局，如数据页面、报表之类的页面，使用HTML的表格会比较好。
2、DIV&CSS标准的优点：a：表现和内容分离，在HTML文件中只存放文本信息，而控制样式格局的设计是单独存放在样式文件中的，实现了HTML文件的简洁性。b：代码简洁，提高页面浏览器速度。c：易于维护和改版。d：提高搜索引擎对网页的索引效率（搜素引擎会绕过样式表去直接抓取网页内容）

<html><head><title>div+css网页    标准化布局</title><style></style></head><body><span>span也是区块标签定义的内容默认是不换行的，它是内联的，定义的是一个小块</span><span>span也是区块标签定义的内容默认是不换行的</span><div>div区块标签定义的内容，默认是换行的，定义的是一个大块</div><div>div区块标签定义的内容，默认是换行的</div></body>
</html>

2、盒子模型的介绍
每个HTML元素都可以看做一个装有东西的盒子，盒子具有宽度（width）和高度（height）,盒子里放的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间还有边界（margin）。

<head><style>#bor{}#main{}span{}</style>
</head>
<body><div id="bor"><div id="main"><span>内容元素</span></div></div>
</body>

3、在body体中，默认有一个外边距margin,若需去掉，则在body的style设计中加上margin:0px；
4、用padding 设置为固定的内边距可以使区块随窗口变化而变化。

<style>
body{
background:green;
margin:0px;
padding:100px
}
#main{
width:100px;
height:400px;
background:yellow;
}
</style>
<body><div id="main"></div>
</body>

4、区块框浮动

<style>
body{
margin:0px;
}
#main{
float:left;(脱离文档流想左浮动)
width:200px;
height:200px
background:red
}
#one{
float:left;(脱离文档流想左浮动)
width:200px;
height:200px
background:green
}
</style>
<body><div id="main">wwww</div><div id="one">bbbb</div>
</body>
.clear{
clear:both;
}
<div class="clear"></div>
此作用相当于给浮动的区块换行

5、一个实例

建一个css文件夹放单独设计的.css文件：globle.css(全局样式设计文件)，layout.css(布局设计文件)，font.css(字体设计文件)，link.css（链接样式文件），print.css(打印样式文件)

divcss.html设计

<html>
<head><title>页面布局实例</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8">/*(链接样式文件)*/<link rel="stylesheet" type="text/css" href="css/layout.css"/><style>#one{float:left;/*(脱离文档流想左浮动)*/width:200px;height:200pxbackground:green
}</style>
</head>
<body><div id="container"><div id="header"><div id="logo"></div><div id="banner"></div><div id="tool"></div><div class="nav"> </div>/*设计一个分隔区块*/<div id="menu"></div></div><div class="nav"> </div>/*设计一个分隔区块*/<div id="main"></div><div class="nav"> </div>/*设计一个分隔区块*/<div id ="footer"></div></div>
</body>
</html>

layout.css设计

body{margin:0px;padding:0px;font:12px Arial,宋体；text-align:center;/*这样对于IE浏览器会有居中效果*/}
#container{margin-left:auto;margin-right:auto;/*这样对于FF火狐浏览器效果会居中*//*float:left;(脱离文档流想左浮动)*/width:960px;height:800px;/*临时用*/background:green；/*临时用*/text-align:left;/*在container区块里面的内容左对齐*/
}
#header{
width:100%;
height:80px;
background:red;
}/*IE会自动调整高度，FF不会，指定多高就为多高（解决方法：在header的设计中将高度去掉）*/
#header #logo{
float:left;/*像左摆放logo*/
width:200;
height:80px;
margin-right:10px;
background:#ff00ff;
}
#header #banner{
float:left;/*像左摆放banner*/
width:600px;
height:80px;
background:blue;
}
#header #tool{
float:left;/*像左摆放tool*/
width:140px;
height:80px;
background:#ff0000;
}
#header #menu{
float:left;
width:100%;
height:28px;
background:#eee;
clear:both;
}
#main{
width:100%;
height:600px;
background:yellow;
}
#footer{
width:100%;
height:80px;
background:yellow;
}
.nav{
width:100%;
height:10px;/*但是IE浏览器最小高度为18px，所以当小于18px时都为18px*/
clear:both;
overflow:hidden;/*解决高度小于18px时不同浏览器显示效果不同的问题*/
}/*将header、main、footer三个区块用10个像素分开*/

DIVCSS布局-编程之家

IE浏览器与FF浏览器居中设计方式不同；IE指定的最小高度为18px(解决方法：overflow：hidden；);IE会自动调整高度，FF不会，指定多高就为多高（解决方法：在header的设计中将高度去掉）；FF如果使用浮动才是正常的，（解决方法：让所有的区块都脱离文档流）;IE和FF在列表的外边距和内边距有区别（解决方法：ul{margin:0px; padding:0px; list-style:none;}）

#header #menu.tiao{}/*这是一个关联选择器，优先级最高*/