下效果圖先：

一、三欄布局，中欄自適應寬度很簡單，關鍵點：

1. 父元素設置 display: flex;
2. 左右2欄確定寬度（數值/百分比）
3. 中間欄設置 flex:1;
4. 如果要布局好點，左右2欄可以靠邊排，父元素設置 justify-content: space-between;

二、而子元素要占滿剩余高度的css關鍵點：

1. 父元素要設置 display: flex;
2. 父元素的主軸方向設置為縱向從上往下排列 flex-direction: column;
3. 父元素的高度能確定，不管是定高（height: 500px;），還是 100% 其父元素的高度?；蛘呤怯善溆嘣乜梢源_定整體文檔高度的都可以。
4. 需要占滿剩余高度的子元素，設置 flex:1;

html例子：

    <div id="app">
        <div class="flex_between demo">
            <div class="l1">
                <div class="box box-1">1-1</div>
            </div>
            <div class="l2">
                <div class="box box-1">2-1</div>
                <div class="box box-2">
                    <div class="hd">2-2</div>
                    <div class="list myscroll">
                        <p v-for="i in 100">{{ i }}</p>
                    </div>
                </div>
            </div>
            <div class="l3">
                <div class="box box-1">3-1</div>
                <div class="box box-2">3-2</div>
                <div class="box box-3">3-3</div>
            </div>
        </div>
    </div>

CSS例子：

<style>
body { margin: 0; padding: 10px; background: #eee; }
.flex_between { display: flex; justify-content: space-between; }
.box { background: #fff; box-sizing: border-box; margin-bottom: 10px; text-align: center; font-size: 50px; }
.box:last-child { margin-bottom: 0; }
.demo .l1, .demo .l3 { width: 300px; }
.demo .l2 { flex: 1; margin: 0 10px; }
.demo .l1 { display: flex; flex-direction: column; }
.demo .l1 .box-1 { flex: 1; }
.demo .l2 .box-1 { height: 100px; }
.demo .l2 .box-2 .hd { height: 60px; }
.demo .l2 .list { height: calc(100vh - 190px); min-height: 300px; overflow-y: auto; font-size: 20px; }
.demo .l3 { display: flex; flex-direction: column; }
.demo .l3 .box-1 { height: 100px; }
.demo .l3 .box-2 { height: 200px; }
.demo .l3 .box-3 { flex: 1; }
</style>

詳細文檔&代碼demo，可查看：https://codepen.io/pannysp/pen/QWOWYEo

節課，我們學習 CSS 填充屬性和 CSS 寬度與高度屬性。

還是看這個例子，每個區塊除了設置外邊距，還有內容周圍的空間以及內容的寬高設置。

CSS 填充屬性用于在一個元素的內容周圍產生空間，也就是邊框內到內容外之間的距離?？梢酝ㄟ^ padding-top，padding-right，padding-bottom，padding-left 等屬性設置元素的上邊、右邊、下邊和左邊的內填充。

所有的 padding 屬性都有以下值：

length - 以 px、pt、cm 等為單位指定填充。比如 10px，24pt，0.5cm等。

% - 以父元素寬度的百分比來指定填充。比如 10%。

length 和 % 都可以取負值，表示減少內部填充的空間大小。

創建 018-css-padding-width-height 文件夾，在文件夾下創建 padding-width-height.html 文件，和 mystyle.css文件。打開 html，構建基礎代碼。引入外部樣式。添加一個 div 元素，填入一些文本。

打開 mystyle.css 文件，定義 div 選擇器，聲明樣式：border: 1px solid black，background-color: lightblue，padding-top: 50px，padding-right: 30px，padding-bottom: 50px，padding-left: 80px。

在瀏覽器中查看效果。在 Styles 頁簽里，點擊容器布局示意圖的 padding 區域，四個方向的內填充清楚顯示了。

CSS
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

為了簡化代碼，可以在一個 padding 屬性中指定所有的填充屬性。

如果 padding 取四個值，比如 padding： 25px 50px 75px 100px，則表示：頂部填充為 25px，右邊填充 50px，底部填充 75px，左邊填充 100px。注意書寫順序是上右下左，每個值用空格隔開。

如果 padding 取三個值，比如 padding: 25px 50px 75px，則表示：頂部填充 25px，左右兩邊填充 50px，底部填充 75px。

如果 padding 取兩個值，比如 padding: 25px 50px，則表示：頂部和底部填充 25px，左右兩邊填充 50px。

如果 padding 取一個值，比如 padding: 25px，則表示：所有四個方向填充都是25px。

改寫一下填充的樣式。注釋掉原來的代碼，重新定義樣式：padding: 50px 30px 50px 80px。

我們看，效果是一樣的！

如果一個元素有指定的寬度，那么加在該元素上的填充，就會加到該元素的總寬度上。

我們來驗證一下。

在HTML里添加一個 h1 標簽，填入一些文本。在CSS里定義 h1 選擇器，把 div 元素的邊框和背景樣式拷貝過來，再給它添加樣式 width: 300px。也給 div 添加一個 width: 300px 的樣式。

看效果，div 比 h1 明顯寬很多，因為左右的內填充會增加容器的寬度。h1 的寬度為 300+2，共302px，div 的寬度為 300+30+80+2，共 412px。

CSS
h1 {
  width: 300px;
  border: 1px solid black;
  background-color: lightblue;
}
div {
  width: 300px;
  border: 1px solid black;
  background-color: lightblue;
  /* padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px; */
  padding: 50px 30px 50px 80px;
}

接下來，我們研究 CSS 的 width 和 height 屬性，它們用于設置一個元素的寬度和高度。在前面的很多案例里都使用過它們了。

高度和寬度屬性不包括 margin、border 和 padding 區域，只是用來定義元素的內容尺寸?？梢栽O置的值有：

auto - 這是默認值。瀏覽器會計算出高度和寬度。

length - 以 px、cm 等為單位定義高度和寬度。比如 200px，30cm等。

% - 以父元素寬度的百分比來定義高度和寬度。比如 20%。

initial[??n??l] - 將高度和寬度設置為默認值。實際上就是 auto 了。

比如，將 div 的寬度值定義為 50%。

再看一下效果，div 里的文本內容的寬度，就等于當前頁面寬度的一半。

再次強調一下，width 和 height 屬性是不包含內填充、邊框和外邊距的。比如，此時的 div 容器總寬度是大于頁面寬度 50% 的。

文章配套視頻鏈接： https://www.bilibili.com/video/BV1oU4y1278g/?p=80