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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
vue中移动端调取本地的复制的文本方式
Jul 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代码
2012/07/14 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
无闪烁更新网页内容JS实现
2013/12/19 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Cpy和Python的效率对比
2015/03/20 Python
浅谈Python中函数的参数传递
2016/06/21 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
环卫处个人工作总结
2015/03/04 职场文书
黄河绝恋观后感
2015/06/08 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
青岛市的收音机研制与生产
2022/04/07 无线电