css中display設定為table、table-row、table-cell後的作用及其注意點

http://www.cnblogs.com/lee90/p/6602478.html

html:

1 2 3 4 5 6 7

<div class="table">     <div class="row">         <div class="cell">內容內容內容內容內容內內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>         <div class="cell">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>         <div class="cell">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>     </div> </div>

1、當設定display：table;時，table的padding設定會失效。【可自己測試一下】

.table {

        display: table;

        margin: 5px;

        width: 1000px;

        border:1px solid red;

    }

2、當設定display：table-row;時，margin和padding設定會失效。這裡我進行了設定，可以看出是沒有效果的。

.row {  
     display: table-row;      
     padding:100px;   
     margin:100px;
   }

3、當設定display：table-cell;時，margin設定會失效。這裡我進行了設定，可以看出是沒有效果的。

.cell {

        display: table-cell;

        padding: 10px;

        vertical-align: middle;/*定義行內元素垂直對齊*/

        height: 300px;

        border:1px solid green;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

    }

4、認識了上面的設定的作用和注意點以後，我們可以發現可以通過display:table-cell和vertical-align:middle;來進行垂直居中設定的,也是運用了cell時，vertical-align屬性生效作用。

設定float或position會對預設佈局造成破壞，可以考慮為之增加一個父div定義float等屬性。

本文轉自wiwi部落格51CTO部落格，原文連結http://blog.51cto.com/wiwili/1969520如需轉載請自行聯絡原作者

wiwili