今天看到一条属性display: table; 可以在div等标签中实现表格效果;
display: table=>相当于“table”标签;
display: table-row=>相当于“tr”标签;
display: table-cell=>相当于“td”标签
一.父元素宽度固定,让子元素平分宽度,用普通的方法设置%的时候是很烦的
这里使用display: table;表格属性来解决:
.parent{display: table;width: 800px;}
.son{display: table-cell;
二.块级子元素垂直居中
.parent{display: table;width: 800px;}
.son{display: table-cell;}
三.display:table使用时应注意的一些问题
1.display: table时 对应元素的padding会失效;
2.display: table-row时 对应元素的padding、margin会失效;
3..display: table-cell时 对应元素的margin会失效;
4.displaty: table-cell不要与float,position: absolute;等改变布局的属性同时使用,作用会被破坏
四.display:table;其他值
1.table 此元素会作为块级表单显示=》
2.table-row-group 此元素会作为一个或多个行的分组显示=》tbody
3.table-heightder-group 此元素会作为一个或多个行的分组显示=》thead
3.table-footer-grounp 此元素会作为一个或多个行的分组显示=》tfoot
4.table-column-grounp 此元素会作为一个或多个列的分组显示=》colgroup
5.table-column 此元素会作为一个单元格列显示=>col
6.table-caption 此元素会作为一个表格标题显示=》caption