圣杯布局肤粱、雙飛翼布局、flex布局和絕對定位布局的幾種經(jīng)典布局的具體實現(xiàn)示例

題目要求：針對如下DOM結(jié)構(gòu)，編寫css喇聊，實現(xiàn)三欄水平布局恍风，其中l(wèi)eft、right分別位于左右兩側(cè)誓篱，left寬度為200px朋贬，right寬度為300px，main在中間窜骄，寬度自適應(yīng)

要求：允許增加額外的DOM節(jié)點锦募，但不能修改現(xiàn)有的節(jié)點順序

 <div class="container">
      <div class="main">main</div>
      <div class="left">left</div>
      <div class="right">right</div>
</div>

圣杯布局和雙飛翼布局針對的都是三列布局，左右欄固定邻遏，中間自適應(yīng)的網(wǎng)頁布局糠亩。布局要求：

三列布局，中間寬度自適應(yīng)准验，兩邊定寬
中間欄要在瀏覽器中優(yōu)先展示渲染
允許任意列的高度最高

1. 圣杯布局

(1) 設(shè)置基本樣式

  .main{
      background-color: blue;
  }
  .left{
      width: 200px;
      background-color: red;
  }
  .right{
      width: 300px;
      background-color: aqua;
  }

如下所示：

效果圖

(2) 設(shè)置container的padding赎线，使之空出左右的空間，效果如圖：

.container{
    padding: 0 300px 0 200px;
}

效果圖

(3) 將main糊饱、left垂寥、right設(shè)置左浮動，并設(shè)置高度

  .main, .left, .right{
      float: left;
      min-height: 100px
  }

如果出現(xiàn)以下情況：

效果圖

則需要設(shè)置main的寬度為100%

.main{
    wdith: 100%;
}

將main撐開。如圖所示：

效果圖

（4）設(shè)置left和right的margin-left
明顯圣杯布局left滞项、main狭归、right是依次并排的，但是目前的效果是left和right都在下一行蓖扑，這里使用的技巧就是負(fù)的外邊距唉铜，margin-left

.left{
  margin-left: -100%
}
.right{
  margin-left: -300px;
}

負(fù)的外邊距讓元素沿著文檔流向左移動。如果數(shù)值比較大就會移動到上一行律杠。
設(shè)置left部分的margin-left為-100%，就會使得left往左移動一個整行的寬度竞惋，一直移到上一行的開頭柜去，并且覆蓋了main的部分。left上移之后拆宛，right就是處于當(dāng)前行的開頭位置嗓奢。這個時候設(shè)置right部分的margin-left為負(fù)寬度，right就會移動到上一行的末尾浑厚。

效果圖.png

（5）接下來只要使left和right分別挪到這兩個位置就可以股耽。可以使用相對定位移動

.left{
  position: relative;
  left: -200px;
}
.right{
  position: relative;
  right: -300px;
}

最終效果圖

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
</head>
<style type="text/css">
    .container{
        height: 100px;
        padding: 0 300px 0 200px;
    }
    .main, .left, .right{
        float: left;
        height: 100%;
    }
    .main{
        width: 100%;
        background-color: red;
    }
    .left{
        width: 200px;
        margin-left: -100%;
        background-color: green;
        position: relative;
        left: -200px;
    }
    .right{
        width: 300px;
        background-color: blue;
        margin-left: -300px;
        position: relative;
        right: -300px;
    }
</style>
<body>
    <div class="container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

2. 雙飛翼布局

圣杯布局和雙飛翼布局解決問題的方案前一部分是相同的钳幅，不同之處在于解決“中間欄div不背遮擋”的思路不一樣物蝙。他的html結(jié)構(gòu)發(fā)生了變化，添加了一個元素敢艰。

 <div class="main">
        <div class="content">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>

解決的思路是content添加外邊距诬乞。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>雙飛翼布局</title>
</head>
<style type="text/css">
   .container{
       height: 100px;
   }
   .main, .left, .right{
       float: left;
       height: 100%;
   }
   .main{
       width: 100%;
       background-color: red;
   }
   .left{
       width: 200px;
       margin-left: -100%;
       background-color: green;
   }
   .right{
       width: 300px;
       background-color: blue;
       margin-left: -300px;
   }
   .content{
       margin: 0 300px 0 200px;
   }
</style>
<body>
<div class="container">
   <div class="main">
       <div class="content">main</div>
   </div>
   <div class="left">left</div>
   <div class="right">right</div>
</div>
</body>
</html>

雙飛翼布局比圣杯布局多使用了一個div但是少用了4個css屬性，比圣杯布局更加直接簡潔钠导。雙飛翼比圣杯布局多創(chuàng)建一個div震嫉，但是不用相對布局

3. Flex布局

任何一個容器都可以指定為Flex布局，flex布局將成為未來布局的首選方案
(1) 首先將container設(shè)置成一個flex容器

.container{
  display: flex;
  min-height: 100px;
}

那么container里面的三個子元素自動成為容器成員牡属，即成為flex項目票堵，簡稱為項目
(2) 對這三個項目的初始設(shè)置（顏色等）

效果圖

(3) 通過order進(jìn)行布局
由于元素的順序不能更改，從上圖可知三個項目的排序不一樣了逮栅。為了使left排在第一個我們可以通過設(shè)置flex容器下的order屬性來更改順序悴势。

.left{
  order: -1;
}

對order屬性來說，越小排序越靠前证芭，默認(rèn)為0瞳浦。

效果圖

(4) 設(shè)置main的flex-grow屬性，撐滿剩余空間

.main{
 flex-grow: 1
}

效果圖

(5) 用flex-basic設(shè)置left和right的寬度

.left{
 flex-basic: 200px;
}
.right{
 flex-basic: 300px;
}

最終效果圖

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
</head>
<style type="text/css">
    .container{
        display: flex;
    }

    .main{
        background-color: blue;
        flex-grow: 1;
    }
    .main, .left, .right{
        min-height: 100px;
    }
    .left{
        flex-basis: 200px;
        order: -1;
        background-color: red;
    }
    .right{
        flex-basis: 300px;
        background-color: aqua;
    }
</style>
<body>
    <div class="container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

4. 絕對定位布局

絕對定位布局和相對定位布局不同废士。絕對定位元素會脫離文檔流叫潦，不占據(jù)空間。相對定位元素實際上被當(dāng)作是普通文檔流的一部分官硝，因為它是根據(jù)自身在普通文檔流的位置進(jìn)行定位的矗蕊。

因為絕對定位的元素脫離的文檔流短蜕，所以可以覆蓋頁面上的其他元素。并且通過設(shè)置z-index來控制他們的堆疊順序傻咖。

可以通過position: absolution+margin來實現(xiàn)三欄布局朋魔。
具體代碼實現(xiàn)如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>絕對定位實現(xiàn)三欄布局</title>
</head>
<style type="text/css">
    .container{
        position: relative;
    }
    .left, .main, .right{
        min-height: 100px;
    }
    .left{
        position: absolute;
        left: 0;
        width: 200px;
        top: 0;
        background-color: red;
    }
    .right{
        position: absolute;
        right: 0;
        top: 0;
        width: 300px;
        background-color: aqua;
    }
    .main{
        margin: 0 300px 0 200px;
        background-color: blue;
    }
</style>
<body>
    <div class="container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

圣杯布局幻碱、雙飛翼布局、flex布局和絕對定位布局的幾種經(jīng)典布局的具體實現(xiàn)示例

圣杯布局细溅、雙飛翼布局褥傍、flex布局和絕對定位布局的幾種經(jīng)典布局的具體實現(xiàn)示例

1. 圣杯布局

2. 雙飛翼布局

3. Flex布局

4. 絕對定位布局