JavaScript圣杯布局与双飞翼布局实现案例详解


Posted in Javascript onAugust 05, 2022

一、圣杯布局和双飞翼布局的功能介绍

  • 圣杯布局和双飞翼布局是三栏布局中的两种布局方式,他们实现的效果是相同的,区别就是实现方法。
  • header和footer各自占领屏幕所有宽度,高度固定;
  • 中间的outer是一个三栏布局;
  • 三栏布局中left和right不变,center填充其他地方;
  • 中间部分的高度是三栏中最高的区域的高度。

JavaScript圣杯布局与双飞翼布局实现案例详解

二、圣杯布局

高度如何自适应屏幕高度

  • 其实这个并不是圣杯布局中的要求,圣杯布局是可以指定高度的,但是可以作为一个思考;
  • 方法就是使用flex布局,将主轴设置为纵轴,再将outer的flex设为1,意思就是填充多余空白,即可达到自适应屏幕高度的效果。
body{
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}
.header{
    background-color:grey;
    height: 50px;
}
.footer{
    background-color:grey;
    height: 50px;
}
.outer{
    flex:1;
}

圣杯布局思路

  • 将center盒子写在最前面,保证center盒子最先渲染;
  • 给outer盒子指定padding-left 和 padding-right值,留出left和right的位置;
  • 三个盒子都设置float:left,这时left和right就会被挤到下一行;
  • left设置margin-left:-100%;相对定位+left:-left的宽度;right设置margin-left=-right的宽度;相对定位+right:-right的宽度即可将两个盒子归位。

圣杯布局代码

<style>
  * {
      padding: 0;
      margin: 0;
      text-align: center;
  }
  html{
      height: 100%;
  }
  body{
      display: flex;
      flex-direction: column;
      height: 100%;;
  }
  .header{
      width: 100%;
      height: 50px;
      background-color:dimgray;
  }
  .footer{
      width: 100%;
      height: 50px;
      background-color:dimgray;
  }
  .outer{
      flex:1;
      padding-left: 100px;
      padding-right: 200px;
  }
  .center{
      float: left;
      background-color: darkslateblue;
      height: 100%;
      width: 100%;
  }
  .left{
      float: left;
      width: 100px;
      margin-left: -100%;
      background-color: burlywood;
      height: 100%;
      position: relative;
      left: -100px;
  }
  .right{
      float: left;
      width: 200px;
      margin-left: -200px;
      height: 100%;
      position: relative;
      right: -200px;
      background-color: cyan;
  }
</style>
<body>
    <div class="header">header</div>
    <div class="outer">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

三、双飞翼布局

双飞翼布局的思路

  • 给三个盒子都设置为左浮动;
  • center的宽度设为100%;
  • left设置margin-left:-100%;right设置margin-left=-right的宽度即可将两个盒子归位,但是将center的两端挡住了;
  • 在center盒子中再写一个content盒子,设置margin-left和margin-right为两侧的宽度,content盒子作为内容。

双飞翼布局的代码

<style>
    *{
        padding: 0;
        margin: 0;
    }
    html{
        width: 100%;
        height: 100%;
        text-align: center;
    }
    body{
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    .header{
        background-color:grey;
        height: 50px;
    }
    .footer{
        background-color:grey;
        height: 50px;
    }
    .outer{
        flex:1;
    }
    .center{
        float: left;
        width: 100%;
        background-color: darkslateblue;
        height: 100%;
    }
    .left{
        float: left;
        margin-left: -100%;
        width: 100px;
        background-color: burlywood;
        height: 100%;
    }
    .right{
        float: left;
        width: 200px;
        background-color: cyan;
        margin-left: -200px;
        height: 100%;
    }
    .content{
        margin-left: 100px;
        margin-right: 200px;
        height: 100%;
    }
</style>
<body>
    <div class="header">header</div>
    <div class="outer">
        <div class="center">
            <div class="content">content</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

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

  • 圣杯布局是利用padding将中间部分留出,再利用定位、margin的方式将左右盒子归位,因此不需要外层div;
  • 双飞翼布局是先设置中间盒子的宽度为100%,再用margin移动左右盒子覆盖了中间盒子的两侧,再将outer中间加入一个盒子,留出两侧的margin值,达到三栏布局的效果。

四、圣杯布局和双飞翼布局面试问题

回答:圣杯布局和双飞翼布局都可以实现三栏布局,即两侧宽度固定,中间自适应的效果。圣杯布局是先用padding将中间内容留出,再定位左右盒子到相应位置;而双飞翼布局首先将中间盒子的宽度设为了100%,在定位左右盒子的时候会覆盖中间盒子的两端,这样就需要在中间盒子中在定义一个盒子,并留出margin的两侧值。两种布局都需要把center盒子写在left和right前面,为了最先渲染。

到此这篇关于JavaScript圣杯布局与双飞翼布局实现案例详解的文章就介绍到这了,更多相关JS圣杯布局与双飞翼布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 #Javascript
pnpm对npm及yarn降维打击详解
Aug 05 #Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 #Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 #Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 #Javascript
canvas 中如何实现物体的框选
Aug 05 #Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 #Javascript
You might like
中篇:安装及配置PHP
2006/12/13 PHP
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
php中session与cookie的比较
2015/01/27 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
JSONP之我见
2015/03/24 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
javascript 封装Date日期类实例详解
2017/05/28 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
微信小程序实现手势滑动效果
2019/08/26 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
js实现全选和全不选
2020/07/28 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
Python的另外几种语言实现
2015/01/29 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python实现自动登录
2018/09/17 Python
Python实现FTP文件传输的实例
2019/07/07 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
酒店营销策划方案
2014/02/07 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
社区健康教育实施方案
2014/03/18 职场文书
工地安全生产标语
2014/06/06 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript