面试之手写圣杯布局和双飞翼布局

其实二者最终实现的效果是一样的，只不过实现上有所不同，一个是利用内padding，而另一个则是容器内孩子的外margin

二者均实现优先加载中间内容，两边懒加载，最终效果就是left middle right这样布局，左右两边可以指定宽度，中间宽度自适应，整体的高度由三者中最高者决定。

圣杯布局

首先准备一个容器，容器内依次摆放middle，left，right，容器应设置overflow:hidden;为什么这样做呢？主要是三者均是float:left;所以会脱离文档流，为了避免这种情况的出现。

其次设置左右宽高，中间高度，容器左右内边距

然后设置左右左外边距

最后通过相对定位摆好位置

代码如下：

html部分

css部分

效果如下：

双飞翼布局

不用设置相对定位，但需要设置孩子外边距给撑开

代码如下：

html部分：

css部分：

效果如下：