圣杯布局和双飞翼布局

[hnscdg]

• 产生的历史背景，解决了什么问题

• 有哪些优缺点

• 这这个过程中引出了哪些新的问题

[hnscdg]

在CSS布局中有一种经典的布局是圣杯布局。

呐~就是上面图片这样的，左右两边有个耳朵，中间呢是盛水的容器。

在页面上的显示效果就是左右两边是个固定的宽度，中间的容器自适应；即根据页面大小的变化而变化。

在开发中常用来做功能区域的划分。左边是一个导航菜单，右边是广告或者文章的列表，中间是主要的内容显示区域。

[hnscdg]

• 负边距问题

• 相对定位和绝对定位

相对定位：该元素相对于自己原有位置，偏移一定距离。相对的是自己。

绝对定位：该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要是设置了position属性。从最近的父元素开始找，直到找到body位置为止。

[hnscdg]

在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多，那么有没其他方法更加简洁方便呢？

在淘宝UED探讨下，增加多一个p就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。

[hnscdg]

英文原文出处：https://alistapart.com/article/holygrail

[hnscdg]

双飞翼布局