当前位置: 首页 > Web前端 > HTML

说说面试中经常测试的两个经典布局——圣杯和双飞翼

时间:2023-04-03 00:44:50 HTML

圣杯和双飞翼布局介绍最近偶然碰到写这种布局,一直没有总结。正好借此机会总结一下,同时加强自己的理解。博客链接:http://www.xluos.com/index.ph...圣杯布局和双飞翼布局是面试中经常出现的经典三栏式布局。两种布局效果基本一致,两侧两列宽度固定,中间列宽度自适应。在HTML结构中,中间列在最前面,保证中间先渲染,提高性能(因为这两种布局比较老,我觉得这种性能优化效果在现代浏览器中不是很大),以及兼容性很好。两种布局前半部分的实现方式相同,后半部分的实现各有优缺点。下面将简要介绍两者的区别。Demo与代码圣杯布局Demo,代码双飞翼布局Demo,代码二布局的实现首先,由于是三栏布局,我们需要三个div

圣杯布局
main
left
right
给main设置width:100%,让它一直填满窗口,这样就有自适应的效果了。然后我们给它添加一些样式区分,效果如下:为了形成一行三列的布局,给三个方块都添加floatingfloat:left;(注意浮动被清除,因为浮动会导致父元素的高度塌陷)然后我们要将三个方块拉成一行,这里就需要用到负边距的技巧了。left应该放在main的左边,设置margin-left:-100%,因为margin的百分比是相对于父元素的,所以需要一整行的宽度来补偿这个margin的值,所以left可以转到main的左边。然后让right走到main的右边,只需要将right的宽度设置为margin-left的负值,比如margin-left:-200px;,就是让main和right的宽度重叠,因为浮动已设置,因此right将转到右侧的main。我们来看一下效果:好像我们已经成功实现了效果?先不要急着把两个方块弄成透明,然后在中间加点内容看看。我们发现,当内容增加的时候,因为三个方块都设置为浮动,文档流分开了,两边的两个定宽的列会挡住我们的内容。所以想要不挡住两边的内容,就需要中间的一栏,为两边腾出空间。我们可以认为padding和margin都可以用来腾出空间。这两个属性就是圣杯布局双飞翼布局的区别。不过双飞翼布局还是需要稍微修改一下HTML结构,后面会讲到。1.圣杯布局——使用padding属性第一步:给三个元素的父元素添加padding属性腾出位置第二步:由于腾出位置后会有空格,所以使用position:relative;attributetomove左右两列,这样才不会被挡住。但是,这种布局有一个问题:有一个最小宽度,当页面小于最小宽度时,布局就会乱七八糟。所以最好为body设置一个min-width。这个min-width一定不用测试,怎么算呢?它是左宽*2+右宽。至于为什么,简单的说:“因为设置了相对定位,当left的原位置和right的位置重合时,由于浮动的原因,一条线放不下就会换行。”。所以布局很乱。采用双飞翼布局可以避免这个问题。2、双飞翼布局——使用margin属性首先,我们需要稍微改变一下HTML结构:
双飞翼布局
mainleftright
footer
如您所见,我们在main中添加了另一个内容层。了解盒模型的就知道我们不能直接给main加上margin属性,因为我们设置了width:100%,如果再设置margin会超出窗口的宽度,所以我们创建另一个content层,用来显示所有main-content的内容,放在main-content中,并为main-content设置margin。因为父元素没有变化,所以只需要设置margin:0200px0200px;主要内容的属性来达到效果。两种布局的区别在于,圣杯布局是中间的柱子为两侧腾出空间。双飞翼的布局是中间栏目不变,内容部分空出两边。参考https://www.cnblogs.com/lovem...https://www.zhihu.com/questio...