前言：今天實訓課依舊很水，繼續總結，今天主要補了一下布局的知識。響應式的作業還沒做完...

一、兩列布局

html部分

    <div class="parent">
        <div class="left">left</div>
        <div class="right">
            <p>right</p>
            <p>right</p>
            <p>right</p>
            <p>
 
right</p>
            <p>right</p>
        </div>
    </div>

總體樣式（為啥粘上去這麽亂的...）

div{
      border:1px solid #444;
   }
 .parent{
      background-color: #eee;
   }
 .left{
        background-color: yellow;
   }
 .right{
        background-color: pink;
   }

• 一列定寬，另一列自適應,兩列的高度不會同時增加

.left{
            float: left;
            width:100px;
        }

        .right{
            margin-left:120px;
        }

.parent{
            position: relative;
        }
        .left{
            position: absolute;
            width:100px;
        }
        .right{
            margin-left: 100px
 
;
        }

• 其中一列定寬或者不定寬都可以,另一列自適應，兩列的高度不會同時增加

.left{
            float: left;
            margin-right:20px;
        }

        .right{
            overflow: hidden;
        }

• 表格布局，父元素為table,子元素為table-cell,可以同時增加高度，如果不設置寬度，兩者寬度相等

.parent{
            display: table;
            width:100%;
        }
        .left,.right{
            display: table-cell;
        }

        .left{
            width:100px;
        }

• flex 兩邊高度會同時增加

.parent{
            display: flex;
        }
        .left{
            width: 100px;
        }
        .right{
            flex: 1;
        }

• 表格布局,高度會同時增加

.parent{
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

二、三列布局

這裏主要記錄兩個經典布局

主要樣式

div{
            border:1px solid #ccc;
            box-sizing: border-box;
        }

        .middle{
            background-color:#eee;
        }

        .content{
            background-color: purple;
        }

        .left{
            background-color: yellow;
        }

        .right{
            background-color: pink;
        }

• 雙飛翼布局

<div class="container">
        <div class="middle">
            <div class="content">
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
                <p>content</p>
            </div>
        </div>
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
            <p>right</p>
        </div>
    </div>
<!--1. 註意div的順序 -->
<!--2. .middle設置width:100%; .middle,.left,.right都為float:left，此時它們將分別占據1、2、2 行 -->
<!--3. 為了讓.left回到第一行的最左邊，則需要設置margin-left:-100%; 為了讓.right回到第一行的末尾，則需要設置margin-right:-自身的寬度 -->
<!--4. 此時三者在同一行，但是middle的內容會被遮擋住，故此時應該設置middle裏面的content內容，則content設置:margin:0 right的寬度 0 left的寬度 -->

<!--p.s. 三列布局不等高 -->

.container{
            width:100%;
        }
        .middle{
            float: left;
            width:100%;
        }
        .left{
            width:200px;
            float: left;
            margin-left: -100%;
        }

        .right{
            width:300px;
            float: left;
            margin-left: -300px;
        }
        
        .content{
            margin: 0 300px 0 200px;
        }

• 聖杯布局

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

<!--p.s. 一開始跟雙飛翼布局有點像 -->
<!--1. 註意div的順序 -->
<!--2. .middle設置width:100%; .middle,.left,.right都為float:left，此時它們將分別占據1、2、2 行 -->
<!--3. 為了讓.left回到第一行的最左邊，則需要設置margin-left:-100%; 為了讓.right回到第一行的末尾，則需要設置margin-right:-自身的寬度 -->


<!--4. 由於middle的內容被遮擋，此時是 設置container的padding:0 right的寬度 0 left的寬度-->
<!--5 此時內部直接往中間縮，則需要這是.left{position:relative;left:-自身的寬度；}    .right{position:relative;right:-自身的寬度；-->

.container{
            width:100%;
            padding:0 300px 0 200px;
            background-color: #7e7e7e;
        }
        .middle{
            float: left;
            width:100%;

        }
        .left{
            width:200px;
            float: left;
            margin-left: -100%;
            position: relative;
            left:-200px;
        }

        .right{
            width:300px;
            float: left;
            margin-left: -300px;
            position: relative;
            right:-300px;
        }

CSS布局總結（二）