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

html:

<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屬性生效作用。