圣杯布局和双飞翼布局的区别的总结

圣杯布局

圣杯布局就是三栏布局,其中左右两栏固定宽度,中间部分自适应

主要步骤:

在html中,中间的块在最前面,后面紧跟左边的块和右边的块

三者均设置float:left,中间块设置width:100%,此时中间块在一行,两个固定宽度的块在一行。

左边块设置margin-left:100%,右边块设置margin-left: -width,此时左右块位于中间块的两边,但是其覆盖了中间块的两侧的一部分内容。

设置外层容器padding:0 rightwidth 0 leftwidth,为左右两边腾出空白位置。

设置左右块position:relative,且左块left: -width,且右块right: -width,使左右快分别向左和右偏移,从而占据了空白位置。

双飞翼布局

双飞翼布局与圣杯布局达成的效果类似,只是实现方法有所差别而已。区别在于双飞翼给中间块套了一个容器,通过设置该容器内部的中间块margin属性从而使中间块两侧的内容不被左右块遮挡。

你可能感兴趣的:(圣杯布局和双飞翼布局的区别的总结)