css3盒模型的属性,css3弹性盒模型属性整理

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标签

inline-table：指定对象作为内联元素级的表格。类同于html标签

table-caption：指定对象作为表格标题。类同于html标签

(CSS2)

table-cell：指定对象作为表格单元格。类同于html标签

(CSS2)

table-row：指定对象作为表格行。类同于html标签

(CSS2)

table-row-group：指定对象作为表格行组。类同于html标签

(CSS2)

table-column：指定对象作为表格列。类同于html标签

(CSS2)

table-column-group：指定对象作为表格列组显示。类同于html标签

(CSS2)

table-header-group：指定对象作为表格标题组。类同于html标签(CSS2)

table-footer-group：指定对象作为表格脚注组。类同于html标签

(CSS2)

run-in：根据上下文决定对象是内联对象还是块级对象。(CSS3)

box：将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)

inline-box：将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)

flexbox：将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)

inline-flexbox：将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)

flex：将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)

inline-flex：将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)