前端工程师面试第二弹——布局

曾经的面试中，布局都是问的比较多的，不过最近面试的几个公司，涉及到的都是js的问题相对多一些，我想大概是因为，最近框架用的越来越多，js的基础也就越来越重要，可能如果js水平欠缺的话，很难去掌握好一门框架，也就很难适应最近的前端开发工作。

一栏固定，一栏自适应

1.float

### css
*{
    margin: 0;
    padding: 0;
}
.left{
    background-color: yellow;
    float: left;
    width: 300px;
    height: 300px;
}
.right{
    margin-left: 300px;
    background-color: red;
    height: 300px;
}
### html
<div>
    <div class="left">左边部分</div>
    <div class="right">右边部分</div>
</div>

2.flex布局

### css
*{
    margin: 0;
    padding: 0;
}
.all{
    width: 100%;
    height: 100px;
    display: flex;
    //下面的内容可以看实际情况添加，在不加的情况下已经可以实现
    flex-direction: row;//主轴方向，即项目的排列方向
    align-items: center;//交叉轴上如何对齐
    border: 1px solid #c3c3c3;
}
.left {
    flex-basis: 100px;//分配剩余空间前这个项目占据的大小，比如我们要求左边固定宽度为100px，所以此时的flex-basis为100px
    -webkit-flex-basis: 100px; /* Safari 6.1+ */
    background-color: red;
    height: 100%;//这个也可以暂时不写
}
.right {
    background-color: blue;
    height: 100%;//这个可以暂时不写
    flex-grow: 1;//项目的放大比例，因为是1，而且只有它自己，所以这个项目会独占剩余空间
}
### html
<div class="all">
    <div class="left">左边部分</div>
    <div class="right">右边部分</div>
</div>

## 三栏布局(这个好像看了某个网站挺多的，但是忘记贴链接了，，，)

1.float+margin

使用左右两栏使用float属性，中间栏使用margin属性进行撑开。⚠️midlle是放在div中的最后的，而不是中间位置。

### CSS
.left{
    height: 600px;
    width: 300px;
    background-color: red;
    float: left;
    text-align: center;
    line-height: 600px;
    color: #fff;
}
.right{
    width: 300px;
    height: 600px;
    background-color: yellow;
    float: right;
    line-height: 600px;
    text-align: center;
    color: #eee;
}
.middle{
    margin-left: 330px;
    margin-right: 330px;
    background-color: green;
    line-height: 600px;
    text-align: center;
    color: #eee;
}
### HTML
<div>
    <div class="left">左边部分</div>
    <div class="right">右边部分</div>
    <div class="middle">中间部分</div>
</div>

• 优点：我觉得是容易理解吧，很容易从两栏布局联想到这边的三栏布局。

• 缺点：1. 当浏览器宽度慢慢减小时，中间宽度也在慢慢减小直到减为0，当浏览器宽度小于左右两边宽度之和时，右侧栏会被挤下去；2. html的结构不正确

  2.position+margin

  使用position定位实现，即左右两栏使用position进行定位，中间栏使用margin进行定位

  ### css
  .left{
      height: 600px;
      width: 300px;
      background-color: red;
      position: absolute;
      /*top: 0;*/
      /*left: 0;*/
      text-align: center;
      line-height: 600px;
      color: #fff;
  }
  .middle{
      margin: 0 330px;
      background-color: green;
      line-height: 600px;
      text-align: center;
      color: #eee;
  }
  .right{
      width: 300px;
      height: 600px;
      background-color: yellow;
      position: absolute;
      /*top: 0;
      right: 0;*/
      line-height: 600px;
      text-align: center;
      color: #eee;
  }
  ### html
  <div>
      <div class="left">左边部分</div>
      <div class="middle">中间部分</div>
      <div class="right">右边部分</div>
  </div>

• 优点：html结构正常

• 缺点：当父元素有内外边距时，会导致中间栏的位置出现偏差
• 其中左边部分的left和top值只不过是为了去掉左边和上边的空白部分，但是右边的top值不设置的话，右边部分会处在左边部分和中间部分的下面的文档流中，如果不设置right为0的话，那么它会覆盖左边部分。

• 另外我们可以通过设置top值来使他们三个都在同一条水平线上。

  3.flex布局

  ### css
  .all{
      display: flex;
  }
  .left{
      height: 600px;
      width: 300px;
      background-color: red;
      text-align: center;
      line-height: 600px;
      color: #fff;
  }
  .middle{
      width: 100%;
      background-color: green;
      line-height: 600px;
      text-align: center;
      color: #eee;
  }
  .right{
      width: 300px;
      height: 600px;
      background-color: yellow;
      line-height: 600px;
      text-align: center;
      color: #eee;
  }
  ### html
  <div class="all">
      <div class="left">左边部分</div>
      <div class="middle">中间部分中间部分中间部分</div>
      <div class="right">右边部分</div>
  </div>

• 除了兼容性，一般没有太大的缺陷

• 其中midlle部分的100%的作用是让其铺满除开左右部分的剩余部分宽度，但是如果不设置这个宽度的话，那么中间部分的宽度为内容能撑开的宽度。

• 我们可以根据需要再设置其他边距之类的样式。

  4.圣杯布局+float

  将middle的宽度设置为100%，然后将其float设置为left，其中的main块设置margin属性，然后左边栏设置float为left，之后设置margin为-100%，右栏也设置为float：left，之后margin-left为自身大小。

  ### css
  .all{
      overflow: hidden;  //清除浮动
  }
  .middle{
      width: 100%;
      float: left;
  }
  .middle .main{
      margin: 0 220px;
      height: 300px;//此处设置高度可以使三个平齐
      background-color: red;
  }
  .left{
      width: 200px;
      height: 300px;
      float: left;
      background-color: green;
      margin-left: -100%;
  }
  .right{
      width: 200px;
      height: 300px;
      float: left;
      background-color: yellow;
      margin-left: -200px;
  }
  ### html
  <div class="all">
      <div class="middle"><div class="main">中间部分</div></div>
      <div class="left">左边部分</div>
      <div class="right">右边部分</div>
  </div>

• 缺点：1. 结构不正确 2. 多了一层标签