display:inline-table

此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。display:inline-table 可以使文字和表格在同一行显示

display:table

table:指定对象作为块元素级的表格,类同于html标签<table>。 它定义了一个块级盒子.

display:table-caption

table-caption:这个元素的作用的就像表格的表头<caption> 一样。

display:table-header-group

table-header-group这些元素的行为像<thead>HTML元素。

disply:table-row-group

table-row-group:这个元素的行为像<tbody>HTML元素

display:table-row

table-row这个元素的行为像<tr>HTML元素。

display:table-cell

table-cell,这个元素的作用就像<td> <th>一样。

dispaly:table-column-group

table-column-group:这个元素的行为像<colgroup>HTML元素。

display:table-column

table-column,这个元素的行为像<col>HTML元素。

display:table-footer-group

table-footer-group,这个元素的作用就像<tfoot> 一样.

div布局与table布局的优缺点

1:速度和加载方式方面的区别
div 的加载方式是即读即加载,遇到

没有遇到

的时候一样加载 div 中的内容,读多少加载多少;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则必须面对这些问题。

display 表格模型值的更多相关文章

  1. 主题模型值LDA

    主题模型(topic model)是以非监督学习的方式对文集的隐含语义结构(latent semantic structure)进行聚类(clustering)的统计模型. 主题模型主要被用于自然语言 ...

  2. 【数学建模】数模day13-灰色系统理论I-灰色关联与GM(1,1)预测

    接下来学习灰色系统理论. 0. 什么是灰色系统? 部分信息已知而部分信息未知的系统,我们称之为灰色系统.相应的,知道全部信息的叫白色系统,完全未知的叫黑色系统. 为什么采用灰色系统理论? 在给定信息不 ...

  3. 《ASP.NET MVC高级编程(4版)》读书笔记(5)表单和HTML辅助方法

    5.1 表单使用 5.1.1 action 和 method 特性 <form action="/Home/Index">     <input name=&qu ...

  4. 数据注解和验证 – ASP.NET MVC 4 系列

           不仅在客户端浏览器中需要执行验证逻辑,在服务器端也需要执行.客户端验证能即时给出一个错误反馈(阻止请求发送至服务器),是时下 Web 应用程序所期望的特性.服务器端验证,主要是因为来自网 ...

  5. 表单和 HTML 辅助方法– ASP.NET MVC 4 系列

           这里有一个疑问,诸如在文本编辑器中输入 HTML 元素如此简单的任务,也需要任何帮助吗?的确,输入标签名称是很容易的事,但是确保 HTML 页面链接中的 URL 指向正确的位置.表单元素 ...

  6. ASP.NET MVC 3 之表单和 HTML 辅助方法(摘抄)

    ——选自<ASP.NET MVC3 高级编程(第5章) 孙远帅 译> 第5章 表单和HTML辅助方法 本章内容简介: * 理解表单 * 如何利用HTML辅助方法 * 编辑和输入的辅助方法 ...

  7. JSF标签大全详解

    1. JSF入门 藉由以下的几个主题,可以大致了解JSF的轮廓与特性,我们来看看网页设计人员与应用程序设计人员各负责什么. 1.1简介JSF Web应用程序的开发与传统的单机程序开发在本质上存在着太多 ...

  8. CSS3学习系列之盒样式(一)

    盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...

  9. 基于 HTML5 WebGL 的 3D SCADA 主站系统

    这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 的模拟一般需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算是我对这次项 ...

随机推荐

  1. thymeleaf 拼接 超链接

    <dd><a th:href="@{/get/{id}(id=${user.id})}">基本资料</a></dd>

  2. java里的一些特别值得注意的地方

    return 语句的作用:1.返回值 2.结束某个方法的执行. 局部变量必需要初始化,全局变量系统会默认初始值: 整型数赋默认值为0. 浮点数赋默认值为0.0,boolean赋默认值为false. c ...

  3. [Webpack + React] Import CSS Modules with TypeScript and webpack

    If you try to use CSS Modules in TypeScript the same way you would use them in JavaScript, with webp ...

  4. 实现浮点数的四舍五入RoundOff,保留几位小数

    直接上代码,非常简短 double myRound(double d,int n) { d = d*pow(10,n); d += 0.5; d = (long)d; d = d/pow(10,n); ...

  5. openSessionInView的使用原理及性能分析

    看到好多项目中用到了openSessionInView,这种做法无非是开发方便,能够在JSP页面中操作数据库层方面的业务. 下边说下openSessionInView的使用方法及性能问题. 使用: 1 ...

  6. [转]GLTF-3D图形界的JPEG

    GLTF简介 1.glTF(GL TransmissionFormat),即图形语言交换格式,它是一种3D内容的格式标准,由Khronos Group管理(Khronos Group还管理着OpenG ...

  7. 将一个文件夹纳入library或者移除remove

    https://support.microsoft.com/en-us/help/4026298/windows-show-libraries-in-file-explorer To show lib ...

  8. Kali linux 2016.2(Rolling)中metasploit的搜集特定地址的邮件地址

    不多说,直接上干货! 使用search_email_collector搜集特定地址的邮件地址 search_email_collector 要求提供一个邮箱后缀,通过多个搜索引擎的查询结果分析使用此后 ...

  9. iOS菜鸟成长笔记(2)——网易彩票练习

    距离上一篇<第一个iOS应用>已经有一个多月了,今天来和大家一起学习和分享一下一个小练习<网易彩票> 首先我们向storyboard中拖入一个TabBarController和 ...

  10. PostgreSQL Replication之第九章 与pgpool一起工作(3)

    9.3 理解pgpool的架构 一旦我们安装了pgpool,是时候来讨论软件架构了.从一个用户的角度看,pgpool就像一个 正常的数据库服务器,您可以想连接任何其他服务器一样连接到它: pgpool ...