CSS布局--圣杯布局和双飞翼布局

1. 圣杯布局

左右两边大小固定不变，中间宽度自适应。可以用浮动、定位以及flex这三种方式来实现！

<!--html -->
 <div class="main">
      <div class="left">左边</div>
      <div class="center">中间</div>
      <div class="right">右边</div>
 </div>

1.1 float实现

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main {
    width: 1140px;
    margin: 0 auto;
    padding: 0 210px;
    line-height: 46px;
}

.main:after {
    clear: both;
    content: " ";
    display: table;
}

.center {
    float: left;
    width: 100%;
    background-color: rgba(0, 0, 0, .1);
}

.left {
    float: left;
    width: 200px;
    margin-left: -210px;
    background: pink;
}

.right {
    float: right;
    width: 200px;
    margin-right: -210px;
    background: blue;
}

1.2 position实现

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main {
    width: 1140px;
    margin: 0 auto;
    position: relative;
    padding: 0 210px;
    line-height: 46px;
}
.center {
    width: 100%;
    background-color: rgba(0, 0, 0, .1);
}

.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    background: pink;
}

.right {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    background: blue;
}

1.3 flex实现

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main {
    width: 1140px;
    margin: 0 auto;
    line-height: 46px;
    display: flex;
}
.center {
    flex:1;
    background-color: rgba(0, 0, 0, .1);
}

.left {
    flex:0 0 100px;
    background: pink;
}

.right {
    flex:0 0 100px;
    background: blue;
}

2. 双飞翼布局

<div class="content">
    <div class="main">
        <div class="main-inner">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

* {
    box-sizing: border-box;
}

.main-inner {
    margin-left: 100px;
    margin-right: 100px;
}

.content {
    overflow: hidden;
    width: 1140px;
    margin: 0 auto;
}

.content>div {
    float: left;
}

.main {
    width: 100%;
    height: 100px;
    border: 1px solid red;
}

.left {
    width: 100px;
    margin-left: -100%;
    height: 100px;
    border: 1px solid #000;
}

.right {
    width: 100px;
    margin-left: -100px;
    height: 100px;
    border: 1px solid #000;
}

3. 圣杯布局&双飞翼布局

圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。

区别：圣杯用padding。双飞翼用在main外层多加了一个div然后改用margin。