理解双飞翼布局

最新推荐文章于 2023-04-18 17:25:58 发布

南太平洋_99

最新推荐文章于 2023-04-18 17:25:58 发布

阅读量751

点赞数 1

分类专栏： JavaScript学习笔记

本文链接：https://blog.csdn.net/heyue_99/article/details/74390377

版权

JavaScript学习笔记专栏收录该内容

51 篇文章 1 订阅

订阅专栏

双飞翼布局主要解决俩问题：1、三列布局，中间宽度自适应，两边定宽； 2、中间栏要在浏览器中优先展示渲染。

在css布局中，有三种技术是经常被使用的：

（1）浮动（float）

（2）负边距（negative margin）

（3）定位（position）

这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。

如果三列布局不使用双飞翼布局，左右分别float：lef和right，中间不浮动，存在问题：

（1）中间栏必须放在left和right之后，会最后被渲染

（2）浮动元素和非浮动元素相碰会出现问题，比如脱离文档流的会挤压文档流中元素的文字（非浮动元素中间还是会占100%的宽度，左右骑在中间上面）

双飞翼布局

为了快速加载主体内容，我们在布局时候可以把最重要的放在最前面。比如：

<div class="wrap">
  <div class="main">main</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

实现要求：主间部分内容的宽度是要自适应的，左、右两边宽度分别为20%，30%

首先呢，我们需要把这三列都浮动起来，即：

.main,.left,.right { float:left; height:200px; }

主体main的宽度要自适应，那么可以先设置为100%，这样main既是浮动元素，又有块级元素的特性

.main { width:100%; background:#ace; }

接下来便是”翼“的设置了

左边： .left { width:20%; background:#eee; }

右边： .right { width:30%; background:#ddd; }

想要left居左，那么我们可以设置负边距： margin-left:-100%; 即：

.left { width:20%; background:#eee; margin-left:-100%; }

说明：这里的100%为main的宽度，相当于是把left给左移了，刚好实现左边与main的对齐。

对于right居右问题，也是类似可以设置负边距：margin-left:30%; 即：

.right { width:30%; background:#ddd; margin-left:-30%; }

说明：这里的30%为right自身的宽度，相当于是自己向左移了自身的一个宽度，刚好实现右边与main的对齐。

还剩关键的一步，即main的位置该如何设置？目前，他的左边及右边部分元素是会被left/right挡住的

所以我们还必须在main里面多加一个div区块用来“装”具体的内容，在main内添加一个div(class="mainIn")，设置margin:0 30% 0 20%;，把两边内容给挤开，这样才是完美的效果。

<div class="wrap">
  <div class="main">
    <div class="mainIn">main</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

为什么这个三栏布局叫做双飞翼布局呢？
如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，left和right则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。因此这个布局实现被取名为双飞翼布局（Flying Swing Layout）.

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .column{
            float: left;
            height: 200px;
        }
        #left{
            background-color: red;
            width: 100px;
            margin-left: -100%;
        }
        #right{
            background-color: green;
            width: 200px;
            margin-left: -200px;
        }
        #center{
            background-color: yellow;
            width: 100%;
        }
        .main{
            margin: 0 200px 0 100px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="center" class="column">
        <div class="main"></div>
    </div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
</div>
</body>
</html>