初学css盒子模型，对于盒子的使用不是很明白，请问这样的盒子布局怎么写？

html-css019

初学css盒子模型，对于盒子的使用不是很明白，请问这样的盒子布局怎么写？,第1张

如图所示。每一个矩形框就是一个盒子，即div包裹的元素。

布局的一般写法，从上到下，从左到右进行排版布局。

所以，先写最上面的长盒子，再写第二行最左边的，

中间的大盒子你不知道怎么弄，可以把 二、三行看成一行，一最大的最准，纵向分成三列，即

红色来进行布局，两边红色的盒子再固定宽度后，写两个盒子规定高度分成两行就行。

最下的盒子和第一行一样，写最长即可。

<style type="text/css">

body{margin:0padding:0}

.main {width:800margin:0 auto}

.left {width:200pxheight:500pxfloat:leftbackground:#ccc}

.right {width:600pxheight:500pxfloat:rightbackground:#ddd}

</style>

/*样式需要加.才起作用*/

<style>

.mbox {display:flexflex-wrap:wrapwidth:720pxmargin:0 autoborder:1px solid #888}

.box1 {flex:1 0 200pxheight:200pxmargin:30px 0 0 30pxbackground-color:#f88}

.box2 {flex:2 0 400pxheight:200pxmargin:30px 30px 0 30pxbackground-color:#8f8}

.box3 {flex:2 0 400pxheight:200pxmargin:30px 0 30px 30pxbackground-color:#88f}

.box4 {flex:1 0 200pxheight:200pxmargin:30pxbackground-color:#ff8}

</style>

<div class="mbox">

 <div class="box1">BOX1</div>

 <div class="box2">BOX2</div>

 <div class="box3">BOX3</div>

 <div class="box4">BOX4</div>

</div>