1:速度和加载方式方面的区别
  div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少;table 的加载方式是完成后加载,遇到 <table> 后,在读到 </table> 之前,table 中的内容不加载,或者传输中断了(document.onload()事件)的时候加载,这是因为TABLE牵涉到多行多列问题,所以只有当TABLE所有内容加载完毕,IE才知道该怎么显示
  2:在网页应用中的差别
  如果页面首尾加 table ,那么必须等整个页面读完了才加载
  如果页面首尾加 div ,无任何影响
  3:DIV与Table布局在大型网站的可用性比较
  DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的。让TABLE做该做的事,并不是说页面里不出现TABLE就是多么多么牛。
  用DIV进行排版的优势就是我不说,大家应该都比较清楚。DIV是标准,是大势所趋,但并不意味着所有的页面都适合用它来做。
  中国的门户和国外的有很大的区别,中国网民并不喜欢信息量少的页面,YAHOO到了中国页面上的内容就多了不少,而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改了回来。正式由于中国的国情造就了搜狐、新浪这样门户。
  为什么DIV不适合他们?下面我从几个方面来逐一说明:
  精简代码:
  大家都说DIV的布局精简代码,但是用DIV替代TABLE所节约的代码又被CSS(样式)所占用,而这些样式大多用于控制DIV的排版布局。那你会说了,CSS可以放在外部重用啊,要想得到这个问题的答案请往下看。
  重用性与下载量:
  统一使用一个.css的样式表文件,可以实现修改一次,全站修改的效果,这样使得维护的成本更低。但是请大家换一个角度想,如果所有页面在加载时都要访问一个文件,那这个文件每天的下载量,特别时在搜狐、新浪的网站平台上将达到几亿次,这就需要后面有很多台前端web服务器在做支撑,那后台的成本无形中也提高了很多。如果后台支撑没有做好,那么页面就会出现花屏,之前所作的工作也是白费。很多人会问,这样的几率太小了。我们所作的工作就是为了避 免这一两次意外的发生,如果意外发生了,对于门户后果将是不堪设想的。
  HTTP通讯:
统一的样式表文件采用外部调用的形式,这样每次加载单个页面都会多一次对服务器的http请求服务器都会增加一次响应,这样对前端web服务器 会是很大的消耗。而原来很长时间都是将css和js写在页面前端(大家可以看看sohu和sina的页面,大多都是采用这样的形式),而不是作为外部调用 的形式,也是为了尽量避免给服务器增加消耗。
  页面缓存:
  每次用户访问的页面,都会在浏览器缓存中保存一定时间,以保证用户下次再访问该页面时能够大大提高页面显示速度。而每次修改都会使页面重新下载,对于每个外部导入的样式文件也是如此,如果CSS文件修改,那么访问网站的每一个页面都会重新下载,而以往的将样式写在页面中的方式,只是修改的页面需要重新下载。
  兼容性:
  对于CSS(样式表)并不是所有浏览器的所有版本都支持的很好,比如IE5以前的浏览器对于CSS的支持就不是很好。而现在使用IE5以前版本 浏览器的用户不在少数,这样就使得在页面制作的过程中需要针对不同浏览器版本进行测试,以保证兼容性,无形中也增加很多工作量(至少我接触的开发人员制作 div页面比table页面的标准时间要长一些)。
  横切与延展性:
横切——传统的布局方式为了使页面下载的更快,把页面自上而下分成若干个块,但是往往采用DIV进行布局的页面都会出现这样的情况,由于每块中间栏或者其他栏内容条数不固定导致两边栏目没有同时自适应,而出现留白。
  以上我们只是讨论某一技术在某一领域的可用性,而非技术本身。
  说了这么多并不是说DIV这种布局方式不好,而是说我们应该正确的看待Table在以内容为基础的大型门户中的作用,而不是人云亦云。之所以 DIV的布局方式没有在大型网站应用,不是说门户没有用DIV是技术落后,是里面的人没有前瞻性,而是多种原因决定的。网易之所以全部采用DIV的方式是因为内容并不是他们主攻方向。而对于其他门户来说,这样的决策是要靠时间来验证的。只是现在这个时机还不成熟而已。
  4:DIV+CSS
  而现在我认为DIV +CSS并不是字面上的含义那么简单,而有两重内在含义:
  1、结构与表现分离,用DIV完成结构,用CSS控制表现,这样带来的好处非常多,DIV精简了页面,提高了灵活性。而精通CSS的设计师能避免DIV的重复嵌套,从而大大提高页面加载速度,以及站点的可以维护性。
  2、选用DIV 来配合CSS的原因,CSS 的核心是 “盒子模型”,而没有哪个标签能比DIV更好的诠释“盒子模型”的精髓,TABLE的结构过于复杂,并不能很好的做到这一点,虽然TABLE+CSS也是一种选择,但别忘了DIV还有另外一个优势,浮动层叠,而且用TABLE进行布局的网站是不能通过W3C验证的。
  其实DIV的好处还远远不止这些,例如弹性布局,用户自定义布局,DIV都展现出不可思议的灵活性,而富有语义的结构对搜索引擎的友好度也比TABLE要来的高,更不用说跨平台的应用。DIV+CSS为我们提供了一个优雅而规范的技术框架,让我们能用最少的重复劳动,完成更多更美观的页面,从而提升整个团队的效率,甚至改变长期以来网页设计师与网页程序员无法同步工作的问题。
在我亲身经验中,使用DIV+CSS的团队,与使用TABLE+CSS的团队相比,工期缩短30%-50%。
  劣势:table布局规避了许多浏览器不兼容的问题。而DIV则必须面对这些问题。

转载于:https://www.cnblogs.com/xlzsdxk/p/7607792.html

div+css与table布局相关推荐

  1. DIV+CSS和Table区别

    众所周知,这(DIV+CSS和Table)两种语句都经常被开发人员使用了来控制界面显示,但是这两种语法也有很大的不同,下面分别从这两种语句的优缺点进行分析: 一.制作效率 我想没人反对表格的制作效率要 ...

  2. div css表单布局的五个小技巧

    div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加 ...

  3. DIV+CSS列表式布局(同意图片的应用)

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  4. Divbrush 网页Div css画板定位布局系统 v1.8

    Divbrush 网页Div css画板定位布局系统软件是一款专业制作DIV+CSS的切图与样式布局的网页前期设计软件. Divbrushv1.0基本上实现了可视化DIV容器布局的画板辅助功能,通过图 ...

  5. 美工效果图大小 html,六、DIV CSS实战之布局美工图分析与切图

    DIV CSS实战之布局分析与切图 美工图到DIV CSS制作成HTML中间必不可少的步骤为对美工图的分析和美工图的切图.平时大家说切图也是从这个步骤捡取的一个词语来代表css完整制作的代名词,就像d ...

  6. android的文本框内容居中显示图片,DIV+CSS中让布局居中_背景图片居中_文字内容居中...

    在DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而 1.首先介绍使用css属性让整体布局的居中: 设置对象的父级内容居中,这里一个页面的为父级是什么呢?我们可以想象整个页面 ...

  7. 后端开发工程师的DIV+CSS两栏布局入门

    padding 导致 width 扩大 如果对一个元素同时指定了 width 和 padding, 那么它实际的宽度是 padding-left + padding-right + width, 所以 ...

  8. div css 登录页面布局,DIV+CSS页面布局

    页面布局设计 一.三行模式或三列模式 特点:把整个页面水平.垂直分成三个区域. 三行模式:将页面分成头部.主体及页脚三部分 三列模式:将页面分成左.中.右三个部分 在CSS文件里: 1.三行模式代码 ...

  9. Div+CSS教程----DivCSS布局绝对定位和浮动

    在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...

最新文章

  1. IoT勒索软件会演化为劫持软件
  2. linux java字符集编码_Java字符集编码
  3. zookeeper -- 第四章 zookeeper watcher讲解
  4. php 面向对象 教程,PHP学习笔记之面向对象设计_PHP教程
  5. [vue] vue的:class和:style有几种表示方式?
  6. Linux学习笔记 --服务器优化
  7. 命中注定码农路[一. 重新开始]
  8. centos7 安装mysql8_CentOS 下 MySQL 8.0 安装部署,超详细!
  9. java 反射技术实例,什么是反射技术?Java中最常用的反射技术实例
  10. python是什么 自学-初学 Python 者自学 Anaconda 的正确姿势是什么?
  11. lenovo电脑_办公笔记本电脑有哪些值得推荐?
  12. echart 地图 某个地区_使用echarts实现自定义区域地图
  13. 华为光猫虚拟服务器,高兴得要哭了!!!!研究了N天,终于把我的华为 光猫救回来了...
  14. java 用word模板打标签,并插入图片 动态生成word
  15. 基于粒子群算法的微电网优化调度应用研究(六、总结与展望)
  16. 网络创业者之家:普通人想要获得“第一桶金”,要记住这3点
  17. 固液分离机市场现状及未来发展趋势
  18. 关于NSDateFormatter年份计算超前问题
  19. 使用任务计划实现宽带pppoe断线自动连接 - Windows
  20. Android最常用命令-Adb

热门文章

  1. 协议圣经(二) RTP组播音视频技巧
  2. USB HID学习:MFC检测USB拔插事件
  3. 初识openwrt(上)
  4. 【Clickhouse】ClickHouse 内部架构介绍
  5. 【clickhouse】ClickHouse之DBA运维宝典
  6. 【Flink】Flink 写入 MySQL主键冲突 默认Upsert策略
  7. 80-450-024-原理-索引-索引练习
  8. Elasticsearch 节点磁盘使用率过高,导致ES集群索引无副本
  9. 【Kafka】kafka Current offset xxx for partition xxx out range
  10. 【Java】Synchronized解析以及多种用法