CSS中display:table属性如何使用

本篇文章给大家分享的是有关CSS中display:table属性如何使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

我们提供的服务有:成都做网站、网站设计、微信公众号开发、网站优化、网站认证、聊城ssl等。为超过千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的聊城网站制作公司

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文档实例:

   ?HTMLheadcontent…     
   ?navigationcolumncontent…  
  ?newsheadlinescolumncontent…  
  ?mainarticlecontent…  
    

这份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;  }

以上就是CSS中display:table属性如何使用,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


当前文章:CSS中display:table属性如何使用
当前URL:http://scyanting.com/article/jpdsei.html

其他资讯