css 中有关 display:table 相关属性的解释

发表于 更新于 分类于 本文字数： 331 阅读时长 ≈ 1 分钟

display:table 相关属性

属性特性

  • table 此元素会作为块级表格来显示（类似 ），表格前后带有换行符
  • table-row-group 此元素会作为一个或多个行的分组来显示（类似
  • table-header-group 此元素会作为一个或多个行的分组来显示（类似
  • table-footer-group 此元素会作为一个或多个行的分组来显示（类似
  • table-row 此元素会作为一个表格行显示（类似
  • table-column-group 此元素会作为一个或多个列的分组来显示（类似
  • table-column 此元素会作为一个单元格列显示（类似
  • table-cell 此元素会作为一个表格单元格显示（类似
    • 和 ）
  • table-caption 此元素会作为一个表格标题显示（类似
    • ）

    display: table-cell

    属性特性

    display:table-cell 属性指让标签元素以表格单元格的形式呈现，类似于 td 标签。但是 IE6/7 不支持。table-cell 同样会被其他一些 CSS 属性破坏，例如 float, position:absolute。设置了 display:table-cell 的元素对宽度高度敏感，对 margin 值无反应，响应 padding 属性，基本上就是活脱脱的一个 td 标签元素了。

    应用

    1， 实现行内效果
    2， 等高布局
    3， 垂直居中

    。）。）。）。）。）。）