双飞翼布局 #2

hubvue · 2018-12-19T04:04:51Z

双飞翼布局的原理

内容先渲染，侧边后渲染。以首先渲染重要部分达到用户首先看到内容区域的目的。

代码层面的分析

双飞翼布局以左中右三个盒子都为浮动布局，利用margin的负值来决定三个盒子的排版位置。

<style>
 .left{
    width:300px;
    background:orange;
    float : left;
    margin-left:-100%;
}
.right{
    width:200px;
    float : left;
    background-color:blue;
    margin-left:-200px;
}
.middle{
    float:left;
    width:100%;
    background:red;
}
</style>
<body>
    <div class="middle">中</div>
    <div class="left">左</div>
    <div class="right">右</div>
</body>

早期的双飞翼布局

上面这样是有问题的，左右两边的盒子会覆盖到中的上面。在早期的双飞翼布局上面解决方法是通过添加一个父级，然后利用父级的padding属性让出来左右的空间，然后左右盒子通过定位推移过去。这个存在的问题是有添加了一个position定位属性。

<style>
.container{
    padding-left:300px;
    padding-right:200px;
}
 .left{
    width:300px;
    background:orange;
    float : left;
    margin-left:-100%;
    position:relative;
    left:-300px;
}
.right{
    width:200px;
    float : left;
    background-color:blue;
    margin-left:-200px;
    position:relative;
    left:200px;
}
.middle{
    float:left;
    width:100%;
    background:red;
}
</style>
<body>
    <div class="container">
        <div class="middle">中</div>
        <div class="left">左</div>
        <div class="right">右</div>
    <div>
</body>

现在的双飞翼布局

早期的双飞翼布局,增添了position属性又增加了left等，很显然增加了代码的复杂度。于是出现现在的双飞翼布局。我们都知道margin是不占据盒子空间的。通过给中部元素添加一个子元素，然后通过margin属性把子盒子范围推移。就可以实现。

<style>
.left{
    width:300px;
    background:orange;
    float : left;
    margin-left:-100%;
}
.right{
    width:200px;
    float : left;
    background-color:blue;
    margin-left:-200px;
}
.middle{
    float:left;
    width:100%;
    background:red;
}
.middle .inner{
    margin-left:300px;
    margin-right:200px;
    background:green;

}
</style>
<body>
<div class="middle">
    <div class="inner">
        中
    </div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</body>

上面就可以实现。

双飞翼布局的三栏等高。

我们有时候想要的是三栏等高，我们知道，margin不会影响盒子模型，而padding会影响盒子模型，就可以通过使用padding把盒子推到无限大，然后再用margin把盒子拉回来，形成假的等高。然后通过添加父级元素设置overflow:hidden实现等高。

<style>
*{
    margin:0;
    padding:0;
}
.left{
    width:300px;
    background:orange;
    float : left;
    margin-left:-100%;
}
.right{
    width:200px;
    float : left;
    background-color:blue;
    margin-left:-200px;
}
.middle{
    float:left;
    width:100%;
    background:red;
}
.left , .right , .middle{
    padding-bottom:9999px;
    margin-bottom:-9999px;
}
.middle .inner{
    margin-left:300px;
    margin-right:200px;
    background:green;

}
.container{
    overflow:hidden;
}
</style>
<body>
<div class="container">
    <div class="middle">
        <div class="inner">
            中
        </div>
    </div>
    <div class="left">左</div>
    <div class="right">右</div>
</div>
</body>

致此、结束。

hubvue added the CSS Good for newcomers label Jan 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

双飞翼布局 #2

双飞翼布局 #2

hubvue commented Dec 19, 2018

双飞翼布局 #2

双飞翼布局 #2

Comments

hubvue commented Dec 19, 2018

双飞翼布局的原理

代码层面的分析

早期的双飞翼布局

现在的双飞翼布局

双飞翼布局的三栏等高。