display――table-cell属性
display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜! 当两个或者两个以上标签一起使用显示在同一行时,以前常用的是float、position进行布局,在高版本的浏览器可以使用flex、grid进行布局。无意中发现使用display:table-cell也是一个很好用的自适应布局,本文就display:table-cell做学习总结。 display:table-cell指让标签元素以表格单元格的形式呈现,使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性,IE6/7不支持(可用其他方法实现类似效果)。同样,display:table-cell属性也会被float,position:absolute等属性 破坏效果 ,应避免同时使用。 ֵ 描述 none 此元素不会被显示。 block 此元素将显示为块级元素,此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素,元素前后没有换行符。 inline-block 行内块元素。(CSS2.1 新增的值) list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 marker CSS 中有值