圣杯双飞翼布局

作者: 看到这朵小fa了么 | 来源:发表于2020-03-11 14:04 被阅读0次

CSS 经典三列布局之双飞翼布局
圣杯布局和双飞翼布局
特殊布局方法
实现两边定宽，中间自适应
圣杯布局和双飞翼布局
圣杯布局和双飞翼布局
CSS布局知识点
圣杯布局和双飞翼布局
三列布局之圣杯布局、双飞翼布局
CSS布局分类

说到圣杯双飞翼布局其实指的是实现左右定宽，中间自适应，同时需要中间部分先加载的一个布局。

float 脱离文档流之后需要设置宽度 100% 才会有宽度，否则会按照自身的尺寸。
圣杯主要是一个容器框住了三个盒子，浮动后需要右侧的盒子margin-right移动，这个时候margin-left 会直接跳过盒模型的外侧；而双飞翼是并排的三个布局通过margin-left简单控制就可以了

圣杯

主要是通过margin负值和相对定位实现需要设置最小值 double left + right

<!DOCTYPE html>

<html>

<head>
    <style>
         body {
            min-width: 500px;
        }
        div {
            height: 300px;
        }

        .contain {
            padding-left: 200px;
            padding-right: 100px;
        }

        .float {
            float: left;
        }

        .left {
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -200px;
            background-color: blueviolet;
        }

        .center {
            width: 100%;
            background-color: aquamarine;
        }

        .right {
            width: 100px;
            margin-right: -100px;
            background-color: chocolate;
        }
    </style>

    <body>

        <div class="contain">
            <div class="center float">center</div>
            <div class="left float">left</div>
            <div class="right float">right</div>
        </div>
    </body>

</html>

双飞翼

主要通过margin负值不用定位减小了最小宽度 left + right

<!DOCTYPE html>

<html>

<head>
    <style>
        body {
            min-width: 300px;
        }
        div {
            height: 300px;
        }

        .float {
            float: left;
        }

        .contain {
            width: 100%;
        }

        .left {
            width: 200px;
            margin-left: -100%;
            background-color: blueviolet;
        }

        .center {
            margin: 0 100px 0 200px;
            background-color: aquamarine;
        }

        .right {
            width: 100px;
            margin-left: -100px;
            background-color: chocolate;
        }
    </style>

    <body>

        <div class="contain float">
            <div class="center">center</div>
        </div>
        <div class="left float">left</div>
        <div class="right float">right</div>

    </body>

</html>

flex

<!DOCTYPE html>

<html>

<head>
    <style>
        body {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        div {
            height: 300px;
        }

        .left {
            width: 200px;
            order: -1;
            background-color: blueviolet;
        }

        .center {
            width: 100%;
            background-color: aquamarine;
        }

        .right {
            width: 100px;
            background-color: chocolate;
        }
    </style>

    <body>

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

    </body>

</html>

box-sizing

跟双飞翼是差不多的 margin负值

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            height: 300px;
        }
        .float {
            float: left;
        }

        .left {
            width: 200px;
            background-color: blueviolet;
            margin-left: -100%;
        }

        .center {
            width: 100%;
            box-sizing: border-box;
            padding: 0 100px 0 200px;
            background-color: aquamarine;
        }

        .right {
            width: 100px;
            background-color: chocolate;
            margin-left: -100px;
        }
    </style>

    <body>

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

    </body>

</html>

calc自适应

没有实现中间在的区域先加载

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            height: 300px;
        }

        .float {
            float: left;
        }

        .left {
            width: 200px;
            background-color: blueviolet;
        }

        .center {
            width: calc(100% - 300px);
            background-color: aquamarine;
        }

        .right {
            width: 100px;
            background-color: chocolate;
        }
    </style>

    <body>
        <div class="left float">left</div>
        <div class="center float">center</div>
        <div class="right float">right</div>
    </body>

</html>