display:box;是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
设置父容器样式display:box;
.father{
margin: 0 auto;
width: 1000px;
height: 200px;
border:1px solid red;
/* 设置父元素的显示方式 */
display: -webkit-box; /* Chrome ,Opera, Safari */
display: -moz-box; /* 火狐 */
display: box;
}
1.box-flex属性(让子容器针对父容器的宽度按一定规则划分)
划分规则：子容器A宽度 =（父容器宽度- 固定宽度的子容器宽度）* 子容器A比例 / 子容器比例之和
.son1{
width: 200px;
background: yellow;
}
.son2{
height: 100px;
/* box-flex */
-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2;
background: red;
}
.son3{
-webkit-box-flex: 3;
-moz-box-flex: 3;
box-flex: 3;
background: green;
}
2.box-orient属性（用来确定父容器里子容器的排列方式：水平：horizontal（默认），垂直：vertical，继承：inherit）
.father{
margin: 0 auto;
width: 1000px;
height: 200px;
border:1px solid red;
/* 设置父元素的显示方式 */
display: -webkit-box; /* Chrome ,Opera, Safari */
display: -moz-box; /* 火狐 */
display: box;
/* box-orient */
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
3.box-direction属性（确定父容器里子容器排列顺序：文档顺序：normal ，反向： reverse ，继承： inherit）
.father{
width: 100%;
height: 100px;
/* 设置父元素的显示方式 */
display: -webkit-box;
display: -moz-box;
display: box;
-moz-box-direction:reverse; /* 火狐 */
-webkit-box-direction:reverse;/* Safari、Opera 以及 Chrome 支持 */
box-direction:reverse;
}
4.box-align（表示父容器里面子容器的垂直对齐方式：居顶对齐：start ，居底对齐：end ，居中对齐：center ，拉伸到与父容器登高：stretch ）
box-pack（表示父容器里面子容器的水平对齐方式：居顶对齐：start ，居底对齐：end ，居中对齐：center ,水平等分父容器宽度（firefox与opera暂时不支持，只有safari、chrome支持）：justify）
.father{
margin: 0 auto;
width: 1000px;
height: 200px;
border:1px solid red;
/* 设置父元素的显示方式 */
display: -webkit-box; /* Chrome ,Opera, Safari */
display: -moz-box; /* 火狐 */
display: box;
/* box-pack */
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
/* box-align */
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}
css布局属性display 属性值：
none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。（CSS2）
table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）