面试必问:圣杯布局和双飞翼布局的区别


Posted in HTML / CSS onMay 13, 2021

前言

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

布局效果

面试必问:圣杯布局和双飞翼布局的区别

面试必问:圣杯布局和双飞翼布局的区别

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

  • 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的高度就行啦)

*{
    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来实现元素的排布。

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

下面给一下完整代码:

圣杯布局

<!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;
}

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

 
HTML / CSS 相关文章推荐
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 #HTML / CSS
CSS 实现多彩、智能的阴影效果
解析CSS 提取图片主题色功能(小技巧)
为什么你写的height:100%不起作用
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 #HTML / CSS
background-position百分比原理详解
不要在HTML中滥用div
You might like
php生成略缩图代码
2012/07/16 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python opencv读mp4视频的实例
2018/12/07 Python
django最快程序开发流程详解
2019/07/19 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
社团活动策划书范文
2014/01/09 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
董事长开业致辞
2015/07/29 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
MySQL 条件查询的常用操作
2022/04/28 MySQL
python解析照片拍摄时间进行图片整理
2022/07/23 Python
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers