H5:常用css3属性box-sizing，display:box

box-sizing属性：允许您以特定的方式定义匹配某个区域的特定元素。

box-sizing有三个取值：content-box|border-box|inherit;默认情况下值为content-box

content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box:为元素设定的宽度和高度决定了元素的边框盒。为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit:规定应从父元素继承 box-sizing 属性的值。

兼容性：

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的 -moz-box-sizing 属性。

box-sizing:border-box;

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box; /* Safari */

display:box，box-flex属性是css3新添加的盒子模型属性，可以实现按比例布局，比如垂直等高、水平均分。

浏览器兼容性：

firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。

display:-moz-box;

display:-webkit-box;

display:box;

子元素：

-moz-box-flex:1;

-webkit-box-flex:1;

box-flex:1;

注意：

必须给父容器定义css属性display:box其子容器才可以进行划分,如果定了display:box则该容器定义为了内联元素，如果其中一个子容器或多个子容器设置了固定宽度,设置固定宽度的子容器的宽度是固定的，其他元素的宽度是父元素宽度减去设置了宽度的子容器的宽度，然后再按照比例划分：

例如：

.wrap{

    width:300px;

    height:100px;

    display:-moz-box;

    display:-webkit-box;

    display:box;

}

.one{  

     -moz-box-flex:1;

     -webkit-box-flex:1;

     box-flex:1;

}

.two{

    width:200px;

 }

box-orient属性：用来确定父容器里子容器的排列方式，是水平还是垂直

取值有：

horizontal：可将子容器水平排列

vertical：可将子容器垂直排列

inline-axis ：可将子容器水平排列

block-axis ：可将子容器垂直排列

inherit ： inherit属性则是让子容器继承父容器的相关属性。

.wrap{

width:600px;

height:200px;

display:-moz-box;

display:-webkit-box;

display:box;

-moz-box-orient:horizontal;

-webkit-box-orient:horizontal;

box-orient:horizontal;//水平排列

}

box-direction属性：box-direction用来确定父容器里的子容器排列顺序

取值：normal | reverse | inherit  

normal ：normal是默认值，按照HTML文档里结构的先后顺序依次展示

reverse ：可以反转排列顺序

inherit：继承父元素的设置

box-align：表示父容器里面子容器的垂直对齐方式  

取值：

start ：居顶对齐

end：居底对齐

center ：居中对齐

baseline：

stretch：

box-pack：父容器里面子容器的水平对齐方式

取值有：start | end | center | justify

获取更多的文章，欢迎关注微信公众号