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设置会失效。【可自己测试一下】

1 .table {
2         display: table;
3         margin: 5px;
4         width: 1000px;
5         border:1px solid red;
6 
7     }
View Code

2、当设置display：table-row;时，margin和padding设置会失效。这里我进行了设置，可以看出是没有效果的。

1 .row {
2         display: table-row;
3         padding:100px;
4         margin:100px;
5     }
View Code

3、当设置display：table-cell;时，margin设置会失效。这里我进行了设置，可以看出是没有效果的。

 1 .cell {
 2         display: table-cell;
 3         padding: 10px;
 4         vertical-align: middle;/*定义行内元素垂直对齐*/
 5         height: 300px;
 6         border:1px solid green;
 7 
 8         -webkit-box-sizing: border-box;
 9         -moz-box-sizing: border-box;
10         box-sizing: border-box;
11     }
View Code

4、认识了上面的设置的作用和注意点以后，我们可以发现可以通过display:table-cell和vertical-align:middle;来进行垂直居中设置的,也是运用了cell时，vertical-align属性生效作用。

posted @ 2017-03-22 22:29  钟离野  阅读(27728)  评论(0)  编辑  收藏  举报