(布局)题目: 假设高度为100px,请写出三栏布局,左侧300

1.浮动布局

 <section class="layout float">
    <style>
      .layout.float .left-center-right .left{
        float: left;
        width: 300px;
        background: green;
      }
      .layout.float .left-center-right .right{
        float: right;
        width: 300px;
        background: blue;
      }
      .layout.float .left-center-right .center{
        background: red;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">浮动布局</div>
    </article>
  </section>

2.绝对定位布局

  <!-- 定位布局 -->
  <section class="layout position">
    <style>
      .layout.position .left-center-right div{
        position: absolute;
      }
      .layout.position .left{
        width: 300px;
        left: 0;
        background: green;
      }
      .layout.position .center{
        left: 300px;
        right: 300px;
        background: red;
      }
      .layout.position .right{
        right: 0;
        width: 300px;
        background: blue;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">绝对定位</div>
      <div class="right"></div>
    </article>
  </section>

3.flex布局

  <!-- flex布局 -->
  <section class="layout flex" style="margin-top: 120px;">
    <style>
      .layout.flex .left-center-right{
        display: flex;
      }
      .layout.flex .left{
        width: 300px;
        background: green;
      }
      .layout.flex .center{
        flex: 1;
        background: red;
      }
      .layout.flex .right{
        width: 300px;
        background: blue;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">flex布局</div>
      <div class="right"></div>
    </article>
  </section>

4.表格布局

  <!-- 表格布局 -->
  <section class="layout table">
    <style>
      .layout.table .left-center-right{
        display: table;
        width: 100%;
        height: 100px;
      }
      .layout.table .left-center-right >div{
        display: table-cell;
      }
      .layout.table .left{
        width: 300px;
        background: green;
      }
      .layout.table .center{
        background: red;
      }
      .layout.table .right{
        background: blue;
        width: 300px;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">表格布局</div>
      <div class="right"></div>
    </article>
  </section>

5.grid布局

  <!-- grid布局 -->
  <section class="layout grid">
    <style>
      .layout.grid .left-center-right{
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
      }
      .layout.grid .left{
        background: green;
      }
      .layout.grid .center{
        background: red;
      }
      .layout.grid .right{
        background: blue;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">grid布局</div>
      <div class="right"></div>
    </article>
  </section>

追问1: 中间自适应的部分超出容器高度会怎么样?

1.float

float.png

2.绝对定位

绝对定位.png

3.flex

flex.png

4.table布局

[图片上传中...(grid.png-80c3a7-1548504974991-0)]

5.grid布局

grid.png

追问2: 解释原因?

• 浮动元素会脱离文档流,但是会占位. 当高度超出时,就会出现上述效果.
• 绝对定位元素会脱离文档流,当高度超出容器时,该元素会自己补充高度,对其他元素无影响.
• flex布局当高度超出时,会影响其他元素一起补充高度.因为align-items默认取值为stretch.即所有的item会和最高的item一样高.
• table布局和flex布局效果类似
• grid布局当高度超出时,不会影响其他元素,但是他的背景高度不会增加补充,而是超出的字体内容向下补充.因为已经设置了行的高度为100px.