不会div+css盒子的布局

是那种div+ cssd 盒子代码布局
一个关于7个盒子代码的布局
上面三个盒子，下面三个盒子
最下面一个大盒子
谢谢大神

我这是用块元素包含的行内块元素，你说的这个布局很容易实现，以至于实现方式很多。可以去菜鸟教程看看吧，新人去那学可能容易点，内容也浅，懂点基础了就会布简单的局了

<style>
.line{
margin: 10px auto;
text-align: center;
font-size: 14px;
line-height: 40px;
}
.inline3{
display: inline-block;
width: 30%;
border: 1px solid #dadada;
margin: 10px;
}
.last{
border: 1px solid #dadada;
}
<style>
<div class="line">
    <div class="inline3">第一个盒子</div>
    <div class="inline3">第二个盒子</div>
    <div class="inline3">第三个盒子</div>
</div>
<div class="line">
    <div class="inline3">第四个盒子</div>
    <div class="inline3">第五个盒子</div>
    <div class="inline3">第六个盒子</div>
</div>
<div class="line last">
    最后的大盒子
</div>

我用的是flex布局

<div class="box">
  <div class="box-all box-1">
    <div class="box-1-1">
    </div>
    <div class="box-1-1 box-1-2">
    </div>
    <div class="box-1-1 box-1-3">
    </div>
  </div>
  <div class="box-all box-1">
    <div class="box-1-1 box-2-1">
    </div>
    <div class="box-1-1 box-2-2">
    </div>
    <div class="box-1-1 box-2-3">
    </div>
  </div>
  <div class=box-all>
  </div>
</div>

.box {
  height: 400px;
  width: 800px;
  background-color: #dedede;
  display: flex;
  flex-direction: column;
}
.box-all {
  background-color: #aadd99;
  flex: 0.5;
}
.box-1 {
  background-color: #ddaa88;
  display: flex;
}
.box-1-1 {
  background-color: #aaaaee;
  flex: 0.3333
}
.box-1-2 {
  background-color: #adeaee;
}
.box-1-3 {
  background-color: #addaee;
}
.box-2-1 {
  background-color: #ff66ee;
}
.box-2-2 {
  background-color: #ad66ee;
}
.box-2-3 {
  background-color: #ddffff;
}