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 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
简单实现js拖拽效果
Jul 25 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 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 Mysqli 常用代码集合
2016/11/12 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
详解VUE前端按钮权限控制
2019/04/26 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
用pickle存储Python的原生对象方法
2017/04/28 Python
详解Python中的type和object
2018/08/15 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
C#实现启动一个进程
2016/10/01 面试题
高考自主招生自荐信
2013/10/20 职场文书
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
委托书格式要求
2015/01/28 职场文书
商务邀请函
2015/01/30 职场文书
高老头读书笔记
2015/06/30 职场文书
2016年班主任新年寄语
2015/08/18 职场文书