标签：
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）
标签：
原文地址：http://www.cnblogs.com/Imever/p/4546344.html
