構建靜態頁面之 [ 佈局 ]

時間 2019-12-05

標籤構建靜態頁面佈局欄目網站開發简体版

原文原文鏈接

佈局

描述

表示對頁面中的顯示效果進行一些排列瀏覽器
- 水平方向居中
- 垂直方向居中
- 居中佈局

水平方向居中

第一種方式

水平居中 + 行內塊級元素（text-align: center + display: inline-block）

<head>
    <meta charset="UTF-8">
    <title>水平居中的第一種方法</title>
    <style>
        /*
            text-align: center + display: inline-block
            * 該方法需做用在父子結構中
            * 爲父級設置text-align屬性、爲子級設置display屬性
            注意的問題：
            * text-align屬性
             * 是設置文本內容對齊方式的，又是繼承屬性，會連後代元素一同設置
            * display屬性
             * 要實現水平居中就得改變元素類型爲行內塊級，也會有行內塊級自己的一些問題
         */
        #d1 {
            height: 200px;
            background-color: red;
            /* 爲父級設置text-align屬性 */
            text-align: center;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 爲子級設置display屬性 */
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

第二種方式

外邊距特性（margin: 0 auto）

<head>
    <meta charset="UTF-8">
    <title>水平居中的第二種方式</title>
    <style>
        /*
            margin: 0 auto
            * 能夠利用外邊距的特性實現水平居中
            * display屬性的屬性值只能是block或table
         */
        #d1 {
            width: 100%;
            height: 200px;
            background-color: red;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 設置display屬性的屬性值爲 block 或 table */
            display: block;
            /* 利用外邊距實現水平居中 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

第三種方式

定位（position屬性 + transform屬性）

<head>
    <meta charset="UTF-8">
    <title>水平居中的第三種方式</title>
    <style>
        /*
            position屬性 + transform屬性
            * 能夠使用定位屬性實現水平居中
            * 在使用絕對定位時，注意目標元素的父級元素也要開啓定位
            * 也能夠使用相對定位，相對定位是相對於自身作定位，父級元素能夠不用開啓定位
         */
        #d1 {
            width: 100%;
            height: 200px;
            background-color: red;
            /* 父級開啓定位 - 配合子級開啓絕對定位 */
            position: relative;
        }
        /* 絕對定位的方法 */
        #d2 {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 開啓絕對定位實現水平居中 */
            position: absolute;
            left: 50%;
            /* transform屬性 - 用於調整元素的顯示位置 */
            transform: translateX(-50%);
        }
        /* 相對定位的方法 */
        #d3 {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 開啓相對定位實現水平居中 */
            position: relative;
            left: 50%;
            /* transform屬性 - 用於調整元素的顯示位置 */
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
<div id="d3"></div>
</body>

垂直方向居中

第一種方式

定義元素類型 + 垂直居中（display: table-cell + vertical-align: middle）

<head>
    <meta charset="UTF-8">
    <title>垂直居中的第一種方式</title>
    <style>
        /*
            display: table-cell + vertical-align: middle
            * 該方法只能使用在目標元素的父級元素上
            * display: table-cell - 將元素是定義爲表格中的單元格
            * vertical-align: middle - 設置垂直居中
         */
        #d1 {
            width: 200px;
            height: 800px;
            background-color: red;
            /* 將目標元素定義爲單元格 */
            display: table-cell;
            /* 設置垂直居中 */
            vertical-align: middle;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

第二種方式

定位（position屬性 + transform屬性）

<head>
    <meta charset="UTF-8">
    <title>垂直居中的第二種方式</title>
    <style>
        /*
            position屬性 + transform屬性
            * 能夠使用定位屬性實現垂直居中
            * 在使用絕對定位時，注意目標元素的父級元素也要開啓定位
            * 也能夠使用相對定位，相對定位是相對於自身作定位，父級元素能夠不用開啓定位
         */
        #d1 {
            width: 200px;
            height: 800px;
            background-color: red;
            /* 父級開啓定位 - 配合子級開啓絕對定位 */
            position: relative;
        }
        /* 絕對定位的方法 */
        #d2 {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 開啓絕對定位實現垂直居中 */
            position: absolute;
            left: 50%;
            /* transform屬性 - 用於調整元素的顯示位置 */
            transform: translateY(-50%);
        }
        /* 相對定位的方法 */
        #d3 {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 開啓相對定位實現垂直居中 */
            position: relative;
            left: 50%;
            /* transform屬性 - 用於調整元素的顯示位置 */
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
<div id="d3"></div>
</body>

居中佈局

表示水平方向和垂直方向同時居中

第一種方式

水平方向 - 外邊距（margin: 0 auto）
垂直方向 - 定義元素類型 + 垂直居中（display: table-cell + vertical-align: middle）

<head>
    <meta charset="UTF-8">
    <title>居中佈局的第一種方式</title>
    <style>
        /*
            居中佈局 - 表示水平方向和垂直方向同時居中
            * 水平方向 - margin: 0 auto
            * 垂直方向 - display: table-cell + vertical-align: middle
         */
        #d1 {
            width: 800px;
            height: 600px;
            background-color: lightgray;
            /* 父級元素設置垂直居中 */
            display: table-cell;
            vertical-align: middle;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            /* 子級元素設置水平居中 */
            display: table;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

第二種方式

定位（position屬性 + transform屬性）

<head>
    <meta charset="UTF-8">
    <title>居中佈局的第二種方式</title>
    <style>
        /*
            position屬性 + transform屬性
            * 能夠使用定位屬性實現居中佈局的效果
            * 在使用絕對定位時，注意目標元素的父級元素也要開啓定位
            * 也能夠使用相對定位，相對定位是相對於自身作定位，父級元素能夠不用開啓定位
         */
        #d1 {
            width: 800px;
            height: 800px;
            background-color: red;
            /* 開啓定位 - 配合子級元素開啓絕對定位 */
            position: relative;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 開啓絕對定位實現居中佈局效果 */
            position: absolute;
            left: 50%;
            top: 50%;
            /* 調整元素的顯示位置 */
            transform: translate(-50%, -50%);
        }
        /* 相對定位的方式 */
        #d3 {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 開啓相對定位實現居中佈局的效果 */
            position: relative;
            left: 50%;
            top: 50%;
            /* 調整元素的顯示位置 */
            transform: translate(-50%, -50%);
        }

    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
<div id="d3"></div>
</body>

兩列布局

表示水平排列的元素佈局方式

第一種方式

浮動 + 外邊距

<head>
    <meta charset="UTF-8">
    <title>第一種兩列布局</title>
    <style>
        /*
            兩列布局 - 表示水平排列的元素佈局方式
            * 一列定寬，一列自適應
            * 浮動 + 外邊距
         */
        div {
            height: 300px;
        }
        .d1 {
            /* 設置定寬 */
            width: 300px;
            background-color: red;
            /* 設置浮動 */
            float: left;
        }
        .d2 {
            width: 100%;
            background-color: green;
            /*
                使用外邊距調整顯示位置
                * 調整的距離等於定寬的寬度
             */
            margin-left: 300px;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>

第二種方式

經過浮動 + 外邊距 + 父級容器實現兩列布局

<head>
    <meta charset="UTF-8">
    <title>第二種兩列布局</title>
    <style>
        /*
            經過浮動 + 外邊距 + 父級容器實現兩列布局
            * 爲自適應的列添加父級容器
            * 經過外邊距調整位置讓元素顯示在一列中（調整的數值爲等於定寬的寬度）
         */
        .d1, .d2 {
            height: 300px;
        }
        .d1 {
            /* 定寬 */
            width: 300px;
            background-color: red;
            float: left;
            /* 開啓定位 - 用於提升優先層次 */
            position: relative;
        }
        .rongqi {
            background-color: blue;
            float: right;
            /* 設置浮動後的寬度 */
            width: 100%;
            /* 經過外邊距控制當前元素的顯示位置 */
            margin-left: -300px;
        }
        .d2 {
            background-color: green;
            margin-left: 300px;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="rongqi">
    <div class="d2"></div>
</div>
</body>

第三種方式

浮動 + BFC模式

<head>
    <meta charset="UTF-8">
    <title>第三種兩列布局</title>
    <style>
        /*
            第三種兩列布局
            * 浮動 + BFC模式
         */
        div {
            height: 300px;
        }
        .d1 {
            /* 設置定寬 */
            width: 300px;
            background-color: red;
            /* 設置浮動 */
            float: left;
        }
        .d2 {
            background-color: green;
            /* 開啓BFC模式 - 解決浮動後的堆疊顯示問題 */
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>

第四種方式

經過display屬性實現兩列布局

<head>
    <meta charset="UTF-8">
    <title>第四種兩列布局</title>
    <style>
        /*
            經過display屬性實現兩列布局
            * 將指定元素定義爲表格中的單元格
            * 將指定元素的父級元素定義爲表格
            * 經過表格特性實現兩列不急
         */
        .rongqi {
            /* 經過display屬性定義爲表格 */
            display: table;
            table-layout: fixed;
            width: 100%;
        }
        .d1, .d2 {
            height: 300px;
            /* 經過display屬性定義爲表格中的單元格 */
            display: table-cell;
        }
        .d1 {
            /* 定寬 */
            width: 300px;
            background-color: red;
        }
        /* 因爲表格中的單元格的特性，自適應的寬度會自行分配 */
        .d2 {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="rongqi">
    <div class="d1"></div>
    <div class="d2"></div>
</div>
</body>

三列布局

右邊自適應三列布局
中間自適應三列布局

右邊自適應三列布局

在兩列布局的基礎上在加上一列定寬
能夠按照兩列布局的方式來實現

<head>
    <meta charset="UTF-8">
    <title>三列布局 - 右自適應</title>
    <style>
        /*
            右自適應的三列布局
            * 能夠按照兩列布局的方式來實現
         */
        body {
            margin: 0;
        }
        div {
            height: 300px;
        }
        .left {
            /* 設置浮動 - 讓元素在一行中顯示 */
            float: left;
            /* 設置定寬 */
            width: 200px;
            background-color: red;
        }
        .center {
            /* 設置浮動 - 讓元素在一行中顯示 */
            float: left;
            /* 設置定寬 */
            width: 200px;
            background-color: green;
        }
        .right {
            background-color: blue;
            /* 設置外邊距 - 調整覆蓋問題，調整的距離爲兩列定寬的寬度之和 */
            margin-left: 400px;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>

中間自適應三列布局

第一種方式

改變HTML代碼順序結構

<head>
    <meta charset="UTF-8">
    <title>三列布局 - 中間自適應</title>
    <style>
        /*
            中間自適應的三列布局 - 第一種方式
            * 因爲浮動的問題右側定寬的元素沒法和其餘元素顯示在一行中
            * 能夠經過改變HTML代碼順序結構來解決
            * 在對中間自適應的列進行壓縮，解決覆蓋問題
         */
        body {
            margin: 0;
        }
        div {
            height: 400px;
        }
        .left {
            /* 設置浮動 - 讓元素顯示在一行 */
            float: left;
            /* 設置定寬 */
            width: 200px;
            background-color: red;
        }
        .center {
            background-color: blue;
            /* 設置外邊距 - 解決覆蓋問題 */
            margin: 0 200px 0;
        }
        .right {
            /* 設置浮動 - 讓元素顯示在一行 */
            float: right;
            /* 設置定寬 */
            width: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="left"></div>
<!-- 改變HTML代碼順序結構 -->
<div class="right"></div>
<div class="center"></div>
</body>

第二種方式

爲中間自適應的區域添加子級,解決覆蓋問題

<head>
    <meta charset="UTF-8">
    <title>三列布局 - 中間自適應</title>
    <style>
        /*
            中間自適應的三列布局 - 第二種方式
            * 爲中間自適應的區域添加子級
            * 調整子級的顯示區域，解決覆蓋問題
            * 對三列設置浮動，利用外邊距調整位置使其顯示在一行中
         */
        body {
            margin: 0;
        }
        div {
            height: 400px;
        }
        .left {
            /* 設置浮動 - 讓元素顯示在一行 */
            float: left;
            /* 設置定寬 */
            width: 200px;
            /* 開啓定位 - 用於提升覆蓋後的顯示層級 */
            position: relative;
            background-color: red;
        }
        .center {
            background-color: blue;
            /* 設置浮動 - 用於讓後面的下一個元素能夠顯示在同一行 */
            float: left;
            /* 設置寬度 - 自適應不能是定寬 */
            width: 100%;
            /* 利用外邊距移動元素，使其在一行中顯示 */
            margin-left: -200px;
        }
        .right {
            /* 設置浮動 - 讓元素顯示在一行 */
            float: left;
            /* 設置定寬 */
            width: 200px;
            /* 利用外邊距移動元素，使其在一行中顯示 */
            margin-left: -200px;
            background-color: green;
        }
        .neirong {
            /* 設置外邊距壓縮元素，解決覆蓋問題 */
            margin: 0 200px 0;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="center">
    <!-- 經過子級解決覆蓋問題 -->
    <div class="neirong"></div>
</div>
<div class="right"></div>
</body>

第三種方式

簡易聖盃佈局

<head>
    <meta charset="UTF-8">
    <title>三列布局 - 中間自適應</title>
    <style>
        /*
            中間自適應的三列布局 - 第三種方式
            * 聖盃佈局
             * 添加總體容器
             * 經過設置內邊距擠壓出兩邊定寬的區域
             * 在經過定位將定寬的兩列移動到指定區域，解決覆蓋問題
         */
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
        }
        .rongqi {
            /* 設置內邊距 - 擠壓出兩側定寬的顯示區域 */
            padding: 0 200px 0;
        }
        .rongqi > div {
            height: 400px;
        }
        .left {
            /* 設置浮動 - 讓元素顯示在一行 */
            float: left;
            /* 設置定寬 */
            width: 200px;
            /* 經過定位將元素移動到指定區域解決覆蓋問題 */
            position: relative;
            left: -200px;
            background-color: red;
        }
        .center {
            background-color: blue;
            /* 設置浮動 - 用於讓後面的下一個元素能夠顯示在同一行 */
            float: left;
            /* 設置寬度 - 自適應不能是定寬 */
            width: 100%;
            /* 利用外邊距移動元素，使其在一行中顯示 */
            margin-left: -200px;
        }
        .right {
            /* 設置浮動 - 讓元素顯示在一行 */
            float: left;
            /* 設置定寬 */
            width: 200px;
            /* 利用外邊距移動元素，使其在一行中顯示 */
            margin-left: -200px;
            /* 經過定位將元素移動到指定區域解決覆蓋問題 */
            position: relative;
            right: -200px;
            background-color: green;
        }
    </style>
</head>
<body>
<!-- 添加總體容器 -->
<div class="rongqi">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>

第四種方式

簡易雙飛翼佈局

<head>
    <meta charset="UTF-8">
    <title>三列布局 - 中間自適應</title>
    <style>
        /*
            中間自適應的三列布局 - 第四種方式
            * 雙飛翼佈局
             * 改變HTML代碼順序結構
             * 爲中間自適應的區域添加子級
             * 調整子級的顯示區域，解決覆蓋問題
             * 對三列設置浮動，利用外邊距調整位置使其顯示在一行中
         */
        body {
            margin: 0;
        }
        div {
            height: 400px;
        }
        .left {
            /* 設置浮動 - 讓元素顯示在一行 */
            float: left;
            /* 設置定寬 */
            width: 200px;
            /* 利用外邊距移動元素，使其在一行中顯示 */
            margin-left: -100%;
            background-color: red;
        }
        .center {
            background-color: blue;
            /* 設置浮動 - 用於讓後面的下一個元素能夠顯示在同一行 */
            float: left;
            /* 設置寬度 - 自適應不能是定寬 */
            width: 100%;
        }
        .right {
            /* 設置浮動 - 讓元素顯示在一行 */
            float: left;
            /* 設置定寬 */
            width: 200px;
            /* 利用外邊距移動元素，使其在一行中顯示 */
            margin-left: -200px;
            background-color: green;
        }
        .neirong {
            /* 設置外邊距壓縮元素，解決覆蓋問題 */
            margin: 0 200px 0;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!-- 改變HTML代碼順序結構 - 便於瀏覽器搜索抓取 -->
<div class="center">
    <!-- 經過子級解決覆蓋問題 -->
    <div class="neirong"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>

定分佈局

表示子級元素平均分配父級元素的寬度佈局
- 沒有間隙的等分佈局
- 有間隙的等分佈局

沒有間隙的等分佈局

經過百分比來設置

<head>
    <meta charset="UTF-8">
    <title>等分佈局</title>
    <style>
        /*
            等分佈局 - 表示子級元素平均分配父級元素的寬度
            * 經過百分比來設置
             * 用父級元素的寬度（100%）除以子級元素的個數，獲得每一個子級元素所佔的百分比寬度值
         */
        body {
            margin: 0;
        }
        div {
            /* 設置浮動 - 讓元素水平排列 */
            float: left;
            /* 設置百分比寬度值會自行等分在父級元素中的所佔區域 */
            width: 25%;
            height: 400px;
        }
        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .d3 {
            background-color: blue;
        }
        .d4 {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</body>

經過display屬性來實現等分佈局

<head>
    <meta charset="UTF-8">
    <title>等分佈局</title>
    <style>
        /*
            等分佈局 - 表示子級元素平均分配父級元素的寬度
            * 經過display屬性來實現等分佈局
             * 爲指定元素添加父級元素，並經過display屬性將其定義爲表格（table屬性值）
             * 經過display屬性將指定元素定義爲表格中的單元格（table-cell屬性值）
             * 經過表格的特性實現等分佈局
         */
        body {
            margin: 0;
        }
        .table {
            /* 將該元素定義爲表格 */
            display: table;
            /* 設置寬度 - 沒有寬度表格沒有顯示 */
            width: 100%;
        }
        .table > div {
            /*
                將該元素定義爲單元格
                 * 不須要設置單元格的寬度，經過表格的特性，會自行等分表格的寬度
             */
            display: table-cell;
            height: 400px;
        }
        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .d3 {
            background-color: blue;
        }
        .d4 {
            background-color: yellow;
        }
    </style>
</head>
<body>
<!-- 添加容器 - 定義爲表格 -->
<div class="table">
    <!-- 再將指定元素定義爲表格中的單元格 -->
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
</div>
</body>

有間隙的等分佈局

添加容器 + 外邊距 + overflow屬性

<head>
    <meta charset="UTF-8">
    <title>等分佈局 - 有間距</title>
    <style>
        /*
            有間距的等分佈局 - 第一種方式
            * 爲指定元素添加總體容器，並在總體容器之上添加可視容器
            * 總體容器的寬度等於 指定元素的寬度之和 加上 指定元素的外邊距之和
            * 可視容器的寬度等於 指定元素的寬度之和 加上 指定元素的外邊距之和減一（一個元素的外邊距）
            * 經過對可視容器設置overflow屬性來去除對出的外邊距
         */
        body {
            margin: 0;
        }
        .keshi {
            /* 設置可視容器的寬度 - 四個指定元素的寬度 + 三個指定元素的外邊距 */
            width: 1260px;
            /*
                用解決內容溢出的方式去除第四的外邊距
                同時解決因爲子級設置浮動引出的高度塌陷問題
             */
            overflow: hidden;
            border: 1px solid blueviolet;
        }
        .keshi > .rongqi {
            /* 設置總體容器寬度 - 四個指定元素的寬度 + 四個指定元素的外邊距 */
            width: 1280px;

            /* 設置高度解決高度塌陷 */
            /*height: 400px;*/

            /* 經過設置浮動開啓BFC模式，解決高度塌陷 */
            float: left;
            background-color: #ff6700;
        }
        .keshi > .rongqi > div {
            /* 設置浮動 - 讓元素水平排列顯示 */
            float: left;
            width: 300px;
            height: 400px;
            /* 經過外邊距設置元素間的間隙 */
            margin-right: 20px;
        }
        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .d3 {
            background-color: blue;
        }
        .d4 {
            background-color: yellow;
        }
    </style>
</head>
<body>
<!-- 添加可視容器 -->
<div class="keshi">
    <!-- 添加總體容器 -->
    <div class="rongqi">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
        <div class="d4"></div>
    </div>
</div>
</body>

添加容器 + 外邊距 + 定位

<head>
    <meta charset="UTF-8">
    <title>等分佈局 - 有間距</title>
    <style>
        /*
            有間距的等分佈局 - 第二種方式
            * 爲指定元素添加總體容器，並在總體容器之上添加可視容器
            * 總體容器的寬度等於 指定元素的寬度之和 加上 指定元素的外邊距之和
            * 可視容器的寬度等於 指定元素的寬度之和 加上 指定元素的外邊距之和減一（一個元素的外邊距）
            * 對總體容器開啓定位，經過調整定位的顯示位置來去除多餘的外邊距
         */
        body {
            margin: 0;
        }
        .keshi {
            /* 設置可視容器的寬度 - 四個指定元素的寬度 + 三個指定元素的外邊距 */
            width: 1260px;
            border: 1px solid blueviolet;
        }
        .keshi > .rongqi {
            /* 設置總體容器寬度 - 四個指定元素的寬度 + 四個指定元素的外邊距 */
            width: 1280px;
            /* 開啓BFC模式解決高度塌陷 */
            overflow: hidden;
            /* 開啓相對定位 */
            position: relative;
            /* 定位的距離等於外邊距的數值 */
            left: -20px;
            background-color: #ff6700;
        }
        .keshi > .rongqi > div {
            /* 設置浮動 - 讓元素水平排列顯示 */
            float: left;
            width: 300px;
            height: 400px;
            /* 經過外邊距設置元素間的間隙 */
            margin-left: 20px;
        }
        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .d3 {
            background-color: blue;
        }
        .d4 {
            background-color: yellow;
        }
    </style>
</head>
<body>
<!-- 添加可視容器 -->
<div class="keshi">
    <!-- 添加總體容器 -->
    <div class="rongqi">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
        <div class="d4"></div>
    </div>
</div>
</body>

等高佈局

等高佈局 - 表示在一行中的元素擁有相同的高度code
- 簡單粗暴的方式 - 直接設置統一高度
- 經過display屬性設置等高佈局
- 經過設置內、外邊距進行擠壓實現僞等高

經過display屬性設置等高佈局

爲指定元素添加總體容器，而且設置display屬性，定義爲表格（table屬性值）
爲指定元素設置display屬性，定義爲表格中的單元格（table-cell屬性值）
經過表格的特性實現等高佈局

<head>
    <meta charset="UTF-8">
    <title>等高佈局</title>
    <style>
        /*
            等高佈局 - 表示在一行中的元素擁有相同的高度
            * 簡單粗暴的方式 - 直接設置統一高度

            * 經過display屬性設置等高佈局
             * 爲指定元素添加總體容器，而且設置display屬性，定義爲表格（table屬性值）
             * 爲指定元素設置display屬性，定義爲表格中的單元格（table-cell屬性值）
             * 經過表格的特性實現等高佈局
         */
        body {
            margin: 0;
        }
        .rongqi {
            /* 將總體容器定義爲表格 */
            display: table;
        }
        .rongqi > div {
            /* 將指定元素定義爲單元格 */
            display: table-cell;
            width: 300px;
        }
        .left {
            background-color: red;
        }
        .right {
            background-color: green;
        }
    </style>
</head>
<body>
<!-- 添加總體容器 - 將容器定義爲表格 -->
<div class="rongqi">
    <!-- 將指定元素定義爲單元格 -->
    <div class="left">我是誰、我在那、我要幹啥</div>
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet blanditiis cum enim inventore iure nihil odit, optio porro quasi reiciendis similique sit tempora voluptate voluptates voluptatibus. Amet, iure!</div>
</div>
</body>

經過設置內、外邊距進行擠壓實現僞等高

爲指定元素設置下內邊距，向下拉伸
爲指定元素設置下外邊距（負值），向上擠壓
爲總體容器設置overflow屬性，隱藏多餘的部分實現僞等高佈局

<head>
    <meta charset="UTF-8">
    <title>等高佈局</title>
    <style>
        /*
            等高佈局 - 表示在一行中的元素擁有相同的高度
            * 經過設置 內、外邊距 進行擠壓實現僞等高
             * 爲指定元素設置下內邊距，向下拉伸
             * 爲指定元素設置下外邊距（負值），向上擠壓
             * 爲總體容器設置overflow屬性，隱藏多餘的部分實現僞等高佈局
         */
        body {
            margin: 0;
        }
        .rongqi {
            width: 600px;
            /* 解決內容溢出 - 實現僞等高 */
            overflow: hidden;
        }
        .rongqi > div {
            float: left;
            width: 300px;
            /* 設置下內邊距 */
            padding-bottom: 999px;
            /* 設置下外邊距 */
            margin-bottom: -999px;
        }
        .left {
            background-color: red;
        }
        .right {
            background-color: green;
        }
    </style>
</head>
<body>
<!-- 添加總體容器 -->
<div class="rongqi">
    <div class="left">我是誰、我在那、我要幹啥</div>
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet blanditiis cum enim inventore iure nihil odit, optio porro quasi reiciendis similique sit tempora voluptate voluptates voluptatibus. Amet, iure!</div>
</div>
</body>

全局佈局

表示對整個頁面進行佈局orm
- 能夠經過固定定位來實現

<head>
    <meta charset="UTF-8">
    <title>全屏佈局</title>
    <style>
        /*
            全局佈局 - 表示對整個頁面進行佈局
            * 能夠經過固定定位來實現
            * 當偏移量的left和right的屬性值都爲 0 時，能夠不設置寬度
            * 設置高度爲百分值時，相對父級不能是頁面
         */
        body {
            margin: 0;
        }
        header {
            /* 設置定高 */
            height: 100px;
            /* 設置固定定位 - 將頂部內容固定在頁面頂部 */
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            background-color: #c9c9c9;
        }
        main {
            /* 設置固定定位 - 經過固定定位實現主體內容自適應 */
            position: fixed;
            left: 0;
            top: 100px;
            right: 0;
            bottom: 100px;
            overflow: auto;
            background-color: #00c3f5;
        }
        main > .left {
            /* 設置定寬 */
            width: 300px;
            height: 100%;
            position: fixed;
            background-color: #6fc749;
        }
        main > .right {
            height: 1000px;
            /* 經過外邊距解決覆蓋問題 */
            margin-left: 300px;
            background-color: yellow;
        }
        footer {
            height: 100px;
            /* 設置固定定位 - 將底部內容固定在頁面底部 */
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: #666666;
        }
    </style>
</head>
<body>
<!-- 頁面頂部 -->
<header></header>
<!-- 頁面主體 -->
<main>
    <div class="left"></div>
    <div class="right"></div>
</main>
<!-- 頁面底部 -->
<footer></footer>
</body>