浅谈面试中常考的两种经典布局——圣杯与双飞翼

圣杯和双飞翼布局介绍

最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解。

博客链接:http://www.xluos.com/index.ph...

圣杯布局和双飞翼布局作为经典的三栏式布局是面试中的常客。两种布局达到效果上基本相同,都是两边两栏宽度固定,中间栏宽度自适应。在HTML结构上中间栏在最前面保证了最先渲染中间提升性能(因为这两种布局都比较老,我认为在现代浏览器中这点儿性能优化效果并不是很大),并且兼容性良好。两种布局的实现方法前半部分相同,后半部分的实现各有利弊,下面会简单介绍两者的区别。

Demo和代码 两种布局的实现

首先,既然是三栏式布局我们需要三个div

<header>圣杯布局</header>
    <div class="bd">
        <div class="main text">
            main
        </div>
        <div class="left text">
            left
        </div>
        <div class="right text">
            right
        </div>
    </div>
    <footer>footer</footer>

main设置width: 100%,让它始终占满窗口,这样才有自适应的效果。

然后我们给它加上点儿样式区分,效果如下:

为了形成在一行三栏布局,给三个方块都加上浮动float: left;(注意清除浮动,因为浮动会导致父元素高度塌陷)

接着我们要把三个方块拉到一行,这里要利用负margin的技巧。

  • left要放到main的左边,设置margin-left: -100%,因为margin的百分比是相对与父元素的,所以需要整整一行的宽度才能补偿这个margin的值,所以left就能到main的左边。
  • 接着让right到main的右边,只需要设置margin-left的值为负的right的宽,比如margin-left: -200px;,正好使main重叠right的宽度,因为设置了浮动所以right就会到main的右边了。

下面我们来看一下效果:

看样子好像我们已经成功达到了效果?不要急给两个方块变透明,再给中间加点儿内容看看。

我们发现当内容变多之后,因为三个方块都是设置的浮动,脱离的文档流,两边固定宽度的两栏会挡住我们的内容。

所以要想两边不遮挡内容,就需要中间栏给两边的位置腾出来。我们可以想到paddingmargin都可以用来腾出位置,这两个属性就是圣杯布局的双飞翼布局的区别,不过双飞翼布局还需要稍微改造一下HTML的结构,这个等一下再说。

1.圣杯布局——使用padding属性

不过这样布局有一个问题就是:有一个最小宽度,当页面小于最小宽度时布局就会乱掉。所以最好给body设置一个min-width。这个min-width肯定不能是试出来的,怎么计算呢?就是left-width * 2 + right-width,至于为什么,简单的说就是:“由于设置了相对定位,所以当left原来的位置和right的位置产生重叠时,由于浮动的原因一行放不下就会换行”。所以布局就被打乱了。使用双飞翼布局就可以避免这个问题。

2.双飞翼布局——使用margin属性

首先我们要对HTML结构稍微改变一下:

<header>双飞翼布局</header>
    <div class="bd">
        <div class="main text">
            <div class="main-content">main</div>
        </div>
        <div class="left text">
            left
        </div>
        <div class="right text">
            right
        </div>
    </div>
<footer>footer</footer>

可以看到,我们在main里面又加了一个内容层。如果知道盒子模型,就知道我们是不能直接给main添加margin属性,因为我们已经设置了width:100%,再设置margin的话就会超过窗口的宽度,所以我们再创造一个内容层,将所有要显示的内容放到main-content中,给main-content设置margin就可以了。

  • 因为不改变父元素所以只需要给main-content设置margin: 0 200px 0 200px;属性就可以了达到效果
两种布局的区别

圣杯布局是中间栏为两边腾开位置。 双飞翼布局则是中间栏不变,将内容部分为两边腾开位置

参考

https://www.cnblogs.com/lovem...https://www.zhihu.com/questio...

原文链接:segmentfault.com

上一篇:JavaScript中严格判断NaN的方法
下一篇:es6 - 解构赋值

相关推荐

  • 百分比与圣杯布局

    最近在开发一个简单的页面的时候,需要给页面去做一个布局,具体部分就是头部header和内容区域。这里有一个要求就是头部定好宽度以后,需要让container占有整个屏幕,那最好的办法就是直接计算页面的...

    2 年前
  • 浅谈:快速理解JS的原型与原型链

    JavaScript中有基本类型和复杂类型的区分。 当我们在声明一个基本类型时: 这时我们可以用Number方法将1包装为对象,即声明一个对象1。 n2的(初始值)为1,其实此时它就是一...

    1 年前
  • 浅谈:js后加?v=版本号的原因

    原由 一般用于静态资源加了CDN,比如说图片、CSS、JS 文件,会加上版本号或 hash 值,这样每次更新静态资源后,修改对应版本号,CDN 会认为这是一个新文件,会重新去缓;如果没有版本号...

    1 年前
  • 浅谈高性能web前端技术栈——如何让小白轻松上手

    下面分别从以下几点开篇:图片地图,CSS Sprites,内联图片,样式表合并,脚本文件合并,脚本文件加载和执行。 1. 图片地图:服务器端图片地图和客户端图片地图。

    2 年前
  • 浅谈隐式类型转换与显示类型转换的那些事

    隐式类型转换 number类型转string类型 string类型转number类型或者boolean类型 boolean类型转换number类型或者string类型 显示类型...

    2 年前
  • 浅谈键盘上回车按钮的JavaScript触发事件

    input 的回车触发事件。 简单,就当做个笔记咯。 以上这篇浅谈键盘上回车按钮的js触发事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持JavaScr...

    3 年前
  • 浅谈节流与防抖

    节流和防抖在开发项目过程中很常见,例如 input 输入实时搜索、scrollview 滚动更新了,等等,大量的场景需要我们对其进行处理。我们由 Lodash 来介绍,直接进入主题吧。

    10 个月前
  • 浅谈自然语言处理中的词向量

    文/晗灵 1.词向量是什么 正如下图所示:语谱图带有语音信号丰富的特征;图片天然的矩阵密集表示直接可供计算机理解;词向量的意义正在于,将计算机不可直接理解的文字信息表示为可理解的数字向量,并内蕴...

    7 天前
  • 浅谈浏览器页面渲染过程 load 与 DOMContentLoaded 事件

    JavaScript.jpg(/public/upload/501dba8bd99232d2e6bdb58867cd43d9) 一个问题 为什么推荐把 &lt;script&gt; 都放在 &...

    4 个月前
  • 浅谈流量劫持与防治

    注:本文来自同名掘金分享演讲整理,文章风格比较偏向口语化,图片均来自于讲稿截图。 什么是流量劫持 在谈流量劫持之前,首先我们来了解一下什么叫做流量劫持。对于互联网的最终用户来说,用户对上网的直观...

    2 年前

官方社区

扫码加入 JavaScript 社区