CSS display:table属性用法解析
本节和大家重点讨论一下CSS display:table的使用，当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值，CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。
CSS display:table属性
当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：CSS display:table、 CSS display:table-row和CSS display:table-cell，它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。
网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。
使用CSS表格
CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，“CSS display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。
在深入了解这种方法之前，让我们先来写份HTML文档实例：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns=http://www.w3.org/1999/xhtml lang="en-US"> <head> ?HTMLheadcontent… </head> <body> <dividdivid="wrapper"> <dividdivid="header"></div> <dividdivid="main"> <dividdivid="nav"> ?navigationcolumncontent… </div> <dividdivid="extras"> ?newsheadlinescolumncontent… </div> <dividdivid="content"> ?mainarticlecontent… </div> </div> </div> </body> </html>
这份HTML源代码满足了内容呈现方面的要求。先是导航栏，然后是附加栏，最后是内容栏。我们同样需要将以下CSS样式应用上去：
#main{
display:table;
border-collapse:collapse;
}
#nav{
display:table-cell;
width:180px;
background-color:#e7dbcd;
}
#extras{
display:table-cell;
width:180px;
padding-left:10px;
border-right:1pxdotted#d7ad7b;
}
#content{
display:table-cell;
width:380px;
padding-left:10px;
}
相关推荐
hellowzm 2020-07-19
drdrsky 2020-06-04
XuNeely 2020-04-22
lyg0 2020-03-07
tianzyc 2020-02-17
沈宫新 2020-01-02
impress 2020-01-02
89510194 2019-12-31
wwwxuewen 2019-12-19
hlfsunshine 2013-09-02
lcyangcss 2019-11-10
zhangpan 2019-11-09
liushi 2007-11-13
超哥Blog 2007-09-30
libowenhit 2007-09-27
宿舍 2019-10-21
zyhui 2014-11-13
怀抱清风 2017-03-06