圣杯布局和双飞翼布局的理解和区别

1.圣杯布局

代码如下

.content{
   /*空出left与right的宽度*/
    padding: 0 100px;
}
.middle{
    float: left;
    width: 100%;
    height: 100px;
    background: blue;
}
.left{
     /*摆到上一排*/
    float: left;
    height: 100px;
    width: 100px;
    margin-left: -100%;
    /*摆正位置*/
    position: relative;
    left: -100px;
    background: red;
}
.right{
    /*摆到上一排*/
    float: left;
    height: 100px;
    width: 100px;
    margin-left: -100px;
   /*摆正位置*/
    position: relative;
    right: -100px;
    background: red;
}

<div class="content">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

2.双飞翼布局

代码如下

.middle{
    float: left;
    width: 100%;
    height: 100px;
    background: blue;
}
.inside{
    /*空出left与right的宽度*/
    margin: 0 100px;
    height: 100%;
}
.left{
    float: left;
    width: 100px;
    height: 100px;
    margin-left: -100%;
    background: red;
}
.right{
    float: left;
    width: 100px;
    height: 100px;
    margin-left: -100px;
    background: red;
}

<div class="content">
    <div class="middle">
        <div class="inside">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

相同:

1.同样都是通过float实现所有的模块在同一行展示
2.middle都使用了width: 100%
3.都使用了margin-left进行定位

不同:

1. 圣杯布局是在最外层的content上空出两边距离, 而双飞翼布局是在middle的子节点中空出两边距离

2. 圣杯布局空出两边距离使用的是padding, 而双飞翼布局空出两边距离使用的margin

   • 改写代码可以发现, 无论是使用margin或padding效果都是一致的,对布局没有任何影响, 所以无论写margin或padding都是可以的

3. 圣杯布局中的left和right定位时使用了position: relative, 而双飞翼没有

   • 因为margin-left: -100%; 取的是父节点的宽度,不包括外边距padding.所以圣杯布局中需要进行二次定位