怪異ケースモデル、弾性ケースモデル
1068 ワード
標準ボックスモデル:content+(padding+border+margin)*2
怪異箱モデル:conten+margin*2//conentはpaddingとborderに含まれています(doctypeを解析しない場合に発生します)
フレキシブルボックスモデル:従来のボックスモデルに比べて.このモデルは,適応した弾性流レイアウトと適応したフォントから容易に作成できる.
怪異箱モデル: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;
}
1
2
3