双飞翼布局、圣杯布局

双飞翼布局、圣杯布局

方法一：flex布局

//css代码：
    * {
            padding: 0;
            margin: 0;
        }
        header {
            display: flex;
        }

        aside {
            width: 200px;
            height: 100vh;
            background-color: cornflowerblue;
        }

        nav {
            flex: 1;
            height: 100vh;
            background-color: dodgerblue;
        }

        section {
            width: 200px;
            height: 100vh;
            background-color: cornflowerblue;
        }
//html代码：
    <header>
        <aside>1</aside>
        <nav>2</nav>
        <section>3</section>
    </header>

方法二：定位

//css代码：
     * {
            padding: 0;
            margin: 0;
        }

        header {
            position: relative;
        }

        aside {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 100vh;
            background-color: cornflowerblue;
        }

        nav {
            padding-left: 200px;
            height: 100vh;
            background-color: dodgerblue;
        }

        section {
            position: absolute;
            right: 0;
            top: 0;
            width: 200px;
            height: 100vh;
            background-color: cornflowerblue;
        }
//html代码：
    <header>
        <aside>1</aside>
        <nav>2</nav>
        <section>3 </section>
    </header>

方法三：浮动

//css代码：
     * {
            padding: 0;
            margin: 0;
        }

        aside {
            float: left;
            width: 200px;
            height: 100vh;
            background-color: cornflowerblue;
        }

        nav {
            float: left;
            /* 计算机属性calc()运算符左右必须是空格 */
            width: calc(100% - 400px);
            height: 100vh;
            background-color: dodgerblue;
        }

        section {
            float: left;
            width: 200px;
            height: 100vh;
            background-color: cornflowerblue;
        }
//html代码：
 <header>
    <aside>1</aside>
    <nav>2</nav>
    <section>3</section>
 </header>