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 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
FireFox JavaScript全局Event对象
Jun 14 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
js实现简易聊天对话框
Aug 17 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 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面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
浅析php创建者模式
2014/11/25 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
php函数式编程简单示例
2019/08/08 PHP
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Python模块的制作方法实例分析
2019/12/21 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
美的官方商城:Midea
2016/09/14 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
博士导师推荐信
2015/03/25 职场文书
2015入党自传格式范文
2015/06/26 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL