一、在没有出现div+css布局之前，我们都是用传统的table来布局的，但使用table来布局有这么几个缺点：
1.显示的样式和数据绑定在一起,不利于维护和扩展
2.布局的时候，灵活度不高
3.一个页面会存在大量的<table>元素，如嵌套的表格，造成代码冗余
4.增加带宽,针对那种大型网站来说，多一两百个字节一个月下来都是很可怕的开销
5.不利于搜索引擎的优化
但任何东西都是有两面性的，使用table布局有以下几个优点：
1.简单，容易理解
2.浏览器的兼容性比较好
3.用来显示数据还是比较好的
二、div基本思想
数据和样式要分离
三、div+css是什么？
div+css是目前比较流行的一种网页布局技术。
我们可以这样简单的来理解div+css
div:用来存放内容(文字、图片、元素等)的容器
css:用于指定放在div中的内容如何显示，包括这些内容的位置和外观
四、div+css的优势
要深刻理解div+css的优越性,我们不得不提到网页设计的三个历史时期table,table+css,div+css.
table网页设计：内容和样式(外观和布局)混合
table+css网页设计：table布局，css指定外观
div+css网页设计：div存放内容，css指定样式(外观和布局),内容和样式彻底分离
优势：
1.符合W3C标准
2.搜索引擎更加友好
3.样式的调整更加方便
4.内容和结构分离
5.当前主流网站都使用div+css框架模式，更加验证了div+css是大势所趋
注意：div+css并不是要我们抛弃table,因为table在显示数据时，更加方便，因此在使用div+css时，该使用table时，就得使用table.
五、常用的四种css选择器
1.类选择器
语法：
.类选择器名称{
属性名:属性值;
属性名:属性值;
...
}
2.id选择器
语法:
#id选择器名称{
属性名:属性值;
属性名:属性值;
...
}
3.html选择器
语法：
html标签名{
属性名:属性值;
属性名:属性值;
...
}
4.通配符选择器
该选择器可以用到所有的html元素，但其优先级是最低的。
语法：
*｛
属性名:属性值;
......
｝
六、css滤镜技术
就像当年四川汶川大地震后，很多网站所有的图片都变成灰色的，这是怎么实现的呢？
就是用到了css滤镜。
代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>css滤镜技术</title> 6 <style type="text/css"> 7 img{ 8 filter: gray; 9 } 10 </style> 11 </head> 12 <body> 13 <img width="300px" src="loginemail.JPG"/> 14 </body> 15 </html>
只要一句代码就可以让网页中的所有图片变灰色，是不是很方便。
如果想要鼠标移到图片上的时候，图片又变回原来的颜色怎么做呢？
只要给图片加个链接，然后稍微修改下样式就可以了
代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>css滤镜技术</title> 6 <style type="text/css"> 7 a:link img{ 8 filter: gray; 9 } 10 a:hover img{ 11 filter: ''; 12 } 13 </style> 14 </head> 15 <body> 16 <a href="#"><img border="0" width="300px" src="loginemail.JPG"/></a> 17 </body> 18 </html>
七、margin属性详解
margin:auto|length
检索或设置对象四边的外延边距。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
在IE4+，margin属性不可用于td和tr对象。
外延边距始终透明。