经典的圣杯布局，和双飞翼布局， 考点是什么

圣杯布局和双飞翼布局， 主要解决三列布局， 中间列需要优先渲染的问题， 主要运用的是margin属性和float熟悉， 主要考察margin和float的熟悉程度

margin 的left， top， right， bottom设置负值的分别作用

• margin-left 和 margin-top 会使元素向左和向上移动

• margin-right 和 margin-bottom 会使自身在布局中所占的位置减少， 使右边的元素或下边的元素向自身移动

圣杯布局

.column{
  float: left;
}
main{
  padding: 0 200px;
}
.center{
  width: 100%;
  background: greenyellow;
}
.left,.right{
  width: 200px;
  background: yellow;
}
<main class="clearfix">
    <div class="column center">center</div>
    <div class="column left">left</div>
    <div class="column right">right</div>
</main>

.left{
  margin-left: -100%;
}

margin-left -100% 为什么能达到这样的效果呢？ 100% 是父级的宽度 就会向左移动， 父级的宽度，

为什么它能移动到上面， 而我们有时候都是直接一直向左移动， 移到看不见的地方？

float 使他们处在了同一行， 只是center把一行都占据了， 把其他两个都挤下去了， 所以当负margin的时候会出现回去， 例如 diable:flex; flex-wrap:wrap也是会出现同样的效果

.left{
    position: relative;
    left: -200px; // 这个就不说了， 我相信大家知道
    margin-left: -100%;
}
.right{
  margin-right: -200px;
}

margin-right: -200px; 想相当于时自身的宽度消失（非真实消失，而是相对其他元素而言，认为它是无宽度的）， 使自己能回到第一行， 处在center的旁边

双飞翼布局 就不说了， 理解了margin和float的组合用法相信双飞翼布局也是不在话下