简析圣杯布局和双飞翼布局

三列布局是一种很常见的布局方式，我之前做这种布局经常用的是定位或者浮动来实现。现在讲讲圣杯布局和双飞翼布局。


双飞翼布局

我现在讲讲圣杯布局和双飞翼布局是如何实现的呢？

圣杯布局

附上代码

html部分


html部分


css部分

圣杯布局所使用的原理是利用大盒子的padding将中间的内容往里面挤，其实这也是用到了怪异盒子的知识点，pading-left和padding-right各往里挤，这样左右两部分的盒子就有了空间，然后就可以使用margin来将他们移上去。

双飞翼布局


html部分


css部分

双飞翼布局的核心思想是设置四个盒子，将主体盒子，左边和右边部分的盒子都进行浮动，这样他们就脱离了文档流。然后中间的盒子会吧左边和右边的盒子给挤下去，然后在给中间的盒子套一个盒子，使用margin和把盒子给缩进来。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1赞 92
  • 圣杯布局和双飞翼布局
    在前端布局中，事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应...
    风铭阅读 5,346评论 1赞 6
  • 圣杯布局和双飞翼布局（前端面试必看）
    稍微了解前端的人都知道，圣杯布局和双飞翼布局是前端面试时必问的问题，因为它既能体现你懂HTML结构又能体现出你对Ｄ...
    森西悠然阅读 77,678评论 46赞 173
  • CSS经典布局整理
    三栏式布局 涉及浮动和清除浮动，主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局，两边的盒子...
    紫电倚青霜阅读 6,891评论 0赞 6
  • 再见，不见
    来到了曾经回忆过的地方，第一感觉却是那么的陌生，见不见面 那时候你说不管怎么样，还是要见一面的，就当最后的道别也好...
    楮桭阅读 2,849评论 0赞 1