CSS布局带来的巨大影响:CSS display属性值
应原书编辑要求,先在文章顶部给出链接:《Everything You Know About CSS Is Wrong》http://www.sitepoint.com/books/csswrong1/ 这本书是10月发行的新书,为了避免版权纠纷,如要转载本文请保留以上链接,并遵循该 CC2.5协议。 从 digital-web 的首页上看到一个标题党《Everything You Know About CSS Is Wrong》,被雷过之后仔细看了下原文,发现了一种新的CSS布局思路(其实就是详细介绍了display:table属性)。在IE6仍是王道的时代谈这种技术为时过早,全当是练习英文翻译贴出来给大家分享下,欢迎大家指点不足之处。 —————————以下是中文翻译——————————– 当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table、table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击。最终,使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。 使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如,“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式,而不会产生因为使用了table那样的制表标签所导致的语义化问题。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 这份HTML源代码满足了内容呈现方面的要求。先是导航栏,然后是附加栏,最后是内容栏。 #main { 这种基于表格的新CSS布局方式能够正确的在IE8、Firefox、Safari和Opera(译者注:包括FF2/FF3/Google都通过了测试)中显示出来。下面这张图片是它在IE8中的样子: 我们轻松实现了三栏等高布局,而无需使用伪造背景图片之类的技巧,更不用担心定位和清除浮动的问题!
|
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |