web前端设计表格布局和div+CSS布局

div+CSS

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

所有都元素都被看做是一个个盒子，它们占据一定空间，在其中有着特定的内容。我们可以通过调整盒子的边框和间距等参数来调节盒子的位置以及大小。页面是由大大小小许多盒子组成的，这些盒子互相之间彼此影响，因此，我们既需要理解每个盒子内部的机构，也需要理解盒子直接的关系以及互相的影响。

组成

盒子模型由content（内容）、border（边框）、padding（内边距）、margin（外边距）共4个部分组成。如下图：

一个盒子在页面上由“内容+内边距+外边距+边框”组成的，可以通过设定盒子的border、padding和margin来实现各种各样的排版效果。也不是所有用<div>定义的网页元素才是盒子，所有的网页元素都可以看做是盒子。网页上的表格、图片、文字等，从盒子模型的角度就是大大小小的盒子排列或嵌套在一起的。

总结

网页改版维护的维护

表格布局：复杂的表格设计使得设计不易，修改更复杂，最后生成的网页代码有许多冗余，还有许多没有任何意义的元素，文件量庞大，下载慢，解析速度也慢，维护和更新困难。

Div+CSS：可以把要展示的内容与其表现样式分开，对CSS文件进行修改，其他HTML文件中自动进行套用，不必在每个HTML文件中重复设置，减少设计者更多负担，修改页面更省时。

保持视觉的一致性：

DIV+CSS技术，方便统一网页风格，避免了不同区域或不同页面体现出的效果偏差。

页面载入得更快：

大部分页面代码写在了CSS当中，使页面体积容量更小。比表格嵌套的方式，DIV+CSS将页面独立成更多区域，打开页面时，逐层加载，而不像表格嵌套那样整个页面圈在一个大表格里，由此页面加载速度更加极速。

搜索引擎友程度高：

用表格进行网页布局的代码较多，搜索引擎要把多的代码去掉。而使用DIV+CSS布局设计网页，所有样式都在CSS里，正文代码得到极大的精简，也减少了HTML代码，正文就突出了，搜索程序能在更短的时间内爬完整个页面，搜索程序执行效率得到了提升。

网页标题：web前端设计表格布局和div+CSS布局
标题路径：/news11/99211.html

成都网站建设公司_创新互联，为您提供云服务器、标签优化、电子商务、网站内链、品牌网站设计、小程序开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联