table row设置cell的html,css中display设置为table、table-row、table-cell后的作用及其注意点...

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

html:

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等属性。