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

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

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

两栏布局

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

11.gif

浮动法

  • 左栏做浮动。
  • 右栏添加 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)是一个三栏布局。
  • 三栏布局两侧宽度固定,中间部分自动填充整个区域。
  • 中间部分的高度是三栏中最高的区域的高度。

212.gif

浮动法

  • 这种布局最重要的是要让中间内容最先加载和渲染,所以把 middle 放在 leftright 的前面;
  • 先定义好 headerfooter 的样式,使之横向撑满;
  • 三列的左右两列分别定宽 200px150px,中间部分设置 100% 撑满;
  • container 中的三列设为浮动 float: left
  • 设置 container 部分的内边距,让其居中显示,padding: 0 150px 0 200px
  • 清除 footer 部分的浮动,clear: both
  • 接下来设置 leftmargin-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 放在 leftright 的前面;
  • 先定义好 headerfooter 的样式,使之横向撑满;
  • 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

  • 这种布局要按照 leftmiddleright 的顺序书写 html
  • 先定义好 headerfooter 的样式,使之横向撑满;
  • 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

  • 这种布局也要按照 leftmiddleright 的顺序书写 html
  • 先定义好 headerfooter 的样式,使之横向撑满;
  • 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 值,实现中间栏自适应,内容写到内部的盒子中。

image.png

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

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值