css 三栏布局 流式 圣杯 双飞翼布局 优先加载问题

三栏布局

1 overflow + float

左右边栏浮动，中间主体部分通过overflow开启BFC。利用BFC不与浮动元素重叠的特性来完成三栏布局，中间自适应。
缺点是DOM加载是按照书写顺序来的，因此中间主题部分不会优先加载。
圣杯布局和双飞翼布局content被优先加载，解决了这一问题

<style>
    .main::after {
        content: ' ';
        display: block;
        clear: both;
        zoom: 1;
    }

    .left,
    .right,
    .center {
        height: 100px;
    }

    .left {
        width: 120px;
        float: left;
        background: lightskyblue;
    }

    .right {
        width: 200px;
        float: right;
        background: lightseagreen;
    }

    .center {
        overflow: hidden;
        background: lightsalmon;
    }
</style>

<body>

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

</body>

效果

2 圣杯布局

浮动+定位+负margin
content宽度设置为100%将左右栏挤下去
左右边栏预留的宽度由父元素的padding给出
即leftWidth=paddingLeft
rightWidth=paddingRight

左边栏:
margin-left:100%的百分比相对于父元素计算，因此只能到达父元素的content左边线，不能到达padding区域
再给上相对定位left:-自身宽度，即可填满padding-left

右边栏：
设置好左边栏，右边栏已经在父容器的content右边线位置，想要到达padding处，只需要设置
margin-right为-自身宽度，即可填满padding-right

<style>
    .main{
        height: 100px;
        /* padding值为左右边栏空出的距离 */
        padding: 0 100px 0 200px; 
    }

    .content,.left,.right{
        float: left;
        height: 100%;
    }

    .content{
        /* 把左右挤下去 */
        width: 100%;
        background: lightseagreen;
    }

    .left{
        width: 200px;
        background: lightpink;
        /* 对齐到main的左边线，但是没有到达padding区域 */
        margin-left: -100%;
        position: relative;
        /* 填充main左边线的padding区域 */
        left:-200px;
    }

    .right{
        width: 100px;
        background-color: lightgoldenrodyellow;
        /* 填充main的右边线的padding区域 */
        margin-right: -100px;
    }
    
</style>

<body>
    <div class="main">
        <div class="content"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

效果

3 双飞翼布局

与圣杯布局不同的是，左右边栏的预留空间由自适应宽度的content通过margin值给出，而不是padding
因此没有padding,main宽度没有减少,布局的时候只需要把左右边栏移动到对齐main的左右边线即可。
左右边栏统一设置margin-left即可达到效果

<style>
    .main{
        height: 100px;
    }

    .conWrapper,.left,.right{
        height: 100%;
        float: left;
    }

    .conWrapper{
        /*把左右边栏挤下去*/
        width: 100%;
    }

    .content{
        width: auto;
        /* 给左右边栏留距离 */
        margin: 0 200px 0 100px;
        background-color: lightsalmon;
        height: 100%;
    }

    .left{
        width: 100px;
        /* 对齐main左边线 */
        margin-left: -100%;
        background-color: lightsteelblue;
    }

    .right{
        width: 200px;
        /* 对齐main右边线 */
        margin-left: -200px;
        background-color: mediumvioletred;
    }
    
</style>
<body>
    <div class="main">
        <div class="conWrapper">
            <div class="content"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

效果

posted @ 2020-05-20 15:35  IslandZzzz  阅读(325)  评论(0)  编辑  收藏  举报