阿里团队常用的布局——双飞翼布局

GeekGhc 发布于2019-04-23 11:58 / 2902人阅读

摘要：双飞翼布局新手来说不太好理解，光靠死记不行，理解了以后就能轻易写出来。献上代码双飞翼双飞翼布局的好处是淘宝团队提出一种优化写法，写在前面，优先加载，优先渲染，而且兼容性好。

双飞翼布局新手来说不太好理解，光靠死记不行，理解了以后就能轻易写出来。献上代码：

<head>
    <meta charset="UTF-8">
    <title>双飞翼title>
    <style>
        .wrap {
            width: 90%;
            margin: 0 auto;
        }

        .left {
            width: 200px;
            height: 700px;
            background: red;
            float: left;
            margin-left: -100%;
        }

        .right {
            width: 200px;
            height: 700px;
            background: red;
            float: right;
            margin-left: -200px;
        }

        .main {
            width: 100%;
            float: left;
            background: pink;
        }

        .content {
            height: 700px;
            background: yellow;
            margin: 0 210px;
        }
    style>
head>
<body>
<div class="wrap">
    <div class="main">
        <div class="content">contentdiv>
    div>
    <div class="left">leftdiv>
    <div class="right">rightdiv>
div>
body>

双飞翼布局的好处：是淘宝团队提出一种优化写法，main写在前面，优先加载，优先渲染，而且兼容性好。

理解双飞翼布局的几个关键点：

①main是自适应宽度的，所以width:100%;

②main、left、right都是float:left;，但是main的宽度是100%，所以left、right被挤到第二行；

③如何让left和right移动到正确的位置呢？

理解时应该考虑浮动的特性，假设main是固定宽度的，全都左浮动以后，main、left、right应该排在同一行。

那么要让left移动到左边就容易了，只需要向左边移动一个main的宽度就可以了，所以就是margin-left:-100%;

因为main的宽度是100%，要让right移动到右边，则只需要给right一个200的宽度，让它移动上去就行了，所以就是margin-left:-200px;

④此时，left和right实际上是叠在main的左右两边的，这就是在写结构时，要在main里面多写一层content的原因，只要给content一个margin:0 210px;里面的内容就不会被left和right挡住，双飞翼布局也就实现了。

云服务器 GPU云服务器双飞翼布局 android常用布局 html的布局布局遇到的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1425.html

CSS常用布局

摘要：头部主要内容左边栏右边栏尾部显示为头部主要内容左边栏右边栏尾部圣杯布局和双飞翼布局的原理这篇文章讲解得比较清楚，我就不再赘述。 ====== 样例代码不能显示，请看原文https://magicly.me/css-layout/ ====== 布局是CSS中一个很重要的部分，甚至我觉得是最重要也是最难的部分，其他诸如字体大小、颜色等等都是很容易的。最近总结一下使用过的CSS常...

aaron 2019-08-29 12:59 评论0 收藏0
CSS布局十八般武艺都在这里了

摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。本文首发于知乎专栏：前端指南 CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

includecmath 2019-08-29 12:17 评论0 收藏0
CSS中的负边距

摘要：之后仔细的百度了一下，发现了这么一个叫做内外补丁负值法的东西。在这个解决方案中，又涉及到了传说中的负。深入研究之后又发现了圣杯布局双飞翼布局等很多示例，确实要好好研究负边距这个东西了。相关推荐那些年，奇妙的圣杯与双飞翼，还有负边距 2015-04-22 时候写的老文，因为希望引用所以拿了出来。那天被一个同学问了一个问题，三列的div，要求父div的高度和三个div的高度都和三个中字数...

cocopeak 2019-08-29 10:57 评论0 收藏0
两招搞定三栏布局——圣杯布局、双飞翼布局

摘要：如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局这是一道经典的面试题，常用的方法是圣杯布局双飞翼布局。相信看完这篇文章，你就能很清楚的知道什么是圣杯和双飞翼了。在双飞翼中避免左右盒子被覆盖，是通过设置的左右来实现的。如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...

Kaede 2019-08-29 16:19 评论0 收藏0
【布局】圣杯布局&双飞翼布局

摘要：差别通俗点讲就是圣杯布局像是，杯子挂上两只耳朵，，所有容量都给了杯身，耳朵只能挂在两侧。双飞翼布局像是，鸟的双翼，，身子是鸟的一大部分，双翼也是身体的一部分。其他布局其他布局方案已经整理到此文中，欢迎大家前往指正整理布局方案背景随着前端技术的发展推进，web端的布局方式已基本成熟，那么在网站布局方式中，三列布局最为常用，布局方式也有很多，渐渐的开发者们开始从效率的角度优化自己的代码...

LeviDing 2019-08-01 17:36 评论0 收藏0