CSS布局練習(xí)總結(jié)

為了提高工作效率，不在CSS布局上多次耗費(fèi)時(shí)間，故記錄此練習(xí)筆記衙伶。借鑒了大神【浪里行舟】的博客符匾，文末有鏈接叨咖。

CSS布局概要：

CSS布局思維導(dǎo)圖

demo效果頁(yè)面

單列布局1
單列布局2
兩列自適應(yīng)布局flex
兩列自適應(yīng)布局float
兩列自適應(yīng)布局grid
三欄布局：圣杯布局
三欄布局：雙飛翼布局
三欄布局：absolute
三欄布局：flex
三欄布局：float
三欄布局：grid
三欄布局：table
等高布局：border+position
等高布局：padding+margin
等高布局：仿table
粘連布局

一、單列布局

1、單列布局：header-content-footer等寬

原理：將header-content-footer統(tǒng)一設(shè)置相等的width屬性（屏幕小于屬性值時(shí)會(huì)出現(xiàn)滾動(dòng)條）甸各，或者max-width屬性（屏幕小于屬性值時(shí)不會(huì)出現(xiàn)滾動(dòng)條）垛贤，然后設(shè)置margin: 0 auto實(shí)現(xiàn)居中效果

效果：

單列布局-等寬

代碼：訪問(wèn)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>header-content-footer等寬的單列布局</title>
    <style>
        .wrap .header {
            height: 64px;
            max-width: 960px;
            background-color: skyblue;
            margin: 0 auto;

            line-height: 64px;
            text-align: center;
        }

        .wrap .content {
            height: 500px;
            max-width: 960px;
            background-color: #f60;
            margin: 0 auto;

            line-height: 500px;
            text-align: center;
        }

        .wrap .footer {
            height: 64px;
            max-width: 960px;
            background-color: #66595e;
            margin: 0 auto;

            line-height: 64px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="header">頭上一片青天</div>
    <div class="content">心中一份掛念</div>
    <div class="footer">敢問(wèn)路在何方</div>
</div>
</body>
</html>

2、單列布局：header-footer等寬,content略窄的單列布局

原理：header-footer內(nèi)容寬度可以不設(shè)置趣倾，利用塊級(jí)元素充滿整個(gè)屏幕聘惦，但是header-conter-footer的內(nèi)容區(qū)設(shè)置等width,并用margin:0 auto實(shí)現(xiàn)居中。

效果：

單列布局-不等寬

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>header-footer等寬儒恋，content窄的單列布局</title>
    <style>
        .wrap .header {
            height: 80px;
            max-width: 960px;
            background-color: blue;
            position: relative;
        }

        .wrap .header .nav {
            height: 64px;
            max-width: 800px;
            background-color: skyblue;

            line-height: 64px;
            margin: auto;
            text-align: center;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .wrap .content {
            height: 500px;
            max-width: 800px;
            background-color: #f60;
            margin: 0 auto;

            line-height: 500px;
            text-align: center;
        }

        .wrap .footer {
            height: 64px;
            max-width: 960px;
            background-color: #66595e;
            margin: 0 auto;

            line-height: 64px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="header">
        <div class="nav">頭上一片青天</div>
    </div>
    <div class="content">心中一份掛念</div>
    <div class="footer">敢問(wèn)路在何方</div>
</div>
</body>
</html>

二善绎、兩列自適應(yīng)布局

兩列自適應(yīng)布局是指一列由內(nèi)容撐開(kāi)，另一列撐滿剩余寬度的布局方式

1诫尽、兩列自適應(yīng)布局：float + overflow:hidden

- 普通兩列布局：float + margin
- 自適應(yīng)的兩列布局：float + overflow:hidden

自適應(yīng)的兩列布局禀酱，通過(guò)overflow觸發(fā)BFC，BFC不會(huì)重疊浮動(dòng)元素牧嫉。由于設(shè)置overflow:hidden并不會(huì)觸發(fā)IE6-瀏覽器的haslayout屬性剂跟，所以需要設(shè)置zoom:1來(lái)兼容IE6-瀏覽器。

效果：

兩列自適應(yīng)布局：float + overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>兩列自適應(yīng)布局:float+overflow:hidden </title>
    <style>
        .wrap {
            overflow: hidden;
        }

        .left {
            background-color: cyan;
            margin-right: 10px;
            float: left;
        }

        .right {
            background-color: aliceblue;
            margin-left: 10px;

            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        <h2>左青龍</h2>
        <h2>左青龍</h2>
        <h2>左青龍</h2>
        <h2>左青龍</h2>
        <h2>左青龍</h2>
    </div>
    <div class="right">
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
    </div>
</div>
</body>
</html>

2酣藻、兩列自適應(yīng)布局：flex布局

Flex布局曹洽，也叫彈性盒子布局。

效果：

兩列自適應(yīng)布局-flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>兩列自適應(yīng)布局:flex</title>
    <style>
        .wrap {
            display: flex;
        }

        .left {
            background-color: cyan;
            margin-right: 10px;
            
            flex: 1; // 去掉則左邊為自適應(yīng)大小
        }

        .right {
            background-color: aliceblue;
            margin-left: 10px;

            flex: 1;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        <h2>左青龍</h2>
        <h2>左青龍</h2>
        <h2>左青龍</h2>
        <h2>左青龍</h2>
        <h2>左青龍</h2>
    </div>
    <div class="right">
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
    </div>
</div>
</body>
</html>

3辽剧、兩列自適應(yīng)布局：grid布局

Grid布局送淆，基于網(wǎng)格的二維布局系統(tǒng)，用來(lái)優(yōu)化用戶界面設(shè)計(jì)抖仅。

效果：

兩列自適應(yīng)布局-grid布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>兩列自適應(yīng)布局:grid</title>
    <style>
        .wrap {
            display: grid;
            grid-gap: 20px;
            /*grid-template-columns: auto 1fr; // 左自適應(yīng)+右鋪滿*/
            grid-template-columns: 1fr auto; // 右自適應(yīng)+左鋪滿
        }

        .left {
            background-color: cyan;
        }

        .right {
            background-color: aliceblue;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        <h2>左青龍</h2>
        <h2>左青龍</h2>
        <h2>左青龍</h2>
        <h2>左青龍</h2>
        <h2>左青龍</h2>
    </div>
    <div class="right">
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
    </div>
</div>
</body>
</html>

三坊夫、三欄布局

特征：中間列自適應(yīng)寬度，旁邊兩側(cè)固定寬度

案例：高度已知撤卢，其中左欄环凿、右欄寬度各為200px,中間自適應(yīng)，

1放吩、浮動(dòng)布局

原理：左邊欄float:left智听，右邊欄float: right，中間不管渡紫。

效果：

三欄布局-浮動(dòng)布局

]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄布局：float布局</title>
    <style>
        * {
            margin: 0;
        }
        aside.left {
            background-color: seagreen;
            float: left;
            width: 200px;
        }

        aside.right {
            background-color: whitesmoke;
            float: right;
            width: 200px;
        }

        article.center {
            background-color: bisque;
        }
    </style>
</head>
<body>
<main>
    <aside class="left">
        <h2>左青龍</h2>
        <h2>左青龍</h2>
        <h2>左青龍</h2>
        <h2>左青龍</h2>
        <h2>左青龍</h2>
    </aside>
    <!-- 右欄部分要寫(xiě)在中間內(nèi)容之前-->
    <!-- 右欄部分要寫(xiě)在中間內(nèi)容之前-->
    <!-- 右欄部分要寫(xiě)在中間內(nèi)容之前-->
    <aside class="right">
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
    </aside>

    <article class="center">
        <h2>中間住著二百五</h2>
        <h2>中間住著二百五</h2>
        <h2>中間住著二百五</h2>
        <h2>中間住著二百五</h2>
        <h2>中間住著二百五</h2>
    </article>

</main>
</body>
</html>

浮動(dòng)布局到推，DOM結(jié)構(gòu)必須先寫(xiě)浮動(dòng)部分，然后中間塊惕澎，否則有浮動(dòng)會(huì)調(diào)到下一行莉测。
浮動(dòng)布局的優(yōu)點(diǎn)：簡(jiǎn)單，兼容性好
浮動(dòng)布局的缺點(diǎn)：浮動(dòng)布局脫離文檔流唧喉，需要清除浮動(dòng)捣卤，否則會(huì)帶來(lái)問(wèn)題忍抽，比如：父容器高度塌陷等。

2董朝、絕對(duì)定位布局

原理：left-center-right均絕對(duì)定位鸠项，然后設(shè)置中間欄的left和right屬性為左右留出空間。

效果：

三欄布局-絕對(duì)定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄布局：絕對(duì)定位布局</title>
    <style>
        * {
            margin: 0;
        }
        .left,.center,.right{
            position: absolute;
            height: 400px;
        }
        aside.left {
            background-color: bisque;
            left: 0;
        }

        article.center {
            background-color: aliceblue;
            left: 200px;
            right: 200px;
        }

        aside.right {
            background-color: whitesmoke;
            right: 0;
        }
    </style>
</head>
<body>
<main class="wrap">
    <aside class="left">
        <h3>有人喜歡大城市</h3>
    </aside>
    <article class="center">
        <h3>有人喜歡小城市</h3>
    </article>
    <aside class="right">
        <h3>我喜歡有你的城市</h3>
    </aside>
</main>
</body>
</html>

絕對(duì)定位布局子姜，優(yōu)點(diǎn)：方便快捷祟绊，問(wèn)題少
缺點(diǎn)：容器脫離文檔流，后代元素也脫離文檔流哥捕，高度位置的時(shí)候牧抽，有問(wèn)題，故該法有效性和可用性比較差遥赚。

3阎姥、flex布局

原理：直接設(shè)置父容器display:flex

效果：

三欄布局-flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄布局：flex布局</title>
    <style>
        *{
            margin: 0;
        }
        main.wrap{
            display: flex;
        }
        .left,.center,.right{
            height: 500px;
        }
        aside.left{
            background-color: #a5f5c7;
            width: 200px;
        }
        article.center{
            background-color: skyblue;
            flex: 1;
        }
        aside.right{
            background-color: #ff88b2;
            width: 200px;
        }
    </style>
</head>
<body>
<main class="wrap">
    <aside class="left">
        <h3>你站在橋上看風(fēng)景，</h3>
    </aside>
    <article class="center">
        <h3>看風(fēng)景人在樓上看你鸽捻。</h3>
    </article>
    <aside class="right">
        <h3>明月裝飾了你的窗子，</h3>
        <h3>你裝飾了別人的夢(mèng)泽腮。</h3>
    </aside>
</main>
</body>
</html>

flex布局為了解決上述兩種方式的不足出現(xiàn)的御蒲，是比較完美的一個(gè)。目前移動(dòng)端的布局也都是用flex诊赊。 flex的缺點(diǎn)就是IE10開(kāi)始支持厚满，但是IE10的是-ms形式的。

4碧磅、表格布局

原理：直接設(shè)置父容器display:table,子容器display:table-cell

效果：

三欄布局-table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄布局：table布局</title>
    <style>
        *{
            margin: 0;
        }
        main.wrap{
            display: table;
            width: 100%;
        }
        .left,.center,.right{
            height: 500px;
            display: table-cell;
        }
        aside.left{
            background-color: #a5f5c7;
            width: 200px;
        }
        article.center{
            background-color: skyblue;
        }
        aside.right{
            background-color: #ff88b2;
            width: 200px;
        }
    </style>
</head>
<body>
<main class="wrap">
    <aside class="left">
        <h3>我還是很喜歡你碘箍，</h3>
    </aside>
    <article class="center">
        <h3>像風(fēng)走了八千里，</h3>
    </article>
    <aside class="right">
        <h3>不問(wèn)歸期鲸郊。</h3>
    </aside>
</main>
</body>
</html>

表格布局的優(yōu)點(diǎn)：兼容性很好丰榴，在flex布局不兼容的時(shí)候，推薦用表格布局秆撮。有個(gè)特點(diǎn)四濒，當(dāng)內(nèi)容溢出時(shí)會(huì)自動(dòng)撐開(kāi)父容器。
缺點(diǎn)：1职辨、無(wú)法設(shè)置欄邊距 2盗蟆、對(duì)SEO不友好 3、當(dāng)其中一個(gè)單元格超出高度時(shí)舒裤，另外兩個(gè)欄也會(huì)跟著變高喳资。

5、grid布局

原理：直接設(shè)置父容器display:grid

效果：

三欄布局-grid布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄布局：grid布局</title>
    <style>
        *{
            margin: 0;
        }
        main.wrap{
            display: grid;
            grid-template-columns: 200px auto 200px;
            grid-template-rows: 500px;
        }
        .left,.center,.right{
            /*height: 500px;*/
        }
        aside.left{
            background-color: #a5f5c7;
        }
        article.center{
            background-color: skyblue;
        }
        aside.right{
            background-color: #ff88b2;
        }
    </style>
</head>
<body>
<main class="wrap">
    <aside class="left">
        <h3>我還是很喜歡你腾供，</h3>
    </aside>
    <article class="center">
        <h3>像吃了花椒的鄰居仆邓，</h3>
    </article>
    <aside class="right">
        <h3>麻了隔壁鲜滩。（??）</h3>
    </aside>
</main>
</body>
</html>

優(yōu)點(diǎn)：CSS Grid是創(chuàng)建網(wǎng)格布局最強(qiáng)大和最簡(jiǎn)單的工具。就像表格一樣宏赘，網(wǎng)格布局可以讓W(xué)eb設(shè)計(jì)師根據(jù)元素按列或行對(duì)齊排列绒北，但他和表格不同，網(wǎng)格布局沒(méi)有內(nèi)容結(jié)構(gòu)察署，從而使各種布局不可能與表格一樣闷游。例如，一個(gè)網(wǎng)格布局中的子元素都可以定位自己的位置贴汪，這樣他們可以重疊和類似元素定位脐往。
缺點(diǎn)：兼容性不好。IE10+上支持扳埂，而且也僅支持部分屬性业簿。

6、圣杯布局

特點(diǎn)：比較特殊的三欄布局阳懂，同樣也是兩邊固定寬度梅尤，中間自適應(yīng)，唯一區(qū)別是dom結(jié)構(gòu)必須是先寫(xiě)中間列部分岩调，這樣實(shí)現(xiàn)中間列可以優(yōu)先加載巷燥。

原理解讀：

1.全部設(shè)置float: left,center設(shè)置width:100%自適應(yīng)，left和right設(shè)置width:200px固定尺寸号枕。此時(shí)缰揪，left和right部分會(huì)跳到下一行

三欄布局-圣杯布局1

<style>
        * {
            margin: 0;
        }
        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;
        }

        article.center {
            background-color: skyblue;
            width: 100%;
            height: 300px;
        }

        aside.left {
            background-color: #a5f5c7;
            width: 200px;
        }

        aside.right {
            background-color: #ff88b2;
            width: 200px;
        }
    </style>

2.再設(shè)置左右的margin為負(fù)值，讓左右部分與中間處于同一行葱淳。此時(shí)钝腺，左右會(huì)浮在中間上方，覆蓋中間部分赞厕。

三欄布局-圣杯布局2

<style>
        * {
            margin: 0;
        }
        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;
        }

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

        aside.left {
            background-color: #a5f5c7;
            width: 200px;
            
            margin-left: -100%;
        }

        aside.right {
            background-color: #ff88b2;
            width: 200px;
            
            margin-left: -200px;
        }
    </style>

3.再設(shè)置中間的padding-left和padding-right為左右預(yù)留空間艳狐。

三欄布局-圣杯布局3

<style>
        * {
            margin: 0;
        }
        main.wrap {
            /*給左右欄預(yù)留空間*/
            padding-left: 200px;
            padding-right: 200px;
        }
        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;
        }

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

        aside.left {
            background-color: #a5f5c7;
            width: 200px;
            
            margin-left: -100%;
        }

        aside.right {
            background-color: #ff88b2;
            width: 200px;
            
            margin-left: -200px;
        }
    </style>

4.最后，將左右移動(dòng)到預(yù)留空間的位置處皿桑。

三欄布局-圣杯布局1

<style>
        * {
            margin: 0;
        }

        main.wrap {
            /*給左右欄預(yù)留空間*/
            padding-left: 200px;
            padding-right: 200px;
        }

        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;
        }

        article.center {
            background-color: skyblue;
            width: 100%;
            /*height: 300px;*/
        }

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

        aside.right {
            background-color: #ff88b2;
            width: 200px;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄布局：圣杯布局</title>
    <style>
        * {
            margin: 0;
        }

        main.wrap {
            /*給左右欄預(yù)留空間*/
            padding-left: 200px;
            padding-right: 200px;
        }

        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;
        }

        article.center {
            background-color: skyblue;
            width: 100%;
            /*height: 300px;*/
        }

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

        aside.right {
            background-color: #ff88b2;
            width: 200px;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>
</head>
<body>
<main class="wrap">
    <!--先先寫(xiě)中間部分-->
    <!--先先寫(xiě)中間部分-->
    <!--先先寫(xiě)中間部分-->
    <article class="center">
        <h3>像吃了花椒的鄰居僵驰，</h3>
    </article>

    <aside class="left">
        <h3>我還是很喜歡你，</h3>
    </aside>

    <aside class="right">
        <h3>麻了隔壁唁毒。（??）</h3>
    </aside>
</main>
</body>
</html>

圣杯布局的缺點(diǎn)：center部分的最小寬度不能小于left部分的寬度蒜茴，否則會(huì)left部分掉到下一行
如果其中一列內(nèi)容高度拉長(zhǎng)，其他兩列的背景并不會(huì)自動(dòng)填充浆西。(借助等高布局正padding+負(fù)margin可解決粉私，下文會(huì)介紹)

7、雙飛翼布局

特點(diǎn)：同樣也是三欄布局近零，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化诺核，解決了圣杯布局錯(cuò)亂問(wèn)題抄肖，實(shí)現(xiàn)了內(nèi)容與布局的分離。而且任何一欄都可以是最高欄窖杀，不會(huì)出問(wèn)題漓摩。

原理解讀(前兩步與圣杯布局一樣)：

1.三個(gè)部分都設(shè)定為左浮動(dòng)，然后設(shè)置center的寬度為100%入客，此時(shí)管毙，left和right部分會(huì)跳到下一行；
2.通過(guò)設(shè)置margin-left為負(fù)值讓left和right部分回到與center部分同一行桌硫；
3.center部分增加一個(gè)內(nèi)層div夭咬，并設(shè)margin: 0 200px（左右的寬度）；

效果：

三欄布局：雙飛翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄布局：雙飛翼布局</title>
    <style>
        * {
            margin: 0;
        }

        main.wrap {
        /*確保中間內(nèi)容可以顯示出來(lái)铆隘，2*left寬+right寬*/
            min-width: 600px;
        }

        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;
        }

        article.center {
            background-color: skyblue;
            width: 100%;
            height: 500px;
        }
        article.center .inner{
        /*新增部分*/
            margin: 0 200px;
        }
        aside.left {
            background-color: #a5f5c7;
            width: 200px;
            height: 400px;
            margin-left: -100%;
        }

        aside.right {
            background-color: #ff88b2;
            width: 200px;
            height: 400px;
            margin-left: -200px;
        }
    </style>
</head>
<body>
<main class="wrap">
    <!--先寫(xiě)中間部分-->
    <!--先寫(xiě)中間部分-->
    <!--先寫(xiě)中間部分-->
    <article class="center">
        <div class="inner">
            <h3>像吃了花椒的鄰居卓舵，</h3>
        </div>
    </article>

    <aside class="left">
        <h3>我還是很喜歡你，</h3>
    </aside>

    <aside class="right">
        <h3>麻了隔壁膀钠。（??）</h3>
    </aside>
</main>
</body>
</html>

雙飛翼布局缺點(diǎn)：多加一層 dom 樹(shù)節(jié)點(diǎn)掏湾，增加渲染樹(shù)生成的計(jì)算量。

圣杯布局 vs 雙飛翼布局:

兩種布局方式都是把主列放在文檔流最前面肿嘲，使主列優(yōu)先加載忘巧。
兩種布局方式在實(shí)現(xiàn)上也有相同之處，都是讓三列浮動(dòng)睦刃，然后通過(guò)左右負(fù)外邊距形成三列布局。
兩種布局方式的不同之處在于如何處理中間主列的位置：
圣杯布局是利用父容器的左十酣、右內(nèi)邊距+兩個(gè)從列相對(duì)定位涩拙；
雙飛翼布局是把主列嵌套在一個(gè)新的父級(jí)塊中利用主列的左、右外邊距進(jìn)行布局調(diào)整

四耸采、等高布局

等高布局是指子元素在父元素中高度相等的布局方式兴泥。接下來(lái)我們介紹常見(jiàn)幾種實(shí)現(xiàn)方式：

1、利用正padding+負(fù)margin

原理：
在圣杯布局基礎(chǔ)上虾宇，設(shè)置一個(gè)大數(shù)值的 padding-bottom搓彻，再設(shè)置相同數(shù)值的負(fù)的 margin-bottom，并在所有列外面加上一個(gè)容器嘱朽，并設(shè)置 overflow:hidden 把溢出背景切掉旭贬。解決圣杯布局的第二個(gè)缺點(diǎn)。

新增代碼如下：

  .center,
  .left,
  .right {
    padding-bottom: 10000px;
    margin-bottom: -10000px;
  }
  .wrap {
    <!--把溢出背景切掉-->
    overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄布局：等高布局（利用正padding+負(fù)margin）</title>
    <style>
        * {
            margin: 0;
        }

        main.wrap {
            /*給左右欄預(yù)留空間*/
            padding-left: 200px;
            padding-right: 200px;

            /*新增代碼*/
            overflow: hidden;
        }

        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;

            /*新增代碼*/
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

        article.center {
            background-color: skyblue;
            width: 100%;
            height: 300px;
        }

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

        aside.right {
            background-color: #ff88b2;
            width: 200px;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>
</head>
<body>
<main class="wrap">
    <!--先先寫(xiě)中間部分-->
    <!--先先寫(xiě)中間部分-->
    <!--先先寫(xiě)中間部分-->
    <article class="center">
        <h3>像吃了花椒的鄰居搪泳，</h3>
    </article>

    <aside class="left">
        <h3>我還是很喜歡你稀轨，</h3>
    </aside>

    <aside class="right">
        <h3>麻了隔壁。（??）</h3>
    </aside>
</main>
</body>
</html>

2岸军、利用背景圖片（不可确芄簟）

原理：這是實(shí)現(xiàn)等高列最早使用的一種方法瓦侮，就是使用背景圖片，在列的父元素上使用這個(gè)背景圖進(jìn)行Y軸的鋪放佣谐，從而實(shí)現(xiàn)一種等高列的假象肚吏。實(shí)現(xiàn)方法簡(jiǎn)單，兼容性強(qiáng)狭魂，不需要太多的css樣式就可以輕松實(shí)現(xiàn),但此方法不適合流體布局等高列的布局罚攀。
但是需要一張背景圖片，例如：

背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄布局：等高布局（利用bg img）</title>
    <style>
        * {
            margin: 0;
        }

        main.wrap {
            /*注意img必須足夠?qū)?/
            background: url("../img/bg.png") repeat-y;
            width: 100%;
            height: 500px;
            margin: 0 auto;
        }

        .left, .center, .right {
            float: left;
        }

        article.center {
            /*background-color: skyblue;*/
            width: calc(100% - 200px - 200px);
        }

        aside.left {
            /*background-color: #a5f5c7;*/
            width: 200px;
        }

        aside.right {
            /*background-color: #ff88b2;*/
            width: 200px;
        }
    </style>
</head>
<body>
<main class="wrap clearfix">
    <aside class="left">
        <h3>我還是很喜歡你趁蕊，</h3>
    </aside>

    <article class="center">
        <h3>像吃了花椒的鄰居坞生，</h3>
    </article>

    <aside class="right">
        <h3>麻了隔壁。（??）</h3>
    </aside>
</main>
</body>
</html>

3掷伙、模仿表格布局

這是一種非常簡(jiǎn)單是己，易于實(shí)現(xiàn)的方法。不過(guò)兼容性不好任柜，在ie6-7無(wú)法正常運(yùn)行卒废。

效果：

等高布局-仿表格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄布局：等高布局（仿table）</title>
    <style>
        .table{
            display: table;
            width: auto;
            min-width: 1000px;
            margin: 0 auto;
            height: 500px;
        }
        .table-row{
            display: table-row;
        }
        .table-cell{
            display: table-cell;
            height: 100%;
        }

        .cel-left{
            background: #ff88b2;
            width: 20%;
        }
        .cel-center{
            background: #a5f5c7;
            width: 60%;
        }
        .cel-right{
            background: skyblue;
            width: 20%;
        }
    </style>
</head>
<body>
<div class="table">
    <div class="table-row">
        <div class="table-cell cel-left">
            <div class="left">每一個(gè)不曾起舞的日子，</div>
        </div>
        <div class="table-cell cel-center">
            <div class="center">都是對(duì)生命的辜負(fù)宙地！</div>
        </div>
        <div class="table-cell cel-right">
            <div class="right">加油騷年摔认！</div>
        </div>
    </div>
</div>
</body>
</html>

4、使用border和positon

使用邊框和絕對(duì)定位來(lái)實(shí)現(xiàn)一個(gè)假的高度相等列的效果宅粥。結(jié)構(gòu)簡(jiǎn)單参袱，兼容各瀏覽器，容易掌握秽梅。假設(shè)你需要實(shí)現(xiàn)一個(gè)兩列等高布局抹蚀，側(cè)欄高度要和主內(nèi)容高度相等。

效果：

等高布局-使用border和position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三欄布局：等高布局（border+position）</title>
    <style>
        .wrap{
            width: 1200px;
            margin: 0 auto;
        }
        .left{
            background: #50c5f5;
            position: absolute;
            width: 200px;
            height:500px;
        }
        .center{
            background: #ff6600;
            border-right: 200px solid #50c5f5;
            border-left: 200px solid #f5cabb;
            position: absolute;
            width: 800px;
            height: 500px;
        }
        .right{
            background: #f5cabb;
            position: absolute;
            width: 200px;
            height:500px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

五企垦、粘連布局

1环壤、特點(diǎn)：
- 有一塊內(nèi)容<main>，當(dāng)<main>的高康足夠長(zhǎng)的時(shí)候钞诡，緊跟在<main>后面的元素<footer>會(huì)跟在<main>元素的后面郑现。
- 當(dāng)<main>元素比較短的時(shí)候(比如小于屏幕的高度),我們期望這個(gè)<footer>元素能夠“粘連”在屏幕的底部
2、實(shí)現(xiàn)步驟：
- (1)footer必須是一個(gè)獨(dú)立的結(jié)構(gòu)荧降，與wrap沒(méi)有任何嵌套關(guān)系
- (2)wrap區(qū)域的高度通過(guò)設(shè)置min-height接箫，變?yōu)橐暱诟叨?/li>
- (3)footer要使用margin為負(fù)來(lái)確定自己的位置
- (4)在main區(qū)域需要設(shè)置 padding-bottom。這也是為了防止負(fù) margin 導(dǎo)致 footer 覆蓋任何實(shí)際內(nèi)容朵诫。

效果：

<main>不夠長(zhǎng)的時(shí)候：

粘連布局-不夠長(zhǎng)

<main>足夠長(zhǎng)的時(shí)候：

粘連布局-夠長(zhǎng)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>粘連布局（main足夠長(zhǎng)）</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            /*高度一層層繼承下來(lái)*/
            height: 100%;
        }
        .wrap{
            min-height: 100%;
            background: pink;
            text-align: center;
            overflow: hidden;
        }
        .wrap .main {
            padding-bottom: 50px;
            background: #a5f5c7;
        }
        .footer {
            height: 50px;
            line-height: 50px;
            background: deeppink;
            text-align: center;
            margin-top: -50px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="main">
        <h3>我不夠長(zhǎng)</h3>
        <h3>我不夠長(zhǎng)</h3>
        <h3>我不夠長(zhǎng)</h3>
        <h3>我不夠長(zhǎng)</h3>
        <h3>我不夠長(zhǎng)</h3>
    </div>
</div>

<div class="footer">我是有底線的</div>
</body>
</html>

參考文章

雙飛翼布局介紹-始于淘寶UED
CSS三欄布局的四種方法
CSS 兩列布局---左側(cè)固定列牺，右側(cè)自適應(yīng)
兩列自適應(yīng)布局的四種思路
css常見(jiàn)布局之九：三欄布局的常見(jiàn)實(shí)現(xiàn)
【布局】聊聊為什么淘寶要提出「雙飛翼」布局
CSS的單列布局與二&三列布局

參見(jiàn)大神的文章浪里行舟

最后編輯于：2019.06.09 15:37:39

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市拗窃，隨后出現(xiàn)的幾起案子瞎领，更是在濱河造成了極大的恐慌泌辫，老刑警劉巖，帶你破解...
沈念sama閱讀 207,248評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件九默，死亡現(xiàn)場(chǎng)離奇詭異震放，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)驼修，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,681評(píng)論 2贊 381
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)殿遂，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人乙各，你說(shuō)我怎么就攤上這事墨礁。” “怎么了耳峦？”我有些...
開(kāi)封第一講書(shū)人閱讀 153,443評(píng)論 0贊 344
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵恩静，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我蹲坷，道長(zhǎng)驶乾，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 55,475評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任循签，我火速辦了婚禮级乐，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘县匠。我一直安慰自己风科，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 64,458評(píng)論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布乞旦。她就那樣靜靜地躺著贼穆，像睡著了一般。火紅的嫁衣襯著肌膚如雪杆查。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書(shū)人閱讀 49,185評(píng)論 1贊 284
城市分裂傳說(shuō)
那天臀蛛，我揣著相機(jī)與錄音亲桦，去河邊找鬼。笑死浊仆，一個(gè)胖子當(dāng)著我的面吹牛客峭，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播抡柿，決...
沈念sama閱讀 38,451評(píng)論 3贊 401
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼舔琅，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了洲劣？” 一聲冷哼從身側(cè)響起备蚓，我...
開(kāi)封第一講書(shū)人閱讀 37,112評(píng)論 0贊 261
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤课蔬，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后郊尝，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體二跋，經(jīng)...
沈念sama閱讀 43,609評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,083評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年流昏，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了扎即。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 38,163評(píng)論 1贊 334
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡况凉，死狀恐怖谚鄙，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情刁绒，我是刑警寧澤闷营，帶...
沈念sama閱讀 33,803評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站膛锭，受9級(jí)特大地震影響粮坞，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜初狰，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,357評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一莫杈、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧奢入，春花似錦筝闹、人聲如沸。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,357評(píng)論 0贊 19
一樁弒父案关顷，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至武福，卻和暖如春议双，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背捉片。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,590評(píng)論 1贊 261
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工平痰，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人伍纫。一個(gè)月前我還...
沈念sama閱讀 45,636評(píng)論 2贊 355
代替公主和親
正文我出身青樓宗雇，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親莹规。傳聞我的和親對(duì)象是個(gè)殘疾皇子赔蒲，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,925評(píng)論 2贊 344