【面试题解】你能用多少种方式实现两栏布局,三栏布局,圣杯布局,双飞翼布局？？

一尾流莺

发布于 2022-12-10 11:44:54

8170

文章被收录于专栏：一尾流莺学前端一尾流莺学前端

本系列面试题旨在学会相关知识点，从而轻松应对面试题的各种形式，本文讲解了前端常用的几种布局方式，包括 两栏布局，三栏布局，圣杯布局，双飞翼布局。

感觉有帮助的小伙伴请点赞👍鼓励一下~

两栏布局

左侧宽度固定。
右侧自适应。

浮动法

左栏做浮动。
右栏添加 margin-left 。

<style>
  body {
    background: gray;
    margin: 0;
    padding: 0;
    height: 100vh;
  }
  .left {
    float: left;
    width: 200px;
    height: 100%;
    background: yellow;
  }
  .right {
    margin-left: 200px;
    height: 100%;
    background: green;
  }
  .left,
  .right {
    text-align: center;
    line-height: 100vh;
  }
</style>
  <body>
    <div class="left">this is left</div>
    <div class="right">this is right</div>
  </body>

margin负值法

<style>
  body {
    background: gray;
    margin: 0;
    padding: 0;
    height: 100vh;
  }
  .left {
    width: 200px;
    height: 100%;
    background-color: blue;
  }
  .right {
    width: 100%;
    height: 100%;
    margin: -100vh 0 0 100px;
    background-color: green;
  }
</style>
  <body>
    <div class="left">this is left</div>
    <div class="right">this is right</div>
  </body>

绝对定位法

<style>
  body {
    background: gray;
    margin: 0;
    padding: 0;
    height: 100vh;
  }
  .left {
    width: 200px;
    height: 100%;
    background-color: blue;
    position: absolute;
  }
  .right {
    height: 100%;
    margin-left: 200px;
    background-color: green;
  }
</style>
  <body>
    <div class="left">this is left</div>
    <div class="right">this is right</div>
  </body>

flex

<style>
  body {
    background: gray;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
  }
  .left {
    width: 200px;
    height: 100%;
    background-color: blue;
  }
  .right {
    flex: 1;
    height: 100%;
    background-color: green;
  }
</style>
  <body>
    <div class="left">this is left</div>
    <div class="right">this is right</div>
  </body>

grid

<style>
  body {
    background: gray;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 200px auto;
  }
  .left {
    background-color: blue;
  }
  .right {
    background-color: green;
  }
</style>
  <body>
    <div class="left">this is left</div>
    <div class="right">this is right</div>
  </body>

三栏布局

三栏布局就不单独说了，因为圣杯布局中间的部分就是三栏布局。

圣杯布局

头部(header)和尾部(footer)各自占领屏幕所有宽度。
中间的部分(container)是一个三栏布局。
三栏布局两侧宽度固定，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。

浮动法

这种布局最重要的是要让中间内容最先加载和渲染，所以把 middle 放在 left 和 right 的前面；
先定义好 header 和 footer 的样式，使之横向撑满；
三列的左右两列分别定宽 200px 和 150px，中间部分设置 100% 撑满;
把 container 中的三列设为浮动 float: left；
设置 container 部分的内边距，让其居中显示，padding: 0 150px 0 200px；
清除 footer 部分的浮动，clear: both；
接下来设置 left 的 margin-left: -100%;，让 left 回到上一行最左侧;
这时 left 并没有在最左侧，给它设置过相对定位，所以通过 left: -200px; 把 left 拉回最左侧；
同样的，对于 right 区域，设置 margin-right: -100% 把 right 拉回第一行就行了。

<style>
  body {
    margin: 0;
    padding: 0;
    height: 100vh;
  }
  .header {
    background: gray;
  }
  .footer {
    clear: both;
    background: gray;
  }
  .container {
    padding: 0 150px 0 200px;
  }
  .container .middle {
    width: 100%;
    background: blue;
  }
  .container .left {
    width: 200px;
    background: yellow;
    margin-left: -100%;
    position: relative;
    left: -200px;
  }
  .container .right {
    margin-right: -100%;
    width: 150px;
    background: green;
  }
  .container .float {
    float: left;
  }
  .footer,
  .header,
  .left,
  .middle,
  .right {
    text-align: center;
  }
</style>
  <body>
    <div class="header">this is header</div>
    <div class="container">
      <div class="middle float">middle</div>
      <div class="left float">left</div>
      <div class="right float">right</div>
    </div>
    <div class="footer">this is footer</div>
  </body>

绝对定位法

这种布局同样可以让让中间内容最先加载和渲染，所以把 middle 放在 left 和 right 的前面；
先定义好 header 和 footer 的样式，使之横向撑满；
给 container 设置相对定位，让子元素根据他进行定位；
设置 container 部分的内边距，让其居中显示，padding: 0 150px 0 200px；
让 left 根据左上定位，right 根据右上定位即可。

<style>
  body {
    margin: 0;
    padding: 0;
    height: 100vh;
  }
  .header {
    background: gray;
  }
  .footer {
    background: gray;
  }
  .container {
    position: relative;
    padding: 0 150px 0 200px;
  }
  .container .middle {
    background: blue;
  }
  .container .left {
    width: 200px;
    background: yellow;
    position: absolute;
    top: 0;
    left: 0;
  }
  .container .right {
    width: 150px;
    background: green;
    position: absolute;
    top: 0;
    right: 0;
  }
</style>
  <body>
    <div class="header">this is header</div>
    <div class="container">
      <div class="middle">middle</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    <div class="footer">this is footer</div>
  </body>

flex

这种布局要按照 left ，middle， right 的顺序书写 html；
先定义好 header 和 footer 的样式，使之横向撑满；
给 container 设置 display: flex，让其成为弹性盒；
给 middle 设置 flex: auto 就行了。

<style>
  body {
    margin: 0;
    padding: 0;
    height: 100vh;
  }
  .header {
    background: gray;
  }
  .footer {
    background: gray;
  }
  .container {
    display: flex;
  }
  .container .middle {
    background: blue;
    flex: auto;
  }
  .container .left {
    width: 200px;
    background: yellow;

  }
  .container .right {
    width: 150px;
    background: green;

  }
</style>
  <body>
    <div class="header">this is header</div>
    <div class="container">
      <div class="left">left</div>
      <div class="middle">middle</div>
      <div class="right">right</div>
    </div>
    <div class="footer">this is footer</div>
  </body>

grid

这种布局也要按照 left ，middle， right 的顺序书写 html；
先定义好 header 和 footer 的样式，使之横向撑满；
给 container 设置 display: grid 以及grid-template-columns: 200px 1fr 150px 就可以了；

<style>
  body {
    margin: 0;
    padding: 0;
    height: 100vh;
  }
  .header {
    background: gray;
  }
  .footer {
    background: gray;
  }
  .container {
    display: grid;
    grid-template-columns: 200px 1fr 150px;
  }
  .container .middle {
    background: blue;
  }
  .container .left {
    width: 200px;
    background: yellow;

  }
  .container .right {
    width: 150px;
    background: green;

  }
</style>
  <body>
    <div class="header">this is header</div>
    <div class="container">
      <div class="left">left</div>
      <div class="middle">middle</div>
      <div class="right">right</div>
    </div>
    <div class="footer">this is footer</div>
  </body>

双飞翼布局

双飞翼布局和圣杯布局很类似，不过是在 middle 的盒子里又插入一个盒子，通过调整内部盒子的 margin 值，而非父容器的 padding 值，实现中间栏自适应，内容写到内部的盒子中。

这种布局最重要的是要让中间内容最先加载和渲染，所以把 middle 放在 left 和 right 的前面；
在 middle 中添加一个子元素 middle-wrap；
先定义好 header 和 footer 的样式，使之横向撑满；
三列的左右两列分别定宽 200px 和 150px，中间部分设置 100% 撑满;
把 container 中的三列设为浮动 float: left；
设置 middle-wrap 部分的外边距，让其居中显示，margin: 0 150px 0 200px；
清除 footer 部分的浮动，clear: both；
接下来设置 left 的 margin-left: -100%;，让 left 回到上一行最左侧;
同样的，对于 right 区域，设置 margin-left: -150px 把 right 拉回第一行就行了。

<style>
  body {
    margin: 0;
    padding: 0;
    height: 100vh;
    min-width: 500px;
  }
  .header {
    background: gray;
  }
  .footer {
    clear: both;
    background: gray;
  }
  .container .middle {
    background: blue;
    width: 100%;
  }
  .container .middle .middle-wrap {
    margin: 0 150px 0 200px;
  }
  .container .left {
    width: 200px;
    background: yellow;
    margin-left: -100%;
  }
  .container .right {
    width: 150px;
    background: green;
    margin-left: -150px;
  }
  .float {
    float: left
  }
</style>
  <body>
    <div class="header">this is header</div>
    <div class="container">
      <div class="middle float">
        <div class="middle-wrap">
          middle
        </div>
      </div>
      <div class="left float">left</div>
      <div class="right float">right</div>
    </div>
    <div class="footer">this is footer</div>
  </body>

其它知识点

圣杯布局由于设置了相对定位，所以当 left 原来的位置和 right 的位置产生重叠时，由于浮动的原因一行放不下就会换行，当页面小于最小宽度时布局就会乱掉。不所以需要设置给页面一个 min-width > LeftWidth * 2 + RightWidth。

双飞翼布局会一直随着浏览器可视区域宽度减小从而不断挤压中间部分宽度。所以需要设置给页面一个 min-width > LeftWidth + RightWidth。

为啥 flex 和 gird 这么大行其道，却还要知道如何用 float 布局呢？其实前面已经提到过了，float 进行布局的是中间内容先进行加载和渲染，而 flex 和 gird 只能按照左中右的顺序。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-11-08，如有侵权请联系 cloudcommunity@tencent.com 删除

html