稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~
事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果是一样的,差别在于其实现的思想。
圣杯布局的出现是来自于a list part上的一篇文章In Search of the Holy Grail。比起双飞翼布局,它的起源不是源于对页面的形象表达。在西方,圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED,可以说是灵感来自于页面渲染。一起来看看这两种布局的区别在哪:
一、双飞翼布局
可以看到,我们在main里面又加了一个内容层。如果知道盒子模型,就知道我们是不能直接给main添加margin属性,因为我们已经设置了width:100%,再设置margin的话就会超过窗口的宽度,所以我们再创造一个内容层,将所有要显示的内容放到main-content中,给main-content设置margin就可以了。