三栏布局只知道圣杯、双飞翼，最终评级是……F

时间 2019-11-08

标签布局知道双飞最终评级繁體版

原文原文链接

三栏布局，面试与工做中的常见布局。分左中右三部分，其中左右宽度已知，中间宽度自适应。
根据不一样的DOM顺序与CSS处理，这里写下了五类布局方式。html

1、浮动布局

1 圣杯布局

L：“我问你，你就是个人Master吗？”
……面试

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        padding:0px 200px;
        overflow: hidden;
      }
      .left, .center, .right {
        position:relative;
        min-height:160px;
      }
      .left{
        width:200px;
        margin-left:-100%;
        float:left;
        left:-200px;
        background-color:deepskyblue;
      }
      .center {
        width:100%;
        float:left;
        background-color:gray;
      }
      .right {
        width:200px;
        margin-left:-100%;
        float:right;
        right:-200px;
        background-color:pink;
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="center">
        <h1>圣杯布局</h1>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </section>
  </body>
</html>

2 双飞翼布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        overflow: hidden;
      }
      .left, .center, .right {
        min-height:160px;
      }
      .left{
        width:200px;
        margin-left:-100%;
        float:left;
        background-color:deepskyblue;
      }
      .center {
        width:100%;
        float:left;
        background-color:gray;
      }
      .right {
        width:200px;
        margin-left:-100%;
        float:right;
        background-color:pink;
      }
      .center-inner {
        margin:0px 200px
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="center">
        <div class="center-inner">
          <h1>双飞翼布局</h1>
        </div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </section>
  </body>
</html>

3 浮动布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Float布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .left,
      .center,
      .right {
        min-height: 160px;
      }
      .left {
        width: 200px;
        float: left;
        background-color: deepskyblue;
      }
      .center {
        background-color: gray;
      }
      .right {
        width: 200px;
        float: right;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h1>中间部分的内容</h1>
      </div>
    </section>
  </body>
</html>

这样会有个问题，就是center高度大于两侧的时候，会duang的蔓延到两侧，像这样：
布局

相应的，为了让页面成为咱们须要的样子，引入了两个解决方案。flex

BFC修正
spa

L：“我问你，你这里是否是有什么问题？(指着脑壳)”
……
BFC(Block Fromatting Context),直译就是块级格式化上下文。
先知其然吧，概念差很少又须要整理一篇文章。用了它，内外部元素渲染互不影响，center就不会蔓延到两侧了。
具体代码：code

.center{
  overflow:hidden;
  background-color: gray;
}

Margin修正htm

.center{
  margin: 0 200px;
  background-color: gray;
}

2、Flex布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Flex布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        width:100%;
        display:flex;
        min-height:160px;
      }
      .left{
        flex-basis: 200px;
        background-color:deepskyblue;
      }
      .center {
        flex-grow:1;
        background-color:gray;
      }
      .right {
        flex-basis: 200px;
        background-color:pink;
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="left"></div>
      <div class="center">
        <h1>Flex布局</h1>
      </div>
      <div class="right"></div>
    </section>
  </body>
</html>

3、绝对定位布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>绝对定位布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        position:relative;
        overflow: hidden;
      }
      .left, .center, .right {
        min-height:160px;
      }
      .left{
        position:absolute;
        width:200px;
        top:0px;
        left:0px;
        background-color:deepskyblue;
      }
      .center {
        margin:0px 200px;
        background-color:gray;
      }
      .right {
        position:absolute;
        width:200px;
        top:0px;
        right:0px;
        background-color:pink;
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="left"></div>
      <div class="center">
        <h1>绝对定位布局</h1>
      </div>
      <div class="right"></div>
    </section>
  </body>
</html>

4、Table布局

如今不多人用的table标签blog

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Table布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        width:100%;
      }
      .left{
        width:200px;
        background-color:deepskyblue;
      }
      .center {
        background-color:gray;
      }
      .right {
        width:200px;
        background-color:pink;
      }
    </style>
  </head>
  <body>
    <table class="content" border="0" cellspacing="0" cellpadding="0" height="160px">
      <tr>
        <td class="left"></td>
        <td class="center">Table布局</td>
        <td class="right"></td>
      </tr>
    </table>
  </body>
</html>

display:table-cell与上面一个意思图片

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>table-cell</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        display:table;
        width:100%;
        height:160px;
      }
      .left, .center, .right {
        display:table-cell;
      }
      .left{
        width:200px;
        background-color:deepskyblue;
      }
      .center {
        background-color:gray;
      }
      .right {
        width:200px;
        background-color:pink;
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="left"></div>
      <div class="center">
        <h1>table-cell</h1>
      </div>
      <div class="right"></div>
    </section>
  </body>
</html>

5、网格布局

若是说flex用于一维，grid就是用于二维的。ci

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网格布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        display: grid;
        width: 100%;
        grid-template-rows: 160px;
        grid-template-columns: 200px 1fr 200px;
      }
      .left{
        background-color:deepskyblue;
      }
      .center {
        background-color:gray;
      }
      .right {
        background-color:pink;
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="left"></div>
      <div class="center">
        <h1>网格布局</h1>
      </div>
      <div class="right"></div>
    </section>
  </body>
</html>

好了，后续再来讲一下各自的优缺点。

你一赞，我一赞，开开心心去吃饭~🖊💗