怪异盒子模型、弹性盒子模型

标准盒子模型：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>