北京-第四十六期div+css的布局较table布局有什么优点？

Posted 2021-03-29 葡萄藤IT技能树

1.背景介绍

1.DIV+CSS布局，是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。

2.Table布局是一种老式的布局方式，在css标准还未统一的时候，table因为机构的稳定可靠和较好的兼容性成为主流的布局方式，所以早些年很流行table方式布局

2.知识剖析

Tables的缺点

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

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

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

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

5、Table会影响其内部的某些布局属性的生效

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

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

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

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

div+css方式布局的优点：

1. 标准化的页面结构：DIV+CSS是行业标准。

2、代码简洁：较TABLE来说代码精简许多。

3、页面浏览速度较快： 对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。

4、页面布局灵活：DIV+CSS使得页面布局方便操作灵活，改版时只需改CSS样式即可实现页面重新布局，而不用改动程序，从而降低了网站改版的成本。页面效果丰富，包括视觉效果和用户体验比如拖拉。

（现在基本上没有人用table布局了，这是前几年css标准和功能还不完善的时候，有争议的。 现在div+css布局公认已经比table布局好太多了，总之用div+css就没错了。）

3.常见问题

如何有效提高使用CSS+DIV进行布局的能力？

4.解决方案

1.看书，遇到问题多搜索、

2.最重要的就是要多练，多练习才会遇到不同的问题,解决的问题多了就更加熟练了。

3.有空的时候可以去仿站，写一写页面，或者重构自己以前的页面。

5.参考文献