css两栏布局、圣杯布局、双飞翼布局

最近几个月一直用vue在写手机端的项目，主要写业务逻辑，在js方面投入的时间和精力也比较多。这两天写页面明显感觉css布局方面的知识有不足，所以复习一下布局方法。

两栏布局

• 1、浮动

 .box1 .left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .box1 .right {
    margin-left: 100px;
    height: 100px;
    background-color: green;
  }

<div class="box1">
  <div class="left"></div>
  <div class="right">两列自适应</div>
</div>

• 2、定位

.box1{
    position: relative;
    width: 100%;
    height: 100px;
  }
  .box1 .left{
    position: absolute;
    width: 100px;
    height: 100%;
    background-color: red;
  }

  .box1 .right{
    margin-left: 100px;
    width: 100%;
    height: 100%;
    background-color: green;
  }

<div class="box1">
  <div class="left"></div>
  <div class="right"></div>
</div>

• 3、flex

  .box1{
    display: flex;
    height: 100px;
  }
  .box1 .left{
    width: 100px;
    height: 100%;
    background-color: red;
  }

  .box1 .right{
    flex:1;
    height: 100%;
    background-color: green;
  }

<div class="box1">
  <div class="left"></div>
  <div class="right"></div>
</div>

圣杯布局和双飞翼布局目的是我们希望先加载的是中间的部分，然后再开始加载 left 和 right 两个相对来说不是很重要的东西。

圣杯布局

圣杯布局给最外面加padding, 让 padding-left 和 padding-right 的数值等于left 和 right 的宽度，然后利用相对定位把他们再移动在两旁。

.box{
    padding:  0 100px;/* 留出左右的距离*/
    height: 100px;
  }
  .box .middle {
    float: left;
    width: 100%;
    height: 100%;
    background-color: yellow;
  }
  .box .left {
    float: left;
    width: 100px;
    margin-left: -100%;
    background-color: red;
    position: relative;
    left: -100px;/*往左拉*/
    height: 100%;
  }
  .box .right {
    float: left;
    width: 100px;
    margin-left: -100px;
    background-color: green;
    position: relative;
    right: -100px;
    height:100%;
  }

<div class="box">
  <!--注意顺序-->
  <div class="middle">middle</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

双飞翼布局

.box {
    position: relative;
    height: 100px;
  }
  .middle-wrap {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
  }
  .middle-wrap .middle {
    height: 100%;
    margin: 0 100px; /*留出距离*/
    background-color: yellow;
  }
  .left {
    float: left;
    width: 100px;
    margin-left: -100%;
    height: 100%;
    background-color: red;
  }
  .right {
    float: left;
    width: 100px;
    height: 100%;
    margin-left: -100px;
    background-color: green;
  }

<div class="box">
  <div class="middle-wrap">
    <div class="middle"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

原文地址：https://www.cnblogs.com/10manongit/p/12222860.html