经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
面试必问:圣杯布局和双飞翼布局的区别_CSS教程_CSS
来源：jb51　　时间：2021/5/17 9:30:44　　对本文有异议

前言

今天给大家分享一个圣杯布局和双飞翼布局及他们之间的区别，这两个三行布局一直是一些大厂前端面试的高频考点，带你走进大厂面试题，活不多说，冲冲冲~

布局效果

在这里插入图片描述

在这里插入图片描述

这两个种三行布局效果是一样的，实现的效果如上图示所示，其特点为：

  • header和footer的高度为整个浏览器的宽度
  • 中间是个三行布局，left和right的宽度是固定的。
  • 而middle的内容的宽度是自适应占满中间位置的，高度为三栏中的最大高度其实圣杯布局和双飞翼布局在前的处理是一样的，只不过是在中间处理的时候有些小差异而已啦。

前期处理

  • 为了避免出现问题我们先给body设置一个min-width:600px;
  • 再将header和footer的宽度设为100%（整个浏览器的页面），并添加背景色便于区分。
  • 在content中我们给left，right，midlle都添加float:left效果，设置left，right的宽高。
  • middle的宽度设置为100%，高度为与left，right的高度相同，同样为了便于看效果我们这里也给它们一个背景色。
  • 这里有个需要注意的地方，我们还应该给content设置一个高度，content中的div我们添加了float：left属性，因此他们都脱离了文本流，导致出现了高度塌陷。
     

（ps:我这里是在content中添加了一个overflow: hidden，形成一个BFC区域来解决这个问题的，感兴趣的小伙伴可以自行了解，当然你不这样做设置content的高度就行啦）

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     min-width: 600px;
  7. }
  8. #header,#footer{
  9.     height: 50px;
  10.     width: 100%;
  11.     background: grey;
  12. }
  13. #middle,#left,#right{
  14.     float: left;
  15. }
  16. #content{
  17.     overflow: hidden;
  18. }
  19. #left,#right{
  20.     width: 200px;
  21.     height: 200px;
  22.     background: pink;
  23. }
  24. #middle{
  25.     width: 100%;
  26.     height: 200px;
  27.     background: yellowgreen; 
  28. }
  29.  

在这里插入图片描述

我们发现现在的页面是这样子的，那这怎么回事呢？

答案很简单，left,right,middle本来应该是在一条直线上的，但是content的宽度不够，就把left，right两个盒子挤下来啦。

那现在我们分别来看看这两种布局接下来解决这个问的方法吧：

圣杯布局

我们先给content设置一个padding：0 200px,将左右两边各腾出200px宽度。
接下来我们只需要将left,right，两个盒子放在两个区域就行啦。
最后分别给left，left设置margin属性调整位置。

  1. #content{
  2.     overflow: hidden;
  3.     padding: 0 200px;
  4. }
  5. #left{
  6.     margin-left:-100% ;
  7.  
  8. } 
  9. #right{
  10.     margin-left: -200px;

我们再来看一下效果

在这里插入图片描述

当当当，见证奇迹的时候到啦~

在这里插入图片描述

双飞翼布局

那我们看看双飞翼布局是怎么解决这个问题的呢。来往下看

双飞翼布局是在middle下添加了一个middle-inner盒子，将middle的内容放在这个盒子里面（这有什么用呢？不着急咱先往下看）。
我们和圣杯布局中一样也给float，left设置margin值调整位置。
但是此布局就不需要给left,right设置定位啦。

  1. #left{
  2.     float: left;
  3.     margin-left: -100%;
  4. }
  5. #right{
  6.     float: left;
  7.     margin-left: -200px;
  8. }
  9. .middle-inner{
  10.     padding: 0 200px;
  11. }
  12.  

在这里插入图片描述

这时我们发现middle中的内容不见了,此时我们之前在midlle里面添加的midlle-inner盒子就派上用场啦，此时只需要给这个盒子设置一个margin：0 200px,那么我们的内容是不是来到中间展示了呢。

  1. .middle-inner{
  2.     margin: 0 200px;
  3. }
  4.  

看效果

在这里插入图片描述

和我们预期的一样，大厂面试题不过如此嘛，收工收工！！！！

总结一下

最后我们来总结一下，双飞翼布局其实和圣杯布局的精髓是一样的，都是通过设置负margin来实现元素的排布。

  • 不同的就是html结构，双飞翼是在middle元素内部又设置了一个milddle-inner并设置它的左右margin，而非圣杯布局的padding，来排除两边元素的覆盖。
  • 双飞翼布局可以多了一个html结构，但是可以不用设置left,right元素的定位。

下面给一下完整代码：

圣杯布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <div class="wrap">
  12.         <div id="header">header</div>
  13.         <div id="content">
  14.             <div id="middle">
  15.                 middle
  16.             </div>
  17.             <div id="left">left</div>         
  18.             <div id="right">right</div>
  19.         </div>
  20.         <div id="footer">footer</div>
  21.     </div>
  22. </body>
  23. </html>
  24.  
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     min-width: 600px;
  7. }
  8. #header,#footer{
  9.     height: 50px;
  10.     width: 100%;
  11.     background: grey;
  12. }
  13. #middle,#left,#right{
  14.     float: left;
  15. }
  16. #content{
  17.     overflow: hidden;
  18.     padding: 0 200px;
  19. }
  20. #left,#right{
  21.     width: 200px;
  22.     height: 200px;
  23.     background: pink;
  24. }
  25. #middle{
  26.     width: 100%;
  27.     height: 200px;
  28.     background: yellowgreen; 
  29. }
  30.  #left{
  31.     margin-left:-100% ;
  32.     position: relative;
  33.     left:-200px;
  34. } 
  35. #right{
  36.     margin-left: -200px;
  37.     position: relative;
  38.     left:200px; 
  39. }
  40.  
  41.  

双飞翼布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <div class="wrap">
  12.         <div id="header">header</div>
  13.         <div id="content">
  14.             <div id="middle">
  15.                 <div class="middle-inner">
  16.                     middle
  17.                 </div>
  18.             </div>
  19.             <div id="left">left</div>         
  20.             <div id="right">right</div>
  21.         </div>
  22.         <div id="footer">footer</div>
  23.     </div>
  24. </body>
  25. </html>
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. .wrap{
  6.     min-width: 600px;
  7. }
  8. #header,#footer{
  9.     height: 50px;
  10.     width: 100%;
  11.     background:grey;
  12. }
  13. #left,#right{
  14.     width: 200px;
  15.     height: 200px;
  16.     background: green;
  17. }
  18.  
  19. #middle{
  20.     background: pink;
  21.     width: 100%;
  22.     float: left;
  23.     height:200px;
  24. }
  25. #content{
  26.     overflow: hidden;
  27. }
  28. #left{
  29.     float: left;
  30.     margin-left: -100%;
  31. }
  32. #right{
  33.     float: left;
  34.     margin-left: -200px;
  35. }
  36. .middle-inner{
  37.     margin: 0 200px;
  38. }

到此这篇关于面试必问:圣杯布局和双飞翼布局的区别的文章就介绍到这了,更多相关圣杯布局和双飞翼布局区别内容请搜索w3xue以前的文章或继续浏览下面的相关文章，希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号