CSS中 display的相關屬性

IE8支持很多新的CSS display屬性值,包括與表格相關的屬性值:table、table-row和table-cell,它也是最後一款支持這些屬性值的主流瀏覽器。 
網頁元素應用上那些與表格相關的display屬性值後,能夠模仿出與表格相同的特性。

display:table=>相當於“table”標籤; 
display:table-row=>相當於“tr”標籤; 
display:table-cell=>相當於“td”標籤;


display:table佈局可以實現一些其他佈局比較難實現的場景,如下:

 

要實現這種多行文字居中顯示在一個固定大小的容器裏面,如果是其他的css佈局實現,我們常用的做法還需要用到定位,還要用到transfrom才能完成;但是用display:table佈局可以很簡單的實現;

<div>
    <span>我是簡單的兩行文字</span>
</div>
div{
    display:table;
}
span{
    diaplay:table-cell;
    vertical-align: middle;//對其方式爲middle
}

display:table 
1、table佈局除了上面3種常用的值還有以下的 
這裏寫圖片描述

2、table至少有一個display:table和display:table-cell這個其實是跟html的table一致的,那麼使用了table佈局之後就可以對應的使用一些table常用的css樣式:如border-collapse,text-align 和 vertical-align,border-spacing,caption-side,empty-cells等等;詳細的可以參考http://www.w3school.com.cn/css/css_table.asp

3、table-cell同樣會被其他一些CSS屬性破壞,例如float, position:absolute,所以,在使用display:table-cell與float:left或是position:absolute屬性儘量不用同用。

4、設置了display:table-cell的元素對寬度高度敏感,對margin值無反應,響應padding屬性,基本上就是活脫脫的一個td標籤元素了。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章