相信刚入前端的小伙伴们对圣杯布局和双飞翼布局的名称不会陌生，做为css布局中最经典的布局正是初学前端布局小伙伴的挑战，在我看来圣杯布局和双飞翼布局是一回事，只是不同人对他的不同叫法而已，这说白了就是实现三栏布局，两边盒子宽度固定，中间盒子宽度自适应，也就是有些人说的固比固布局，只是实现思想不一样而已。这种布局也是面试中常问道的问题，因为它既能体现你懂html结构又能体现出你对div+css布局的掌握。接下来就具体看看实现过程。
圣杯布局：
html结构：
css结构：
思路很简单，通过浮动让元素在一行显示，通过外边距和定位值来实现左右盒子的位置即可。
双飞翼布局：
html结构：
css结构：
和圣杯布局思路差不多，只是在中间区域多加了一个盒子，这样就不用让两侧盒子来判断定位值了。
对于这种三栏布局除了这两种经典方式外这里再提供两种方法供小伙伴们参考：
第一种：绝对定位实现
html结构：
css结构：
第二种：弹性盒模型实现
html结构：
css结构：
好了，今天关于这种常见布局的内容就先说到这里，以上方法也各有优缺点，小伙伴们可以根据代码自己操作一下看看效果更好的理解。在工作中也会常常见到这种需求，希望这篇文章对大家有所帮助。
网友评论