【页面布局】页面布局自适应解决方案

 

假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。

分析：浮动、绝对定位、flexbox、表格布局（display:table-cell）、网格布局（grid）。

延伸：这五种方案各自有什么优点和缺点？如果把假设高度已知去掉考虑纵向，左右高度自适应，以上方案哪个还可以适用？这五种方案的兼容性如何，业务中具体问题最优方案是哪个？

<!-- 浮动解决方案 -->
  <section class="layout float">
    <style media="screen">
    .layout.float .left{
      float:left;
      width:300px;
      background: red;
    }
    .layout.float .right{
      float:right;
      width:300px;
      background: blue;
    }
    .layout.float .center{
      background: yellow;
    }
    </style>
    <article class="left-right-center">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h1>浮动解决方案</h1>
        1、这是三栏布局中间部分        
        2、这是三栏布局中间部分
      </div>
    </article>
  </section>

 缺点：清除浮动，浮动后脱离文档流，如果处理不好会带来很多问题。

优点：兼容性比较好，注意处理好和浮动元素周边元素的关系问题。

去掉高度该方案不可用。

<!-- 绝对定位解决方案 -->
  <section class="layout absolute">
    <style>
      .layout.absolute .left-center-right>div{
        position:absolute;
      }
      .layout.absolute .left{
        left:0;
        width:300px;
        background: red;
      }
      .layout.absolute .center{
        left:300px;
        right:300px;
        background: yellow;
      }
      .layout.absolute .right{
        right:0;
        width:300px;
        background: blue;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>绝对定位解决方案</h2>
        1、这是三栏布局绝对定位中间部分
        2、这是三栏布局绝对定位中间部分
      </div>
      <div class="right"></div>
    </article>
  </section>

缺点：脱离文档流，可使用性差

优点：快捷 

去掉高度该方案不可用。

        原因：当高度超出左侧浮动元素，超出的内容左侧无遮挡，内容就出现在左侧。

        解决方案：创建BFC。

<!-- flexbox解决方案 -->
  <section class="layout flexbox">
    <style>
      .layout.flexbox{
        margin-top: 140px;
      }
      .layout.flexbox .left-center-right{
        display: flex;
      }
      .layout.flexbox .left{
        width: 300px;
        background: red;
      }
      .layout.flexbox .center{
        flex: 1;
        background: yellow;
      }
      .layout.flexbox .right{
        width: 300px;
        background: blue;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>flexbox解决方案</h2>
        1、这是三栏布局flexbox中间部分
        2、这是三栏布局flexbox中间部分
      </div>
      <div class="right"></div>
    </article>
  </section>

css3布局方式 完美 

去掉高度该方案仍可用。

<!-- 表格布局解决方案 -->
  <section class="layout table">
    <style>
      .layout.table .left-center-right{
        width: 100%;
        display: table;
        height: 100px;
      }
      .layout.table .left-center-right>div{
        display: table-cell;
      }
      .layout.table .left{
        width: 300px;
        background: red;
      }
      .layout.table .center{
        background: yellow;
      }
      .layout.table .right{
        width: 300px;
        background: blue;
      }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>表格布局</h2>
            1、这是三栏布局表格布局中间部分
            2、这是三栏布局表格布局中间部分
        </div>
        <div class="right"></div>         
    </article>
  </section>

缺点：当其中一个单元格高度超出、另外两个高度也会自动增加 

优点：兼容性很好，可以兼容IE8以下浏览器

去掉高度该方案仍可用。

<!-- 网格布局解决方案 -->
  <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: red;
      }
      .layout.grid .center{
        background: yellow;
      }
      .layout.grid .right{
        background: blue;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>网格布局解决方案</h2>
        1、这是三栏布局网格布局中间部分
        2、这是三栏布局网格布局中间部分
      </div>
      <div class="right"></div>
    </article>
  </section>

优点： 代码简洁

去掉高度该方案不可用。

 

总结：语义化掌握到位、页面布局理解深刻、CSS基础知识扎实、思维灵活且积极上进、代码书写规范

 

页面布局的变通

三栏布局

• 左右宽度固定，中间自适应
• 上下高度固定，中间自适应
  两栏布局
• 左宽度固定，右自适应
• 右宽度固定，左自适应
• 上高度固定，下自适应
• 下高度固定，上自适应