[css]双飞翼布局和圣杯布局学习

来源

“圣杯布局的出现是来自于 alistapart 上的一篇文章In Search of the Holy Grail。比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。”

优势

一起来看看淘宝的头部实现：

双飞翼布局

“通过缩放页面就可以发现，随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子固定不变，即使页面宽度变小，也不影响我们的浏览。”
【感悟】我做页面的时候，左右布局经常用一边固定，另一边用绝对定位，左右卡死。但是当屏幕变大或变小的时候就容易比例失调。毕竟一边是自适应，另一边永远是这么大。所以根据情况应该考虑百分比的左右布局。比如如果是有导航条的左右布局（或上下布局），肯定是让导航条固定宽度（或高度）。但是如果是图文展示性质的左右布局，根据大致比例就可以用百分比的形式。
左右布局（上下布局）别人是怎么做的？真应该去了解一下。

应用场景

一定要注意他们的应用场景。都是两边固定宽度，才可以使用。如果不是固定宽度，比如以后可能会添加，删除按钮则不可以使用。因为维护起来太麻烦，总是得去改宽度。

收获

双飞翼布局更适合用于三列布局这种场景，对于普通的左右布局，或者上下布局，应该用position:absolute会更加方便一些。

参考文献

1. 圣杯布局和双飞翼布局（前端面试必看）

布局值得进一步学习的

1. 在 CSS 中，用 float 和 position 的区别是什么？——DRY原则
2. 浅析圣杯布局和双飞翼布局(个人认为分析得最清楚的)