布局及兼容

一、div+css布局优点？

1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。
2.布局精准，网站版面布局修改简单。
3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。
4.节约站点所占的空间和站点的流量。
5.提高另外搜索引擎对网页的搜索效率。

二、Table布局的优缺点？

优点

1.容易上手。
2.可以形成复杂的变化，简单快速。
3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容

缺点：

1、Table要比其它html**标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)

2、Tablle会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间。)

3、Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)

4、在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦。)

5、Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%)(这会限制你页面设计的自由性。)

6、一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识，会省去你以后大量的时间。)

7、table对对于页面布局来说，从语义上看是不正确的。(它描述的是表现，而不是内容。)

8、table代码会让阅读者抓狂。(不但无法利用CSS，而且会你不知所云)

9、table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。

三、如何解决IE6的双边距bug？

当满足下面这三个条件时，就会出现这个BUG：

1、要为块状元素；
2、要左侧浮动；
3、要有左外边距（margin-left）。
出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现

解决方法：

给float的元素添加一个display：inline