标准盒子模型：content+(padding+border+margin)*2
怪异盒子模型：conten+margin*2 //conent已经包括来padding和border（当不对doctype进行解析时会出现这种）
弹性盒子模型：相比传统的盒子模型。该模型能很轻松的创造出自适应的弹性流动布局和自适应的字体
.parent{ width: 900px; height: 1200px; background: #CCCCCC; display: -webkit-box; //声明弹性盒子模型 -webkit-box-orient: horizontal; //排列方式为水平 (vertical,inline-axis,block-axis) /*-webkit-box-direction: reverse; */ //表示里面的盒子是逆向排列的 -webkit-box-pack: center; //对富余的空间进行分配 start end justify(每个子容器平分) -webkit-box-align: center; //子容器向哪对齐 start end stretch base-line } .c1{ /*-webkit-box-ordinal-group: 2;*/ //自由的排列盒子 进行分组 -webkit-box-flex:8; //盒子的弹性8/(8+1+1) background: red; } .c2{ /*-webkit-box-ordinal-group: 1;*/ -webkit-box-flex: 1; background: green; } .c3{ /*-webkit-box-ordinal-group: 4;*/ -webkit-box-flex: 1; background:blue; } <div class="parent"> <div class="c1">1</div> <div class="c2">2</div> <div class="c3">3</div> </div>