一、display:table-cell属性简述

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了

display:table-cell属性在实际项目中的应用

我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以其他方法实现同样或是类似的效果。

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

详细介绍

display:table-cell介绍的更多相关文章

  1. [转]基于display:table的CSS布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

  2. display:table和display:table-cell的妙用

    display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜! 这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到, ...

  3. display:table的几个妙用：垂直居中、浮动……

    一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...

  4. css Table布局：基于display:table的CSS布局

    两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...

  5. display:table

    display:table的CSS声明能够让一个HTML元素和它的子节点像table元素一样.使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界.背景等样式,而不会产生因为使用了table那 ...

  6. display:table的用法

    目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出来的文件k数比用table写出来的要小 ...

  7. 使用display:table来解决一些问题

    一直有,多栏的需求,当然用table布局,很快就做完了.不怎么喜欢用table,刚开始使用display:table,但是有一条老是不能达到我的效果,那就是有一行不固定宽度的时候,就不知道怎么处理,今 ...

  8. 垂直居中display:table;

    父级元素 display:table: 子元素 display:table-cell:vertical-align:middle:

  9. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  10. display:table 水平居中

    <div style="width:auto; margin:auto;display:table"> <div style="width: 100px ...

随机推荐

  1. iOS开发-- RunLoop的基本概念与例子分析

    看了一下,上一篇貌似5个月前的

  2. Bootstrap表单

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...

  3. click 事件 arguments.callee 每次点击自动* 2

    今天在测试JQUERY(版本3.0,向下兼容3.0)时发现一个很特别的现象,代码如下: $($('button').get(4)).click(function(){ alert($(this).ht ...

  4. Unity3D 学习——入门资料整理

    感觉可以写3D游戏,还是用C#,很好玩的样子.整理最近学习资料 介绍:游戏引擎,可以用C#配置的游戏引擎.嗯,就这样.其余度娘. 安装:官网,因为现在个人版是免费的.直接官网下.干净利落. 调试插件: ...

  5. DEM数据如何生成高程点

    这次给大家介绍一个arcgis里的实用功能:通过地形数据提取高程点. 首先做好准备工作: 1.地形数据下载获取 2.软件准备 locaspace viewer:http://rj.baidu.com/ ...

  6. java封装学习

    封装:将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问.把过程和数据包围起来,对数据的访问只能通过已定义的接口. 在java中通过关键字priva ...

  7. 灵活运用 SQL SERVER FOR XML PATH

    FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...

  8. XidianOJ 1057 卡尔的技能

    题目描述 dota中的英雄卡尔的技能说明如下,他拥有3种不同的元素(冰,雷,火),每次他需要释放技能的时候,他要先选择3次元素来决定释放技能的类型(比如,他可以选择火+火+火或冰+雷+火等等),生成技 ...

  9. jQuery iframe之间相互调用

    ,子iframe内调用父类函数方法: window.parent.func(); ,子Iframe中获取父界面的元素: $("#xx", window.parent.documen ...

  10. 对 clear:both 这个样式的一些理解

    看下我今天一直研究的两个例子吧.希望对自己跟大家有帮助: 例子一: <!DOCTYPE html> <html> <head lang="en"> ...