双飞翼布局

最近在刷面试题，复习了一些css相关的内容，第一次听到双飞翼和圣杯布局这两个个概念（我之前css是怎么学的？？？）

双飞翼布局

双飞翼是float布局和负边距结合使用实现的一个两端固定宽度，中间自适应的效果
且中间

这个盒子里left和right的宽度是固定的，不会随着父盒子的改变而改变的，而中间蓝色的这款是可以随着父盒子的宽度的改变和改变的。

上代码

html

  

    

      
i am main
    
    
i am left
    
i am right
  

双飞翼布局还有一个特点就是main优先加载主要内容main部分，因为浏览器会按照html文档中的顺序渲染，所以只需要把中间的main盒子写在前边就可以了（main盒子里面嵌套main-inner我们等下再讲）

---

style

首先我们给最外层container 一个width：100%，一个固定的高度300px
然后内部三个子盒子main、left、right都添加一个float：left
给main的宽度设置为100%，left的宽度和right的宽度设置一个具体的值

结果是这样的

由于父盒子的宽度不够，left和right被挤到父盒子下面了，这个时候，是时候让负边距展现真正的技术了
left盒子添加一个margin-left:-100%(让他向右移动一个父盒子那么宽)
right盒子添加一个margin-left:-300px（让他向右移动-300px）

效果如下

嗯！就是这么神奇，具体是为什么呢？可以移步了解下负边距
接下来我们要让中间主体部分的内容居中显示，不然他左边和右边的内容会被left和right这两个盒子挡住。
所以这就是main-inner这个盒子的作用了，我们给这个盒子一个左右边距，让他远离左右盒子，然后把主体内容写在这个mian-inner盒子里面就可以了

效果如下

这就是双飞翼布局了

完整css