双飞翼和圣杯布局

简介

布局是写一个网页的开始，也是前端的起步，必须要掌握好一些常见的布局，如圣杯布局和双飞翼布局。Flex就不讲了，用flex很简单，下面讲传统的float。

双飞翼布局

直接上代码：

<template>
  <div id="app">
    <div id="header"></div>
    <div id="contain">
      <div id="center">
        能正常显示在中间！！
      </div>
    </div>
    <div id="left"></div>
    <div id="right"></div>

    <div id="footer"></div>
  </div>
</template>

<script>
  import bubble from "./asset/compents/bubble";
  export default {
    name: 'App'
  }

</script>

<style>
  #app{
    min-width: 500px;
  }
  #header{
    width:100%;
    height:40px;
    background: yellow;
  }
  #contain{
    width: 100%;
    float:left;
  }
  #center{
    height: 500px;
    margin-left: 140px;
    margin-right: 240px;
    background: green;
  }
  #left{
    width:140px;
    height: 500px;
    background: blue;
    margin-left: -100%;
    float: left;
  }
  #right{
    width:240px;
    height: 500px;
    background: red;
    margin-left: -240px;
    float: left;
  }
  #footer{
    width:100%;
    height: 40px;
    background: black;
    clear:both;
  }
</style>

要点

使用float进行布局，关键就是要用好margin，取负值时盒子会进行“偏移”，所以这种经典设计的原理也很就很好理解了。

header和footer就不用提了，主要是中间的三栏布局。

三栏均设置浮动，先写中间盒子，用width:100%撑开，然后左栏偏移100%强行嵌入（覆盖）到中间盒子的左边，右栏偏移自身尺寸强行嵌入（覆盖）到中间盒子的右边。这样三栏目就成形了。

但是中间栏有个问题，文字会从最左开始，刚好被挡住了，所以中间栏加一个一个盒子，设置左右边距不被两侧挡住就行。

圣杯布局

圣杯布局的效果和上面一样。方法略有不同。代码如下：

<template>
  <div id="app">
    <div id="header"></div>
    <div id="container">
      <div id="center">
        能正常显示在中间！！
      </div>
      <div id="left"></div>
      <div id="right"></div>
    </div>
    <div id="footer"></div>
  </div>
</template>

<script>
  import bubble from "./asset/compents/bubble";
  export default {
    name: 'App'
  }

</script>

<style>
  #app{
    min-width: 500px;
  }
  #header {
    width: 100%;
    height: 40px;
    background: yellow;
  }
  #footer{
    width:100%;
    height: 40px;
    background: black;
    clear:both;
  }
  #container{
    padding-left:140px;
    padding-right:240px;
  }
  #center{
    width:100%;
    background: green;
    height: 500px;
    float:left;
  }
  #left{
    width:140px;
    height: 500px;
    background: blue;
    margin-left: -100%;
    position: relative;
    left: -140px;
    float:left;
  }
  #right{
    width:240px;
    height: 500px;
    background: right;
    float:left;
    background: red;
    margin-left: -240px;
    position: relative;
    left: 240px;
  }
</style>

要点

与双飞翼类似，此时用padding撑开位置给左右，而不是直接嵌入。不过要借用relative就行位移。

List item