格布局的基本概念

CSS 網(wǎng)格布局引入了二維網(wǎng)格布局系統(tǒng)，可用于布局頁(yè)面主要的區(qū)域布局或小型組件。不同于flex布局，flex布局是一維的，適合單行或單列的布局，而css grid（網(wǎng)格）是在一個(gè)二維的平面上布局元素，類似于table，不同于table的是它的子元素不受限制可以自由定位。

Grid 和 flexbox 區(qū)別

CSS網(wǎng)格布局和彈性盒布局的主要區(qū)別在于彈性盒布局是為一維布局服務(wù)的（沿橫向或縱向的），而網(wǎng)格布局是為二維布局服務(wù)的（同時(shí)沿著橫向和縱向）。這兩個(gè)規(guī)格有一些相同的特性。如果你已經(jīng)掌握如何使用彈性盒布局的話，你可能會(huì)想知道這些相似之處怎樣在能幫助你掌握網(wǎng)格布局。

什么是網(wǎng)格？

網(wǎng)格是一組相交的水平線和垂直線，它定義了網(wǎng)格的列和行。我們可以將網(wǎng)格元素放置在與這些行和列相關(guān)的位置上。它使網(wǎng)頁(yè)設(shè)計(jì)變得更加容易，而無(wú)需使用浮動(dòng)和定位等其它技術(shù)。

CSS 網(wǎng)格布局具有以下特點(diǎn)：

• 使用固定或彈性的尺寸設(shè)置軌道的大小。
• 使用行號(hào)、行名或者標(biāo)定一個(gè)網(wǎng)格區(qū)域來(lái)精確定位元素，同時(shí)還使用一種算法來(lái)控制未給出明確網(wǎng)格位置的元素。
• 對(duì)于在網(wǎng)格外面的內(nèi)容，當(dāng)必要時(shí)它會(huì)自動(dòng)增加行和列，它會(huì)盡可能多地容納所有內(nèi)容。
• 可以控制網(wǎng)格區(qū)域中元素的對(duì)齊方式，以及整個(gè)網(wǎng)格如何對(duì)齊。
• 在網(wǎng)格單元格中可以放置多個(gè)元素，或者可以部分地彼此重疊，使用 z-index屬性來(lái)控制重疊區(qū)域顯示的優(yōu)先級(jí)。

CSS 網(wǎng)格常用術(shù)語(yǔ)：

• 網(wǎng)格容器
• 網(wǎng)格軌道
• 網(wǎng)格線
• 網(wǎng)格單元
• 網(wǎng)格區(qū)域
• 網(wǎng)格間距
• 嵌套網(wǎng)格

css Grid 是一個(gè)強(qiáng)大的規(guī)范，當(dāng)與 CSS 的其他部分（如flexbox）結(jié)合使用時(shí)，可以幫助您創(chuàng)建以前不可能在 CSS 中構(gòu)建的布局。這一切都是通過(guò)在網(wǎng)格容器上創(chuàng)建一個(gè)網(wǎng)格來(lái)開(kāi)始的。

網(wǎng)格容器

我們可以使用 display：grid 或 display：inline-grid 來(lái)創(chuàng)建一個(gè)網(wǎng)格容器。如下示例：

html：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

塊級(jí)網(wǎng)格容器：

.grid-container {
  display: grid;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

顯示效果：

行內(nèi)塊級(jí)網(wǎng)格容器：

.grid-container {
  display: inline-grid;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

效果顯示：

網(wǎng)格容器的所有直接子元素自動(dòng)成為網(wǎng)格項(xiàng)，注意grid和inline-grid的區(qū)別。在瀏覽器中，元素轉(zhuǎn)為網(wǎng)格前看不出什么差異，因?yàn)榫W(wǎng)格給這些元素創(chuàng)建了一個(gè)單列網(wǎng)格。

你可以打開(kāi)開(kāi)發(fā)者工具，使用選擇工具選擇網(wǎng)格容器元素，此時(shí)會(huì)在元素節(jié)點(diǎn)旁看到一個(gè)grid的圖標(biāo)，點(diǎn)擊后會(huì)看到頁(yè)面顯示網(wǎng)格布局。如下圖：

網(wǎng)格軌道

通過(guò) grid-template-columns 和 grid-template-rows 屬性來(lái)定義網(wǎng)格中的行和列，一個(gè)網(wǎng)格軌道就是網(wǎng)格中任意兩條線之間的空間。

網(wǎng)格列軌道：

display: grid;
grid-template-columns: 200px 200px 200px;

顯示效果：

網(wǎng)格行軌道：

display: grid;
grid-template-rows: 200px 200px 200px;

比如圖5中，行一到行2之間的區(qū)域就是我們定義的行軌道。列1到列3之間的區(qū)域就是列軌道。從這里可以看出軌道不是指網(wǎng)格行或網(wǎng)格列，它們是有區(qū)別的，網(wǎng)格行和網(wǎng)格列是指網(wǎng)格項(xiàng)的水平線或垂直線，如下圖：

網(wǎng)格軌道的大小，可以使用固定單位，如px、cm、pt等，還可以使用百分比、auto、關(guān)鍵字（min-content、max-content）、函數(shù)（max（）、min（）、minmax（））等。此外還專門為網(wǎng)格指定一個(gè) fr單位用來(lái)設(shè)置軌道大小，本節(jié)簡(jiǎn)單介紹下fr單位，后面會(huì)單獨(dú)講述，這方面內(nèi)容太多。

fr單位

fr單位代表網(wǎng)格容器中可用空間的一等份。下一個(gè)網(wǎng)格定義將創(chuàng)建三個(gè)相等寬度的軌道，這些軌道會(huì)隨著可用空間增長(zhǎng)和收縮。fr 類似于 flex布局中的flex-grow。

如下示例:

display: grid;
grid-template-columns: 1fr 1fr 1fr;

如圖6中，每列等寬，平分網(wǎng)格容器可用的空間。當(dāng)將其中一列設(shè)置不同的值，如下圖：

display: grid;
grid-template-columns: 1fr 2fr 1fr;

圖7中，一個(gè)3列的網(wǎng)格，其中列2的寬度是其它列的2倍。

網(wǎng)格線

應(yīng)該注意的是，當(dāng)我們定義網(wǎng)格時(shí)，我們定義的是網(wǎng)格軌道，而不是網(wǎng)格線。Grid 會(huì)為我們創(chuàng)建帶編號(hào)的網(wǎng)格線來(lái)讓我們來(lái)定位每一個(gè)網(wǎng)格元素。如下示例：

列之間的線稱為列線，行之間的線稱為行線。可用使用grid-column-start (en-US), grid-column-end (en-US), grid-row-start (en-US) 和 grid-row-end (en-US) 屬性，按照網(wǎng)格線編號(hào)進(jìn)行定位，具體內(nèi)容會(huì)在以后詳細(xì)介紹。

網(wǎng)格線的編號(hào)順序取決于文章的書(shū)寫(xiě)模式。在從左至右書(shū)寫(xiě)的語(yǔ)言中，編號(hào)為 1 的網(wǎng)格線位于最左邊。在從右至左書(shū)寫(xiě)的語(yǔ)言中，編號(hào)為 1 的網(wǎng)格線位于最右邊。 網(wǎng)格線也可以被命名，我們將在稍后的教程中看到如何完成這一操作。

網(wǎng)格單元

一個(gè)網(wǎng)格單元是在一個(gè)網(wǎng)格元素中最小的單位， 從概念上來(lái)講其實(shí)它和表格里的一個(gè)單元格很像。現(xiàn)在再看回我們前面的一個(gè)例子，一旦一個(gè)網(wǎng)格元素被定義在一個(gè)父級(jí)元素當(dāng)中，那么他的子級(jí)元素將會(huì)排列在每個(gè)事先定義好的網(wǎng)格單元中。在下面的圖中，我會(huì)將第一個(gè)網(wǎng)格單元作高亮處理。

網(wǎng)格區(qū)域

網(wǎng)格元素可以向行或列的方向擴(kuò)展一個(gè)或多個(gè)單元，并且會(huì)創(chuàng)建一個(gè)網(wǎng)格區(qū)域。網(wǎng)格區(qū)域的形狀應(yīng)該是一個(gè)矩形 - 也就是說(shuō)你不可能創(chuàng)建出一個(gè)類似于“L”形的網(wǎng)格區(qū)域。下圖高亮的網(wǎng)格區(qū)域擴(kuò)展了 2 列以及 2 行。

網(wǎng)格間距

每列/行之間的空間稱為網(wǎng)格間距。可使用 grid-column-gap (en-US) 和 grid-row-gap (en-US) 屬性來(lái)創(chuàng)建，或者直接使用兩個(gè)合并的縮寫(xiě)形式 grid-gap (en-US)。在下面的例子中，我會(huì)創(chuàng)建一個(gè)橫向間距為 10px、縱向間距為 1em 的網(wǎng)格元素。

css：

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 1em;
}

html：

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

效果顯示：

間距使用的空間會(huì)在使用彈性長(zhǎng)度 fr 的軌道的空間計(jì)算前就被留出來(lái)，間距的尺寸定義行為和普通軌道一致，但不同的是你不能向其中插入任何內(nèi)容。從以基線定位的角度來(lái)說(shuō)，間距就像一條很寬的基線。

嵌套網(wǎng)格

一個(gè)網(wǎng)格元素可以也成為一個(gè)網(wǎng)格容器。在接下來(lái)的例子中我事先有了一個(gè) 3 列的網(wǎng)格元素，并有兩個(gè)跨軌道的網(wǎng)格。在這個(gè)例子中，第一個(gè)網(wǎng)格元素含有幾個(gè)子級(jí)元素。當(dāng)這些元素不是網(wǎng)格容器的直接子級(jí)元素時(shí)，它們不會(huì)參與到網(wǎng)格布局中，并顯示為正常的文檔流。

如下示例：

html：

<div class="wrapper">
    <div class="box box1">
        <div class="nested">a</div>
        <div class="nested">b</div>
        <div class="nested">c</div>
    </div>
    <div class="box box2">Two</div>
    <div class="box box3">Three</div>
    <div class="box box4">Four</div>
    <div class="box box5">Five</div>
</div>

css：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 1em;
  background:#000;
}
.wrapper > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
.nested{
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
}

當(dāng)我們給box1設(shè)置display: grid;如下圖顯示：

box1 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 1em;
}

圖13中box1它也會(huì)變成一個(gè)網(wǎng)格元素，它的子級(jí)元素也會(huì)排列在這個(gè)新網(wǎng)格元素中。

在這個(gè)例子中，嵌套網(wǎng)格和他的父級(jí)并沒(méi)有關(guān)系。就像你在例子中所看見(jiàn)的一樣，它并沒(méi)有從它的父級(jí)繼承 grid-gap (en-US) 屬性，并且嵌套網(wǎng)格里面的網(wǎng)格線沒(méi)有與父級(jí)的網(wǎng)格線對(duì)齊。

網(wǎng)格單元重疊

多個(gè)網(wǎng)格項(xiàng)目可以占用同一個(gè)網(wǎng)格單位。如下圖示例：

html：

<div class="wrapper">
   <div class="box box1">One</div>
   <div class="box box2">Two</div>
   <div class="box box3">Three</div>
   <div class="box box4">Four</div>
   <div class="box box5">Five</div>
</div>

css：

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
   column-gap: 10px;
   row-gap: 10px;
}
.box{
	background: #fff;
    border:1px solid #000;
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   background:red;
}
.box2 {
   grid-column-start: 1;
   grid-row-start: 2;
   grid-row-end: 4;
   background:orange;
}

效果顯示：

網(wǎng)格 box2 現(xiàn)在覆蓋于 box1 之上，其覆蓋順序遵循文檔流的原始順序（后來(lái)居上）。

我們可以使用 z-index 屬性控制重疊的順序。如果我們給 box2 設(shè)定一個(gè)低于 box1 的 z-index 值的話，box2將會(huì)顯示在 box1 的下方。如下示例：

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
   column-gap: 10px;
   row-gap: 10px;
}
.box{
	background: #fff;
    border:1px solid #000;
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   background:red;
   z-index:2;
}
.box2 {
   grid-column-start: 1;
   grid-row-start: 2;
   grid-row-end: 4;
   background:orange;
   z-index:1;
}

顯示效果：

總結(jié)

在本文章中我們快速對(duì)網(wǎng)格布局的概念有了個(gè)基本的了解。后面會(huì)詳細(xì)介紹網(wǎng)格的布局及相關(guān)屬性的具體內(nèi)容。

站開(kāi)發(fā)入門指南：如何劃分網(wǎng)格？

除了能設(shè)定這些常見(jiàn)的尺寸的設(shè)定的值之外，其實(shí)還有它自己特別的一些值的設(shè)定。在開(kāi)始介紹這幾個(gè)特別的值得設(shè)定之前，先來(lái)看到開(kāi)發(fā)者工具顯示的網(wǎng)格效果。

先給大家介紹一個(gè)非常重要的信息，這個(gè)信息就是網(wǎng)格(中單元格)的尺寸。網(wǎng)格(中的單元格)的尺寸是由兩個(gè)數(shù)據(jù)組成的，一個(gè)是左邊的，一個(gè)右邊，它是通過(guò)一個(gè)點(diǎn)分開(kāi)的。這里乍一看其實(shí)沒(méi)有什么特別奇怪的地方，因?yàn)檫@里前后都是一樣的，包括行高也是前后都是一樣的。

這里其實(shí)前面這個(gè)值就是在CS5里面寫(xiě)的這樣的值，后面這個(gè)值其實(shí)是跟DPR相關(guān)的，也就是之前在講屏幕像素的時(shí)候提到過(guò)的高倍屏，它有一個(gè)比較高的屏幕像素密度值的東西。

這里錄制的顯示器因?yàn)樗瞧胀ū堵实钠聊唬皇歉弑镀恋钠聊唬郧昂髢蓚€(gè)值都是一樣的。但是如果網(wǎng)頁(yè)在高倍屏上打開(kāi)，比如這里，在高倍屏上去打開(kāi)之后給大家截個(gè)圖看一下。大家可以看到這里截出來(lái)的圖，它的值前面是后面的兩倍。

這個(gè)東西大家做一個(gè)基本的了解就可以了，只要知道它是跟屏幕倍率有關(guān)，因?yàn)橄裰髌聊痪褪莿偛湃ソ氐钠聊唬琌PR是2，所以這兩者的關(guān)系其實(shí)就是前面CS5設(shè)置的值除以DPR的值，然后就得出了后面這樣的數(shù)據(jù)了。所以如果在不同的倍率的屏幕上可能看到的效果是不一樣的，這個(gè)東西知道就好了。

像自己平時(shí)其實(shí)沒(méi)有什么大的影響，因?yàn)橹饕€是看CS5，這部分設(shè)置的值就可以了。

接下來(lái)是先來(lái)介紹一下rep，這個(gè)東西準(zhǔn)確的來(lái)講其實(shí)是一個(gè)單位，因?yàn)樗闷饋?lái)是這樣用的1fr.2fr這樣子。這個(gè)東西的英文全稱叫做fraction，fraction是有這種部分的意思，它的作用其實(shí)就是把整個(gè)容器內(nèi)剩余的空間做一個(gè)均分，然后進(jìn)行分配。

所以它的使用特點(diǎn)跟這種Flex布局中的repeale.xegrow其實(shí)是有點(diǎn)像的。利用這樣的一個(gè)單位就能實(shí)現(xiàn)把整個(gè)的容器區(qū)域充分的利用起來(lái)，就是形成的整個(gè)網(wǎng)格就能剛剛好的占用滿整個(gè)容器的區(qū)域。

這里通過(guò)這個(gè)代碼來(lái)看一下，比如這里去做一個(gè)簡(jiǎn)化，先讓它變成一行一列，這樣的結(jié)果是整個(gè)網(wǎng)格就這么大。然后在列這里加一個(gè)1fr，會(huì)發(fā)現(xiàn)這里就神出來(lái)第二列，第二列完全占據(jù)了剩下的橫向的空間。

也可以看到這樣一個(gè)格子，第二列這里形成的格子的尺寸是這樣子，左邊是在CSS里面定義的值，右邊是通過(guò)DPR相關(guān)的一些計(jì)算得出的具體的像素值。這樣在橫向空間內(nèi)是不是完全占據(jù)了這樣一個(gè)容器的寬度？

大家注意，像這種網(wǎng)格生成的格子也可以稱為叫一個(gè)單元格，不管它的尺寸大小，只要是網(wǎng)格形成的其中的一個(gè)格子都可以稱作叫單元格。這里給這個(gè)行這里也加一個(gè)1fr，會(huì)發(fā)現(xiàn)這里出現(xiàn)了第二行，第二行這里也是1fr，500px，這說(shuō)明第二行也是1fr設(shè)置產(chǎn)生的了。

1fr這里就把整個(gè)容器的縱向的高度，給充分的利用起來(lái)了。

其實(shí)看到這里也能感覺(jué)到它的用法跟flexgrow真的是很像的，就是這里1fr其實(shí)就是把剩余的空間就分成1份，這一列占據(jù)1份。假如這里來(lái)個(gè)2fr，剩余的橫向空間總共就分為3份，第三列占兩份，第二列占1份。

假如這里再來(lái)一個(gè)，比如5fr，它也是一模一樣的邏輯，就是剩余的空間進(jìn)行均分，總共設(shè)置了幾個(gè)fr，比如橫向設(shè)置了列這里總共設(shè)置了8個(gè)fr，就除以8，然后占一份，占兩份，占5份。

剩余空間不一定是第一個(gè)之后的，比如這里中間也可以穿插其他的單位的設(shè)置，比如在這里再來(lái)一個(gè)200px，橫向的寬度剩余的空間是什么？就是元素的總寬度減去已經(jīng)固定的這些值，不就是剩余的空間了嗎？剩余的空間再進(jìn)行總的fr份數(shù)的平分，各自去占幾份，是這樣的效果。

像這里，比如這里來(lái)一個(gè)3fr，最后來(lái)一個(gè)200px，也是一樣類似的邏輯，都是這樣的劃分方式。其實(shí)也可以利用fr的方式快速的實(shí)現(xiàn)純行純列的布局，比如這里來(lái)這樣一個(gè)1fr、1fr、1fr三列，是不是就三個(gè)這樣的列的單元格了？

如果是行也可以這樣，1fr、1fr、1fr，其實(shí)這就是有三行了，但是如果把元素放進(jìn)去，其實(shí)就能看得到了，比如放幾個(gè)元素進(jìn)去111，其他就變成三行的效果了。

再更復(fù)雜一點(diǎn)，要做完全的平分的，比如9宮格，把列寬這樣一個(gè)設(shè)置打開(kāi)，就會(huì)發(fā)現(xiàn)它就是一個(gè)9宮格了，再來(lái)多幾格，它是不是就變成16宮格了？所以很多時(shí)候fr這個(gè)單位，是在很多場(chǎng)景都會(huì)用得到的。因?yàn)橛盟褪悄軌蛉グ颜麄€(gè)的容器內(nèi)部的空間給利用起來(lái)。所以想實(shí)現(xiàn)把容器空間內(nèi)部完整利用起來(lái)的效果，進(jìn)行一些剩余空間的分配、平均分配這樣的一些需求，就可以大膽的去用fr這樣一個(gè)單位。

們前端開(kāi)發(fā)過(guò)程中，寫(xiě)css（包括sass, less, stylus這樣的預(yù)處理器）進(jìn)行設(shè)計(jì)稿的樣式還原是一項(xiàng)重要的工作，而其中，關(guān)于頁(yè)面布局的部分，又是書(shū)寫(xiě)樣式代碼時(shí)候的重點(diǎn)和難點(diǎn)，這篇文章就盡可能的去總結(jié)常見(jiàn)的一些頁(yè)面布局實(shí)現(xiàn)方案(并不是全部，布局實(shí)現(xiàn)方法太多了)，希望能夠?qū)Υ蠹矣兴鶐椭?/p>

在開(kāi)始正題之前，有一點(diǎn)要說(shuō)明：css布局中遇到的一個(gè)繞不開(kāi)的問(wèn)題就是瀏覽器兼容性，下面方案會(huì)遇到類似transform, flex等的兼容性問(wèn)題，且由于grid布局兼容性問(wèn)題，暫不涉及grid布局內(nèi)容，在不同場(chǎng)景，大家選擇合適的布局實(shí)現(xiàn)方案即可。

1. 居中相關(guān)的布局

1.1 水平居中布局

效果圖如下：

方案一. inline-block + text-align

分析：display設(shè)置為inline-block的元素，具有文本元素的性質(zhì)，其父元素可以通過(guò)設(shè)置文本對(duì)齊屬性text-align來(lái)控制其在行內(nèi)的對(duì)齊方式，text-align: center即為水平對(duì)齊

注意：text-align屬性是具有繼承性的，會(huì)導(dǎo)致自己元素內(nèi)部的文本也是居中顯示的，需要自身設(shè)置text-align覆蓋

<style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
        text-align: center;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: inline-block;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案二. 定位 + transform

分析：父元素開(kāi)啟定位（relative，absolute,fixed都可以）后，子元素設(shè)置絕對(duì)定位absolute后，left設(shè)置為50%，再使用transform: translateX(-50%)將子元素往反方向移動(dòng)自身寬度的50%，便完成水平居中。

注意：父級(jí)元素是否脫離文檔流，不影響子元素水平居中效果，但是transform是css3屬性，存在瀏覽器兼容問(wèn)題

<style>
    .wrap {
        position: relative;
        width: 100%;
        height: 200px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案三. display: block + margin: 0 auto

分析：這個(gè)方法只需要對(duì)子元素進(jìn)行設(shè)置就可以實(shí)現(xiàn)水平居中，margin設(shè)置auto表示瀏覽器會(huì)自動(dòng)分配，實(shí)現(xiàn)來(lái)外邊距等分效果。

注意：這里子元素設(shè)置display為block或者table都是可以的，如果子元素脫離文檔流（浮動(dòng)，定位），會(huì)導(dǎo)致margin屬性的值無(wú)效。

<style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: table;
        margin: 0 auto;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

1.2 垂直居中布局

效果圖如下：

方案一. 定位 + transform

這種方案和之前水平居中布局的方案二是同樣的原理，不在贅述

<style>
    .wrap {
        position: relative;
        width: 200px;
        height: 600px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案二. display: table-cell + vertical-align

分析：設(shè)置display: table-cell的元素具有td元素的行為，它的子元素布局方式類似文本元素，可以在父元素使用vertical-align: middle;實(shí)現(xiàn)子元素的垂直居中。

注意：vertical-align屬性具有繼承性，導(dǎo)致父元素內(nèi)文本也是垂直居中顯示的。

<style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 200px;
        height: 600px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

1.3 水平垂直居中布局

效果圖如下：

前面分別總結(jié)了一些水平居中和垂直居中的布局方式，那么進(jìn)行水平垂直居中的布局，也就沒(méi)什么特別要說(shuō)的了，直接上代碼：

方案一.定位 + transform

<style>
    .wrap {
        position: relative;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案二. 結(jié)合水平布局方案三，垂直布局方案二

<style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

1.4 使用flex進(jìn)行居中布局

分析：使用flex，水平垂直居中會(huì)變得非常容易，默認(rèn)情況下，align-items: center垂直居中（交叉軸排列方式），justify-content: center水平居中（主軸排列方式） 注意：需要考慮瀏覽器兼容性問(wèn)題。

<style>
     .wrap {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 1200px;
         height: 800px;
         background-color: aqua;
     }
     .content {
         width: 200px;
         height: 200px;
         background-color: blueviolet;
     }
</style>
 <body>
     <div class="wrap">
         <div class="content"></div>
     </div>
 </body>

2. N列布局

2.1 兩列布局

這里的兩列布局指的是，其中一列是定寬元素，另一列元素寬度自適應(yīng)。比如，我們實(shí)現(xiàn)左列定寬，右列自適應(yīng)的布局。

效果圖如下：

方案一. 左邊元素浮動(dòng)，定寬，右邊元素設(shè)置margin-left

分析：一個(gè)最簡(jiǎn)單的做法，左邊元素設(shè)置浮動(dòng)，定寬，右邊元素的margin-left設(shè)置為左邊元素寬度大小，可以實(shí)現(xiàn)效果。

注意：我們左邊元素使用了浮動(dòng)，但是右邊元素沒(méi)有浮動(dòng)

<style>
    .l, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .r {
        background-color: blueviolet;
        margin-left: 400px;
    }
</style>
<body>
    <div class="l">定寬</div>
    <div class="r">自適應(yīng)</div>
</body>

方案二. 左邊元素浮動(dòng)，定寬，右邊元素設(shè)置overflow:hidden

分析：右邊元素由于設(shè)置overflow:hidden開(kāi)啟BFC，與外界隔離，所以能實(shí)現(xiàn)效果

注意：overflow:hidden的設(shè)置也使得右邊元素內(nèi)容超出隱藏。這里如果不設(shè)置overflow:hidden，右邊元素的寬度是100%，有一部分被左邊浮動(dòng)元素蓋住，不是我們要的結(jié)果，雖然看起來(lái)沒(méi)什么區(qū)別。

<style>
    .l, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .r {
        background-color: blueviolet;
        overflow: hidden;
    }
</style>
<body>
    <div class="l">定寬</div>
    <div class="r">自適應(yīng)</div>
</body>

方案三.將左右元素用一個(gè)display:table的元素包裹，左右元素設(shè)置為display: table-cell

分析：這里主要是基于表格元素，在沒(méi)有設(shè)置寬度時(shí)，會(huì)自動(dòng)分配寬度來(lái)實(shí)現(xiàn)布局的。

注意：設(shè)置為表格后，在某些瀏覽器可能會(huì)受到表格本身特有行為的影響，比如表格邊框等等。

<style>
    .w {
        display: table;
        table-layout: fixed;
        width: 100%;
    }
    .l, .r {
        display: table-cell;
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
    }
    .r {
        background-color: blueviolet;
    }
</style>
<body>
    <div class="w">
        <div class="l">定寬</div>
        <div class="r">自適應(yīng)</div>
    </div>
</body>

方案四. flex布局

分析：父容器采用flex布局，左邊元素定寬之后，右邊元素，因?yàn)橹挥幸粋€(gè)，所以flex屬性設(shè)置為不是0的正值（也就是設(shè)置flex-grow），都會(huì)占滿剩余空間。

注意：依然是，注意兼容性問(wèn)題。

2.2 三列布局

這里的三列布局，主要分三種情況介紹，第一種是普通三列布局，還有兩種是比較有名的圣杯布局和雙飛翼布局（兩者都是實(shí)現(xiàn)一個(gè)兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局，區(qū)別在于雙飛翼布局比起圣杯布局，中間元素會(huì)多一個(gè)子元素，而左右元素需要定位relative）

2.2.1. 普通三列布局

我們這里實(shí)現(xiàn)的是，左中兩列定寬，右邊一列自適應(yīng)的布局，這個(gè)實(shí)際上和前面的兩列布局是類似的。

效果圖如下：<style>
     .p {
         display: flex;
         height: 600px;
     }
     .l {
        background-color: aqua;
        width: 400px;
     }
     .r {
         flex: 1;
         background-color: blueviolet;
     }
</style>
 <body>
     <div class="p">
         <div class="l">定寬</div>
         <div class="r">自適應(yīng)</div>
     </div>
 </body>

2.2 三列布局

這里的三列布局，主要分三種情況介紹，第一種是普通三列布局，還有兩種是比較有名的圣杯布局和雙飛翼布局（兩者都是實(shí)現(xiàn)一個(gè)兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局，區(qū)別在于雙飛翼布局比起圣杯布局，中間元素會(huì)多一個(gè)子元素，而左右元素需要定位relative）

2.2.1. 普通三列布局

我們這里實(shí)現(xiàn)的是，左中兩列定寬，右邊一列自適應(yīng)的布局，這個(gè)實(shí)際上和前面的兩列布局是類似的。

效果圖如下：

方案一. 定寬 + overflow:hidden

分析：這個(gè)方案和兩列布局方案二是相同的。

<style>
    .l, .c, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .c {
        width: 400px;
        background-color: blueviolet;
        float: left;
    }
    .r {
        background-color: brown;
        overflow: hidden;
    }
</style>
<body>
    <div class="l">定寬</div>
    <div class="c">定寬</div>
    <div class="r">自適應(yīng)</div>
</body>

方案二. flex布局

分析：這里布局原理和兩列布局中flex布局方式是相同的。

<style>
     .w {
         display: flex;
         height: 600px;
     }
     .l {
         width: 400px;
         background-color: aqua;
     }
     .c {
         width: 400px;
         background-color: blueviolet;
     }
     .r {
         flex: 1;
         background-color: brown;
     }
</style>
 <body>
     <div class="w">
         <div class="l">定寬</div>
         <div class="c">定寬</div>
         <div class="r">自適應(yīng)</div>
     </div>
 </body>

2.2.2. 圣杯布局

兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局（中間元素不需要嵌套子元素）

效果圖如下：

方案一. 左右兩側(cè)浮動(dòng)，中間元素使用margin

分析：這種方法就是左右兩邊浮動(dòng)，給定寬度，中間元素使用margin空出左右兩邊元素的位置，實(shí)現(xiàn)比較簡(jiǎn)單。

注意：這種方式，需要在書(shū)寫(xiě)html結(jié)構(gòu)時(shí)，將右側(cè)元素寫(xiě)在中間元素的前面，因?yàn)槿绻覀?cè)元素在中間元素后面，由于浮動(dòng)元素位置上不能高于（或平級(jí)）前面的非浮動(dòng)元素，導(dǎo)致右側(cè)元素會(huì)下沉。但是，中間元素一般都是頁(yè)面的核心部分，放在比較后面的位置，不利于SEO。

<style>
    .l, .c, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .c {
        background-color: blueviolet;
        margin-left: 400px;
        margin-right: 400px;
    }
    .r {
        width: 400px;
        background-color: brown;
        float: right;
    }
</style>
<body>
    <div class="l">定寬</div>
    <div class="r">定寬</div>
    <div class="c">自適應(yīng)</div>
</body>

方案二. 父容器使用margin，左中右元素均浮動(dòng)，利用定位和margin移動(dòng)到正確位置

分析：這種方法將中間元素c放置在最前面，有利于SEO。

注意：實(shí)現(xiàn)細(xì)節(jié)在參考下面代碼中的注釋。

<style>
    .w {
        /* margin-left對(duì)應(yīng)左邊元素l的寬度，margin-right對(duì)應(yīng)右邊元素r的寬度 */
        margin-left: 400px;
        margin-right: 400px;
    }
    .l, .c, .r {
        height: 600px;
        float: left;
    }
    .l {
        width: 400px;
        background-color: aqua;
        position: relative;
        /* 為了讓l元素從當(dāng)前行移動(dòng)到第一行同一位置*/
        margin-left: -100%;
        /* 移動(dòng)到中間元素左側(cè)正確位置 */
        left: -400px;
    }
    .c {
        width: 100%;
        background-color: blueviolet;
    }
    .r {
        width: 400px;
        background-color: brown;
        position: relative;
        /* 為了讓l元素從當(dāng)前行移動(dòng)到上一行*/
        margin-left: -400px;
        right: -400px;
    }
</style>
<body>
    <div class="w">
        <div class="c">自適應(yīng)</div>
        <div class="l">定寬</div>
        <div class="r">定寬</div>
    </div>
</body>

2.2.3. 雙飛翼布局

兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局（中間元素內(nèi)部增加子元素用于放置內(nèi)容）

效果圖如下：

方案一. 中間元素子元素設(shè)置margin，左中右元素均設(shè)置浮動(dòng)，左右元素通過(guò)margin移動(dòng)到正確位置

分析：這種方法為中間元素增加子元素作為內(nèi)容區(qū)域，通過(guò)子元素設(shè)置margin完成。

注意：和圣杯布局對(duì)照，有相似處，也有不同，實(shí)現(xiàn)的結(jié)果是一樣的。

<style>
    .l, .c, .r {
        height: 600px;
        float: left;
    }
    .l {
        width: 400px;
        background-color: aqua;
        /* 為了讓l元素從當(dāng)前行移動(dòng)到第一行同一位置*/
        margin-left: -100%;
    }
    .c {
        width: 100%;
        background-color: blue;
    }
    .i {
        height: 600px;
        background-color: blueviolet;
        margin-left: 400px;
        margin-right: 400px;
    }
    .r {
        width: 400px;
        background-color: brown;
         /* 為了讓r元素移動(dòng)到第一行*/
        margin-left: -400px;
    }
</style>
<body>
    <div class="c">
        <div class="i">自適應(yīng)</div>
    </div>
    <div class="l">定寬</div>
    <div class="r">定寬</div>
</body>

2.2.4. flex布局實(shí)現(xiàn)（中間自適應(yīng)，左右等寬）

分析：flex實(shí)現(xiàn)就很簡(jiǎn)單了，可以參照普通三列布局flex實(shí)現(xiàn)。

注意：還是要注意瀏覽器兼容性問(wèn)題。

<style>
    .w {
        display: flex;
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
    }
    .c {
        flex: 1;
        background-color: blueviolet;
    }
    .r {
        width: 400px;
        background-color: brown;
    }
</style>
<body>
    <div class="w">
        <div class="l">定寬</div>
        <div class="c">自適應(yīng)</div>
        <div class="r">定寬</div>
    </div>
</body>

2.3 多列等分布局

所謂多列等分布局，就是若干列在容器中自適應(yīng)等分寬度，我們以五列等分布局為例。

效果圖如下：

方案一. 浮動(dòng) + 百分?jǐn)?shù)平分

分析：這種方案就是每一列浮動(dòng)，之后按照百分比平分寬度，實(shí)現(xiàn)簡(jiǎn)單。

<style>
   .col {
       float: left;
       width: 20%;
       height: 300px;
   }
   .col1 {
       background-color: blue;
   }
   .col2 {
       background-color: blueviolet;
   }
   .col3 {
       background-color: aqua;
   }
   .col4 {
       background-color: beige;
   }
   .col5 {
       background-color: salmon;
   }
</style>
<body>
    <div class="w">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
        <div class="col col5"></div>
    </div>
</body>

方案二. 使用display: table布局

分析：父容器指定display: table，設(shè)置布局行為table-layout: fixed，指定每個(gè)表格等寬。

注意：table-layout: fixed是需要設(shè)置的，默認(rèn)情況下，列寬度由單元格內(nèi)容設(shè)定，設(shè)置之后，列寬由表格寬度和列寬度設(shè)定。

<style>
    .w {
        display: table;
        /* 列寬由表格寬度和列寬度設(shè)定 */
        table-layout: fixed;
        width: 100%;
    }
   .col {
       display: table-cell;
       height: 300px;
   }
   .col1 {
       background-color: blue;
   }
   .col2 {
       background-color: blueviolet;
   }
   .col3 {
       background-color: aqua;
   }
   .col4 {
       background-color: beige;
   }
   .col5 {
       background-color: salmon;
   }
</style>
<body>
    <div class="w">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
        <div class="col col5"></div>
    </div>
</body>

方案三. 使用column布局

分析：使用column布局，指定內(nèi)容區(qū)域需要分為5列即可。

注意：瀏覽器兼容性問(wèn)題。

<style>
     .w {
         /* 指定列數(shù) */
         column-count: 5;
         /* 指定列與列之間的間隙，默認(rèn)1em */
         column-gap: 0;
     }
     .col {
         height: 300px;
     }
     .col1 {
         background-color: blue;
     }
     .col2 {
         background-color: blueviolet;
     }
     .col3 {
         background-color: aqua;
     }
     .col4 {
         background-color: beige;
     }
     .col5 {
         background-color: salmon;
     }
</style>
 <body>
     <div class="w">
         <div class="col col1"></div>
         <div class="col col2"></div>
         <div class="col col3"></div>
         <div class="col col4"></div>
         <div class="col col5"></div>
     </div>
 </body>

方案四. 使用flex布局

分析：使用flex布局十分簡(jiǎn)單，指定每一列所占空間相同即可

<style>
     .w {
        display: flex;
     }
     .col {
         height: 300px;
         flex: 1;
     }
     .col1 {
         background-color: blue;
     }
     .col2 {
         background-color: blueviolet;
     }
     .col3 {
         background-color: aqua;
     }
     .col4 {
         background-color: beige;
     }
     .col5 {
         background-color: salmon;
     }
</style>
 <body>
     <div class="w">
         <div class="col col1"></div>
         <div class="col col2"></div>
         <div class="col col3"></div>
         <div class="col col4"></div>
         <div class="col col5"></div>
     </div>
 </body>
 </html>

2.4 多列等高布局

所謂多列等高布局，就是多類內(nèi)容可能不一樣，但是保證每一列的高度是相同的，這個(gè)高度應(yīng)該由內(nèi)容最多的那一列決定。

效果圖如下：

方案一. 使用display: table布局

分析：父元素設(shè)置display: table，子元素設(shè)置display: table-cell，這樣布局就是按照表格行為布局，表格單元格默認(rèn)等高。

 <style>
    .w {
        display: table;
    }
    .col {
        display: table-cell;
        width: 20%;
    }
    .col1 {
        background-color: blue;
    }
    .col2 {
        background-color: blueviolet;
    }
    .col3 {
        background-color: aqua;
    }
    .col4 {
        background-color: beige;
    }
    .col5 {
        background-color: salmon;
    }
</style>
 <body>
     <div class="w">
         <div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col3">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col4"></div>
         <div class="col col5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
     </div>
 </body>

方案二. 使用flex布局

分析：默認(rèn)情況下，display: flex的元素align-items屬性值為stretch，如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。

<style>
    .w {
        display: flex;
    }
    .col {
        flex: 1;
    }
    .col1 {
        background-color: blue;
    }
    .col2 {
        background-color: blueviolet;
    }
    .col3 {
        background-color: aqua;
    }
    .col4 {
        background-color: beige;
    }
    .col5 {
        background-color: salmon;
    }
</style>
 <body>
     <div class="w">
         <div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col3">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col4"></div>
         <div class="col col5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
     </div>
 </body>

3. 全屏布局

所謂全屏布局，就是實(shí)現(xiàn)經(jīng)典的頭部，內(nèi)容區(qū)，底部三大區(qū)域占滿全屏的布局，這種布局很常見(jiàn)。

實(shí)現(xiàn)效果如下：

分析：這里采用的方案是，頭部底部使用fixed定位，中間使用之前講到的兩列布局技術(shù)。

注意：頭部底部可以使用header, footer標(biāo)簽，內(nèi)容區(qū)域結(jié)構(gòu)與布局都是多種多樣的。

<style>
        html, body {
            margin: 0;
            overflow: hidden;
        }
        .header {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            height: 100px;
            background-color: salmon;
        }

        .w {
            position: fixed;
            left: 0;
            right: 0;
            top: 100px;
            bottom: 100px;
            overflow: auto;
            background-color: palevioletred;
        }

        .w .l {
            width: 400px;
            /* height: 100%; */
            position: fixed;
            left: 0;
            top: 100px;
            bottom: 100px;
            background-color: greenyellow;
        }

        .w .r {
            position: fixed;
            left: 400px;
            right: 0;
            top: 100px;
            bottom: 100px;
            background-color: blueviolet;
        }

        .footer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: 100px;
            background-color: goldenrod;
        }
</style>
    <body>
        <div class="header"></div>
        <div class="w">
            <div class="l"></div>
            <div class="r"></div>
        </div>
        <div class="footer"></div>
    </body>

本篇文章總結(jié)了一些常見(jiàn)布局的實(shí)現(xiàn)方案，css布局的實(shí)現(xiàn)方案很多，需要我們平時(shí)多去積累，選擇合適的方案。

最后，希望隨著時(shí)間的推移，兼容性不再成為我們技術(shù)實(shí)現(xiàn)的障礙，愿世界越來(lái)越美好。

最后送福利了，自己是從事了五年的前端工程師，整理了一份最全面前端學(xué)習(xí)資料，只要私信：“前端"等3秒后即可獲取地址，

里面概括應(yīng)用網(wǎng)站開(kāi)發(fā)，css，html，JavaScript，jQuery，Ajax，node，angular等。等多個(gè)知識(shí)點(diǎn)高級(jí)進(jìn)階干貨的相關(guān)視頻資料，等你來(lái)拿