当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table、table-row和table-cell,(ie6.7不支持) 。它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击。最终,使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。给HTML元素指定与表格相关的display属性值,使得它们像表格元素那样渲染。以下是这些可用的display属性值: table 使该元素按table样式渲染 table-row 使该元素按tr样式渲染 table-cell 使该元素按td样式渲染 table-row-group 使该元素按tbody样式渲染 table-header-group 使该元素按thead样式渲染table-footer-group 使该元素按tfoot样式渲染 table-caption 使该元素按ion样式渲染 table-column 使该元素按col样式渲染 table-column-group 使该元素按colgroup样式渲染 table-cell特性 对宽度高度敏感 响应padding属性 内容溢出时会自动撑开父元素
table-cell特性
对宽度高度敏感
响应padding属性
内容溢出时会自动撑开父元素
问题1:table布局有什么缺点,为什么渐渐被淘汰?
Table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间。) Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度,增加页面加载时间,增加HTTP会话数。) 在某些浏览器中Table里的文字的拷贝会出现问题 Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%) Table对对于页面布局来说,从语义上看是不正确的。 table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。
问题2:table-cell的垂直居中?
问题3:table-row的注意事项?