圣杯布局和双飞翼布局分别是怎样的,有何区别
Admin 2022-06-27 群英技术资讯 336 次浏览
这两个种三行布局效果是一样的,实现的效果如上图示所示,其特点为:
(ps:我这里是在content中添加了一个overflow: hidden,形成一个BFC区域来解决这个问题的,感兴趣的小伙伴可以自行了解,当然你不这样做设置content的高度就行啦)
*{ margin: 0; padding: 0; } body{ min-width: 600px; } #header,#footer{ height: 50px; width: 100%; background: grey; } #middle,#left,#right{ float: left; } #content{ overflow: hidden; } #left,#right{ width: 200px; height: 200px; background: pink; } #middle{ width: 100%; height: 200px; background: yellowgreen; }
我们发现现在的页面是这样子的,那这怎么回事呢?
答案很简单,left,right,middle本来应该是在一条直线上的,但是content的宽度不够,就把left,right两个盒子挤下来啦。
那现在我们分别来看看这两种布局接下来解决这个问的方法吧:
我们先给content设置一个padding:0 200px,将左右两边各腾出200px宽度。
接下来我们只需要将left,right,两个盒子放在两个区域就行啦。
最后分别给left,left设置margin属性调整位置。
#content{ overflow: hidden; padding: 0 200px; } #left{ margin-left:-100% ; } #right{ margin-left: -200px;
我们再来看一下效果
当当当,见证奇迹的时候到啦~
那我们看看双飞翼布局是怎么解决这个问题的呢。来往下看
双飞翼布局是在middle下添加了一个middle-inner盒子,将middle的内容放在这个盒子里面(这有什么用呢?不着急咱先往下看)。
我们和圣杯布局中一样也给float,left设置margin值调整位置。
但是此布局就不需要给left,right设置定位啦。
#left{ float: left; margin-left: -100%; } #right{ float: left; margin-left: -200px; } .middle-inner{ padding: 0 200px; }
这时我们发现middle中的内容不见了,此时我们之前在midlle里面添加的midlle-inner盒子就派上用场啦,此时只需要给这个盒子设置一个margin:0 200px,那么我们的内容是不是来到中间展示了呢。
.middle-inner{ margin: 0 200px; }
看效果
和我们预期的一样,大厂面试题不过如此嘛,收工收工!!!!
最后我们来总结一下,双飞翼布局其实和圣杯布局的精髓是一样的,都是通过设置负margin来实现元素的排布。
下面给一下完整代码:
圣杯布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrap"> <div id="header">header</div> <div id="content"> <div id="middle"> middle </div> <div id="left">left</div> <div id="right">right</div> </div> <div id="footer">footer</div> </div> </body> </html>
*{ margin: 0; padding: 0; } body{ min-width: 600px; } #header,#footer{ height: 50px; width: 100%; background: grey; } #middle,#left,#right{ float: left; } #content{ overflow: hidden; padding: 0 200px; } #left,#right{ width: 200px; height: 200px; background: pink; } #middle{ width: 100%; height: 200px; background: yellowgreen; } #left{ margin-left:-100% ; position: relative; left:-200px; } #right{ margin-left: -200px; position: relative; left:200px; }
双飞翼布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrap"> <div id="header">header</div> <div id="content"> <div id="middle"> <div class="middle-inner"> middle </div> </div> <div id="left">left</div> <div id="right">right</div> </div> <div id="footer">footer</div> </div> </body> </html>
*{ margin: 0; padding: 0; } .wrap{ min-width: 600px; } #header,#footer{ height: 50px; width: 100%; background:grey; } #left,#right{ width: 200px; height: 200px; background: green; } #middle{ background: pink; width: 100%; float: left; height:200px; } #content{ overflow: hidden; } #left{ float: left; margin-left: -100%; } #right{ float: left; margin-left: -200px; } .middle-inner{ margin: 0 200px; }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章我们来了解CSS内嵌样式的相关内容,css内嵌样式是将css写在网页源文件的头部,利用style标签将css样式代码包围的样式。接下来我们详细的看看CSS内嵌样式有什么特点。
这篇文章主要介绍了Canvas多边形绘制的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
其中伪类和伪元素(伪对象)的根本区别在于:它们是否创造了新的元素。伪元素/伪对象:不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存
在使用表单提交数据的时候,为了减少用户的一些操作,使用选择框是一个好主意。本章给大家介绍html如何实现获取选择框信息
在div CSS布局中,如果是遇到连续的字母或者数字在div、p、h2等盒子里排成一排显示,那么是不会随着盒子的宽带而自动换行的,因此我们需要css样式来实现自动换行。我们知道不同浏览器对于CSS样式的兼容性是不同的,这篇文章就探讨一下在Firefox浏览器如何实现C自动换行。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008