浅谈web前端中的表格布局与CSS盒子布局

时间：2023-10-06 02:24:01 | 来源：网站运营

时间：2023-10-06 02:24:01 来源：网站运营

浅谈web前端中的表格布局与CSS盒子布局：

在web前端设计排版时我们可能会用到表格布局和div+CSS布局，但现在主要使用后者，为何？今天我们来谈一谈两者之间的发展和原理。

话不多说下面来干货

发展过程

上个世纪Web开发人员流行使用表格进行文档整体布局。因为当时大部分浏览器不支持CSS，而且大部分人不会CSS，且没有文档拆分设计，致使文档臃肿，到了上个世纪末大部分没有相关背景的人进入，对于那些没有相关背景的开发人员觉得表格布局简单，致使使用它的人更多。本世纪出出现了泡沫危机致使大部分非专业人士的推出，而剩下来的大神觉得css更具有优势，所以div+CSS就得以发展。

传统表格布局

传统表格布局利用了HTML中的表格元素设置参数以达到无边框特性，将网页中的各个元素按版式划分放入表格的各单元格中，从而实现复杂的排版组合。

特点

现在依然有网站在使用表格布局，表格布局使用方法简单，制作只要将内容按照行和列拆分，用表格组装起来即可实现设计版面布局。










如今我们对网站外观要求和体验的不断提高，开发人员用各种图片来装饰网页。由于一些大图会致使下载速度缓慢，所以一般我们将大图切分成若干个小图，使网页加载速度加快。下图所示为使用表格布局的页面和该页面的部分HTML代码。




网页效果

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代码，正文就突出了，搜索程序能在更短的时间内爬完整个页面，搜索程序执行效率得到了提升。

如果有任何错误和纰漏，请联系我更正。

如果你有任何意见一定要联系告诉我，让我快速成长起来哟。