一文詳解CSS常見的五大布局

文概要

本文將介紹如下幾種常見的布局：

一、單列布局

常見的單列布局有兩種：

header,content 和 footer 等寬的單列布局
header 與 footer 等寬,content 略窄的單列布局

1.如何實現

對于第一種，先通過對 header,content,footer 統一設置 width：1000px;或者 max-width：1000px(這兩者的區別是當屏幕小于 1000px 時，前者會出現滾動條，后者則不會，顯示出實際寬度);然后設置 margin:auto 實現居中即可得到。

<div class="header"></div> 
<div class="content"></div> 
<div class="footer"></div> 
.header{ 
 margin:0 auto; 
 max-width: 960px; 
 height:100px; 
 background-color: blue; 
} 
.content{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 400px; 
 background-color: aquamarine; 
} 
.footer{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 100px; 
 background-color: aqua; 
}

對于第二種，header、footer 的內容寬度不設置，塊級元素充滿整個屏幕，但 header、content 和 footer 的內容區設置同一個 width，并通過 margin:auto 實現居中。

<div class="header"> 
 <div class="nav"></div> 
</div> 
<div class="content"></div> 
<div class="footer"></div> 
.header{ 
 margin:0 auto; 
 max-width: 960px; 
 height:100px; 
 background-color: blue; 
} 
.nav{ 
 margin: 0 auto; 
 max-width: 800px; 
 background-color: darkgray; 
 height: 50px; 
} 
.content{ 
 margin: 0 auto; 
 max-width: 800px; 
 height: 400px; 
 background-color: aquamarine; 
} 
.footer{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 100px; 
 background-color: aqua; 
}

二、兩列自適應布局

兩列自適應布局是指一列由內容撐開，另一列撐滿剩余寬度的布局方式

1.float+overflow:hidden

如果是普通的兩列布局， 浮動+普通元素的 margin 便可以實現，但如果是自適應的兩列布局，利用 float+overflow:hidden 便可以實現，這種辦法主要通過 overflow 觸發 BFC,而 BFC 不會重疊浮動元素。由于設置 overflow:hidden 并不會觸發 IE6-瀏覽器的 haslayout 屬性，所以需要設置 zoom:1 來兼容 IE6-瀏覽器。具體代碼如下：

<div class="parent" style="background-color: lightgrey;"> 
 <div class="left" style="background-color: lightblue;"> 
 <p>left</p> 
 </div> 
 <div class="right" style="background-color: lightgreen;"> 
 <p>right</p> 
 <p>right</p> 
 </div> 
</div> 
.parent { 
overflow: hidden; 
zoom: 1; 
} 
.left { 
float: left; 
margin-right: 20px; 
} 
.right { 
overflow: hidden; 
zoom: 1; 
}

注意點:如果側邊欄在右邊時，注意渲染順序。即在 HTML 中，先寫側邊欄后寫主內容

2.Flexbox 布局

Flexbox 布局，也叫彈性盒子布局，區區簡單幾行代碼就可以實現各種頁面的的布局。

//html部分同上 
.parent { 
display:flex; 
} 
.right { 
margin-left:20px; 
flex:1; 
}

3.Grid 布局

Grid 布局，是一個基于網格的二維布局系統，目的是用來優化用戶界面設計。

//html部分同上 
.parent { 
display:grid; 
grid-template-columns:auto 1fr; 
grid-gap:20px 
}

三、三欄布局

特征：中間列自適應寬度，旁邊兩側固定寬度 ，實現三欄布局有多種方式：

1.浮動布局

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>Layout</title> 
 <style media="screen"> 
 html * { 
 padding: 0; 
 margin: 0; 
 } 
 .layout article div { 
 min-height: 150px; 
 } 
 </style> 
</head> 
<body> 
 <!--浮動布局 --> 
 <section class="layout float"> 
 <style media="screen"> 
 .layout.float . left { 
 float: left; 
 width: 300px; 
 background: red; 
 } 
 .layout.float .center { 
 background: yellow; 
 } 
 .layout.float . right { 
 float: right; 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-right-center"> 
 <div class="left"></div> 
 <div class="right"></div> // 右欄部分要寫在中間內容之前 
 <div class="center"> 
 <h2>浮動解決方案</h2> 
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
 </div> 
 </article> 
 </section> 
</body> 
</html>

這種布局方式，dom 結構必須是先寫浮動部分，然后再中間塊，否則右浮動塊會掉到下一行。浮動布局的優點就是比較簡單，兼容性也比較好。但浮動布局是有局限性的，浮動元素脫離文檔流，要做清除浮動，這個處理不好的話，會帶來很多問題，比如父容器高度塌陷等。

2.絕對定位布局

<!--絕對布局 --> 
 <section class="layout absolute"> 
 <style> 
 .layout.absolute . left-center- right>div{ 
 position: absolute;//三塊都是絕對定位 
 } 
 .layout.absolute . left { 
 left:0; 
 width: 300px; 
 background: red; 
 } 
 .layout.absolute .center { 
 right: 300px; 
 left: 300px;//離左右各三百 
 background: yellow; 
 } 
 .layout.absolute . right { 
 right: 0; 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>絕對定位解決方案</h2> 
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
 </div> 
 <div class="right"></div> 
 </article> 
 </section>

絕對定位布局優點就是快捷，設置很方便，而且也不容易出問題。缺點就是，容器脫離了文檔流，后代元素也脫離了文檔流，高度未知的時候，會有問題，這就導致了這種方法的有效性和可使用性是比較差的。

3.flexbox 布局

<!--flexbox布局--> 
 <section class="layout flexbox"> 
 <style> 
 .layout.flexbox .left-center- right{ 
 display: flex; 
 } 
 .layout.flexbox .left { 
 width: 300px; 
 background: red; 
 } 
 .layout.flexbox .center { 
 background: yellow; 
 flex: 1; 
 } 
 .layout.flexbox .right { 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>flexbox解決方案</h2> 
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
 </div> 
 <div class="right"></div> 
 </article> 
 </section>

flexbox 布局是 css3 里新出的一個，它就是為了解決上述兩種方式的不足出現的，是比較完美的一個。目前移動端的布局也都是用 flexbox。 flexbox 的缺點就是 IE10 開始支持，但是 IE10 的是-ms 形式的。

4.表格布局

<!--表格布局--> 
 <section class="layout table"> 
 <style> 
 .layout.table . left-center- right { 
 display: table; 
 height: 150px; 
 width: 100%; 
 } 
 .layout.table . left-center- right>div { 
 display: table-cell; 
 } 
 .layout.table . left { 
 width: 300px; 
 background: red; 
 } 
 .layout.table .center { 
 background: yellow; 
 } 
 .layout.table . right { 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>表格布局解決方案</h2> 
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
 </div> 
 <div class="right"></div> 
 </article> 
 </section>

表格布局的兼容性很好，在 flex 布局不兼容的時候，可以嘗試表格布局。當內容溢出時會自動撐開父元素。

表格布局也是有缺陷:① 無法設置欄邊距；② 對 seo 不友好；③ 當其中一個單元格高度超出的時候，兩側的單元格也是會跟著一起變高的，然而有時候這并不是我們想要的效果。

5.網格布局

<!--網格布局--> 
<section class="layout grid"> 
 <style> 
 .layout.grid .left-center- right { 
 display: grid; 
 width: 100%; 
 grid-template-columns: 300px auto 300px; 
 grid-template-rows: 150px;//行高 
 } 
 .layout.grid .left { 
 background: red; 
 } 
 .layout.grid .center { 
 background: yellow; 
 } 
 .layout.grid .right { 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>網格布局解決方案</h2> 
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
 </div> 
 <div class="right"></div> 
 </article> 
</section>

CSS Grid 是創建網格布局最強大和最簡單的工具。就像表格一樣，網格布局可以讓 Web 設計師根據元素按列或行對齊排列，但他和表格不同，網格布局沒有內容結構，從而使各種布局不可能與表格一樣。例如，一個網格布局中的子元素都可以定位自己的位置，這樣他們可以重疊和類似元素定位。

但網格布局的兼容性不好。IE10+上支持，而且也僅支持部分屬性。

6.圣杯布局

① 特點

比較特殊的三欄布局，同樣也是兩邊固定寬度，中間自適應，唯一區別是 dom 結構必須是先寫中間列部分，這樣實現中間列可以優先加載。

.container { 
 padding-left: 220px;//為左右欄騰出空間 
 padding-right: 220px; 
} 
.left { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: red; 
 margin-left: -100%; 
 position: relative; 
 left: -220px; 
} 
.center { 
 float: left; 
 width: 100%; 
 height: 500px; 
 background: yellow; 
} 
.right { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: blue; 
 margin-left: -200px; 
 position: relative; 
 right: -220px; 
} 
<article class="container"> 
 <div class="center"> 
 <h2>圣杯布局</h2> 
 </div> 
 <div class="left"></div> 
 <div class="right"></div> 
</article>

② 實現步驟

三個部分都設定為左浮動， 否則左右兩邊內容上不去，就不可能與中間列同一行 。然后設置 center 的寬度為 100%( 實現中間列內容自適應 )，此時，left 和 right 部分會跳到下一行

通過設置 margin-left 為負值讓 left 和 right 部分回到與 center 部分同一行

通過設置父容器的 padding-left 和 padding-right，讓左右兩邊留出間隙。

通過設置相對定位，讓 left 和 right 部分移動到兩邊。

③ 缺點

center 部分的最小寬度不能小于 left 部分的寬度，否則會 left 部分掉到下一行
如果其中一列內容高度拉長(如下圖)，其他兩列的背景并不會自動填充。(借助等高布局正padding+負margin可解決，下文會介紹)

7.雙飛翼布局

① 特點

同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。而且任何一欄都可以是最高欄，不會出問題。

.container { 
 min-width: 600px;//確保中間內容可以顯示出來，兩倍 left寬+ right寬 
} 
.left { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: red; 
 margin-left: -100%; 
} 
.center { 
 float: left; 
 width: 100%; 
 height: 500px; 
 background: yellow; 
} 
.center .inner { 
 margin: 0 200px; //新增部分 
} 
.right { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: blue; 
 margin-left: -200px; 
} 
<article class="container"> 
 <div class="center"> 
 <div class="inner">雙飛翼布局</div> 
 </div> 
 <div class="left"></div> 
 <div class="right"></div> 
</article>

② 實現步驟(前兩步與圣杯布局一樣)

三個部分都設定為左浮動，然后設置 center 的寬度為 100%，此時，left 和 right 部分會跳到下一行；
通過設置 margin-left 為負值讓 left 和 right 部分回到與 center 部分同一行；
center 部分增加一個內層 div，并設 margin: 0 200px；

③ 缺點

多加一層 dom 樹節點，增加渲染樹生成的計算量 。

④ 圣杯布局和雙飛翼布局實現方式對比:

兩種布局方式都是把主列放在文檔流最前面，使主列優先加載。
兩種布局方式在實現上也有相同之處，都是讓三列浮動，然后通過負外邊距形成三列布局。
兩種布局方式的不同之處在于如何處理中間主列的位置： 圣杯布局是利用父容器的左、右內邊距+兩個從列相對定位 ; 雙飛翼布局是把主列嵌套在一個新的父級塊中利用主列的左、右外邊距進行布局調整

四、等高列布局

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的實現包括偽等高和真等高,偽等高只是看上去等高而已,真等高是實實在在的等高。

1.利用背景圖片

這種方法是我們實現等高列最早使用的一種方法，就是使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假象。實現方法簡單，兼容性強，不需要太多的css樣式就可以輕松實現,但此方法不適合流體布局等高列的布局。

在制作樣式之前需要一張類似下面的背景圖：

<div class=”container clearfix”> 
 <div class=”left”></div> 
 <div class=”content”></div> 
 <div class=”right”></div> 
</div> 
.container { 
background: url("column.png") repeat-y; 
width: 960px; 
margin: 0 auto; 
} 
.left { 
float: left; 
width: 220px; 
} 
.content { 
float: left; 
width: 480px; 
} 
.right { 
float: left; 
width: 220px; 
}

2.利用正padding+負margin

我們通過等布局便可解決圣杯布局的第二點缺點，因為背景是在 padding 區域顯示的，設置一個大數值的 padding-bottom，再設置相同數值的負的 margin-bottom，并在所有列外面加上一個容器，并設置 overflow:hidden 把溢出背景切掉。這種可能實現多列等高布局，并且也能實現列與列之間分隔線效果，結構簡單，兼容所有瀏覽器。新增代碼如下：

.center, 
 .left, 
 .right { 
 padding-bottom: 10000px; 
 margin-bottom: -10000px; 
 } 
 .container { 
 padding-left: 220px; 
 padding-right: 220px; 
 overflow: hidden;//把溢出背景切掉 
 }

3.模仿表格布局

這是一種非常簡單，易于實現的方法。不過兼容性不好，在ie6-7無法正常運行。

 <div class="container table"> 
 <div class="containerInner tableRow"> 
 <div class="column tableCell cell1"> 
 <div class="left aside"> 
 .... 
 </div> 
 </div> 
 <div class="column tableCell cell2"> 
 <div class="content section"> 
 ... 
 </div> 
 </div> 
 <div class="column tableCell cell3"> 
 <div class="right aside"> 
 ... 
 </div> 
 </div> 
 </div> 
 </div> 
.table { 
width: auto; 
min-width: 1000px; 
margin: 0 auto; 
padding: 0; 
display: table; 
} 
.tableRow { 
display: table-row; 
} 
.tableCell { 
display: table-cell; 
width: 33%; 
} 
.cell1 { 
background: #f00; 
height: 800px; 
} 
.cell2 { 
background: #0f0; 
} 
.cell3 { 
background: #00f; 
}

4.使用邊框和定位

這種方法是使用邊框和絕對定位來實現一個假的高度相等列的效果。結構簡單，兼容各瀏覽器，容易掌握。假設你需要實現一個兩列等高布局，側欄高度要和主內容高度相等。

#wrapper { 
width: 960px; 
margin: 0 auto; 
} 
#mainContent { 
border-right: 220px solid #dfdfdf; 
position: absolute; 
width: 740px; 
height: 800px; 
background: green; 
} 
#sidebar { 
background: #dfdfdf; 
margin-left: 740px; 
position: absolute; 
height: 800px; 
width: 220px; 
} 
<div id="wrapper"> 
 <div id="mainContent">...</div> 
 <div id="sidebar">...</div> 
</div>

五、粘連布局

1.特點

有一塊內容 <main> ，當 <main> 的高康足夠長的時候，緊跟在 <main> 后面的元素 <footer> 會跟在 <main> 元素的后面。
當 <main> 元素比較短的時候(比如小于屏幕的高度),我們期望這個 <footer> 元素能夠“粘連”在屏幕的底部

具體代碼如下：

main

footer

* { 
 margin: 0; 
 padding: 0; 
 } 
 html, 
 body { 
 height: 100%;//高度一層層繼承下來 
 } 
 #wrap { 
 min-height: 100%; 
 background: pink; 
 text-align: center; 
 overflow: hidden; 
 } 
 #wrap .main { 
 padding-bottom: 50px; 
 } 
 #footer { 
 height: 50px; 
 line-height: 50px; 
 background: deeppink; 
 text-align: center; 
 margin-top: -50px; 
 }

2.實現步驟

(1)footer 必須是一個獨立的結構，與 wrap 沒有任何嵌套關系

(2)wrap 區域的高度通過設置 min-height，變為視口高度

(3)footer 要使用 margin 為負來確定自己的位置

(4)在 main 區域需要設置 padding-bottom。這也是為了防止負 margin 導致 footer 覆蓋任何實際內容。

參考文章

雙飛翼布局介紹-始于淘寶 UED
CSS 三欄布局的四種方法
CSS 兩列布局---左側固定，右側自適應
兩列自適應布局的四種思路
css 常見布局之九：三欄布局的常見實現
【布局】聊聊為什么淘寶要提出「雙飛翼」布局
CSS 的單列布局與二&三列布局
八種創建等高列布局

HTML的世界里，一切都是由容器和內容構成的。容器，就如同一個個盒子，用來裝載各種元素；而內容，則是這些盒子里的珍寶。理解了這一點，我們就邁出了探索HTML布局的第一步。

在HTML中，布局標簽主要用于控制頁面的結構和樣式。本文將介紹一些常用的布局標簽及其使用方法，并通過代碼示例進行演示。

一、理解布局的重要性

布局在我們前端開發中擔任什么樣的角色呢？想象一下，你面前有一堆散亂的積木，無序地堆放在那里。

而你的任務，就是將這些積木按照圖紙拼裝成一個精美的模型。HTML布局標簽的作用就像那張圖紙，它指導瀏覽器如何正確、有序地顯示內容和元素，確保網頁的結構和外觀既美觀又實用。

下面我們就來看看在HTML中常用的基礎布局標簽有哪些，如何使用這些布局標簽完成我們的開發目標。

二、常用的布局標簽

1、div標簽

div標簽是一個塊級元素，它獨占一行，用于對頁面進行區域劃分。它可以包含其他HTML元素，如文本、圖片、鏈接等。通過CSS樣式可以設置div的布局和樣式。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>

<div>這是一個div元素

</div>

</body>
</html>

運行結果：

2、span標簽

span標簽是一個內聯元素，它不獨占一行，用于對文本進行區域劃分。它主要用于對文本進行樣式設置，如字體、顏色等。與div類似，span也可以包含其他HTML元素。
示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .text {
    color: blue;
    font-size: 20px;
  }
</style>
</head>
<body>

<p>這是一個<span>span元素</span>。</p>

</body>
</html>

運行結果：

3、table標簽

table標簽用于創建表格，它包含多個tr（行）元素，每個tr元素包含多個td（單元格）或th（表頭單元格）元素。

<table> 定義一個表格，<tr> 定義表格中的行，而 <td> 則定義單元格。通過這三個標簽，我們可以創建出整齊劃一的數據表，讓信息的展示更加直觀明了。

需要注意的是：

<table>和</table>標記著表格的開始和結束。
<tr>和</tr>標記著行的開始和結束，幾組表示該表格有幾行。
<td>和</td>標記著單元格的開始和結束，表示這一行中有幾列。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>
</body>
</html>

運行結果：

4、form標簽

<form>標簽的主要作用是定義一個用于用戶輸入的HTML表單。這個表單可以包含各種輸入元素，如文本字段、復選框、單選按鈕、提交按鈕等。

<form>元素可以包含以下一個或多個表單元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>和<output>等。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  form {
    display: flex;
    flex-direction: column;
  }
</style>
</head>
<body>

<form>
  <label for="username">用戶名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密碼：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

</body>
</html>

運行結果：

5、列表標簽

1）無序列表

指沒有順序的列表項目
始于<ul>標簽，每個列表項始于<li>
type屬性有三個選項：disc實心圓、circle空心圓、square小方塊。默認屬性是disc實心圓。

示例代碼：

<!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--無序列表</title>
</head>
<body>
<ul>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
</ul>
<ul>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
</ul>
<ul>
<li type = "square">添加square屬性</li>
<li type = "square">添加square屬性</li>
<li type = "squaare">添加square屬性</li>
</ul>
</body>
</html>

運行結果：

也可以使用CSS list-style-type屬性定義html無序列表樣式。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！「鏈接」

2）有序列表

指按照字母或數字等順序排列的列表項目。
其結果是帶有前后順序之分的編號,如果插入和刪除一個列表項，編號會自動調整。
始于<ol>標簽，每個列表項始于<li>。

示例代碼：

<ol>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
<li value ="20">第四項</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
</ol>

運行結果：

同樣也可以使用CSS list-style-type屬性定義html有序列表樣式。

3）自定義列表

自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
以<dl>標簽開始。每個自定義列表項以<dt>開始。每個自定義列表項的定義以<dd>開始。
用于對術語或名詞進行解釋和描述，自定義列表的列表項前沒有任何項目符號。
基本語法：

<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>

<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
</dl>

<dl>即“definition list（定義列表）”，
<dt>即“definition term（定義名詞）”，
而<dd>即“definition description（定義描述）”。

示例代碼：

<dl>
<dt>計算機</dt>
<dd>用來計算的儀器</dd>

<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置</dd>
</dl>

運行結果：

以上就是HTML中常用的布局標簽及其使用方法。在實際開發中，還可以結合CSS和JavaScript來實現更復雜的布局和交互效果。

掌握了這些HTML常用布局標簽，你已經擁有了構建網頁的基礎工具。記住，好的布局不僅需要技術，更需要創意和對細節的關注。現在，打開你的代碼編輯器，開始你的布局設計之旅吧！

SS 網格布局(Grid Layout) 是CSS中最強大的布局系統。這是一個二維系統，這意味著它可以同時處理列和行，不像 flexbox 那樣主要是一維系統。你可以通過將CSS規則應用于父元素（成為網格容器）和該元素的子元素（網格元素），來使用網格布局。

引言

CSS網格布局（又名“網格”）是一個二維的基于網格的布局系統，其目的只在于完全改變我們設計基于網格的用戶界面的方式。 CSS一直用來布局網頁，但一直都不完美。一開始我們使用table 做布局，然后轉向浮動、定位以及inline-block，但所有這些方法本質上都是 Hack 的方式，并且遺漏了很多重要的功能（例如垂直居中）。 Flexbox的出現在一定程度上解決了這個問題，但是它的目的是為了更簡單的一維布局，而不是復雜的二維布局（Flexbox和Grid實際上一起工作得很好）。只要我們一直在制作網站，我們就一直在為解決布局問題不斷探索，而Grid是第一個專門為解決布局問題而生的CSS模塊。

有兩個東西，啟發我寫這篇指南。第一個是雷切爾·安德魯（Rachel Andrew）的書為CSS Grid布局準備。這本書對網格布局做了徹底、清晰的介紹，也是是整篇文章的基礎，我強烈建議你購買并閱讀他的書。我的另一個重要靈感是Chris Coyier的Flexbox完全指南，當需要查閱 flexbox 的一切資料時我就會找這篇文章。這篇文章幫助了很多人學習 Flex 布局，也是 Google 上搜索“flexbox”關鍵字排名第一的文章。你會發現他的文章和我的很多相似之處，有最好的范例在那放著為什么咱不偷師學著寫呢？

本指南的目的是介紹網格概念，因為它們存在于最新版本的規范中。因此我不會覆蓋過時的IE語法，而且隨著規范的成熟，我會盡最大努力保存更新本指南。

基礎知識以及瀏覽器支持情況

一開始你需要使用display：grid把容器元素定義為一個網格，使用grid-template-columns和grid-template-rows設置列和行大小，然后使用grid-column 和 grid-row把它的子元素放入網格。與flexbox類似，網格子元素的原始順序不重要。你的可以在 CSS 里以任意順序放置它們，這使得使用媒體查詢重新排列網格變得非常容易。想象一下，我們需要定義整個頁面的布局，然后為了適應不同的屏幕寬度完全重新排列，我們只需要幾行CSS就能實現這個需求。網格是有史以來最強大的CSS模塊之一。

截至2017年3月，許多瀏覽器都提供了原生的、不加前綴的對CSS Grid的支持，比如 Chrome（包括Android），Firefox，Safari（包括iOS）和Opera。另一方面，Internet Explorer 10和11支持它，但需要使用過時的語法。 Edge瀏覽器已經宣布將支持標準的Grid語法，但暫未支持。

瀏覽器支持的詳細數據可在Caniuse查看。其中里面的數字表示該版本以上的瀏覽器支持Grid。

桌面瀏覽器

移動端 / 平板

除了微軟之外，瀏覽器制造商在 Grid 規范完全落地以前似乎并沒有放手讓 Gird 野生也長的打算。這是一件好事，這意味著我們不需要再去學習各種瀏覽器兼容版本的舊語法。

在生產環境中使用Grid只是時間問題，但現在是我們該學習的時候了。

重要術語

在深入了解網格的概念之前，理解術語是很重要的。由于這里所涉及的術語在概念上都是相似的，如果不先記住它們在網格規范中定義的含義，則很容易將它們彼此混淆。但是不用太擔心，這些術語并不多。

Grid Container

設置了 display: gird 的元素。這是所有 grid item 的直接父項。在下面的例子中，.container 就是是 grid container。

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

Grid Item

Grid 容器的孩子（直接子元素）。下面的 .item 元素就是 grid item，但 .sub-item不是。

<div class="container">
 <div class="item"></div> 
 <div class="item">
 <p class="sub-item"></p>
 </div>
 <div class="item"></div>
</div>

Grid Line

這個分界線組成網格結構。它們既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”），并位于行或列的任一側。下面例中的黃線就是一個列網格線。

Grid Track

兩個相鄰網格線之間的空間。你可以把它們想象成網格的列或行。下面是第二行和第三行網格線之間的網格軌道。

Grid Cell

兩個相鄰的行和兩個相鄰的列網格線之間的空間。它是網格的一個“單元”。下面是行網格線1和2之間以及列網格線2和3的網格單元。

Grid Area

四個網格線包圍的總空間。網格區域可以由任意數量的網格單元組成。下面是行網格線1和3以及列網格線1和3之間的網格區域。

Grid 屬性列表

Grid Container 的全部屬性

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flowgrid

Grid Items 的全部屬性

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self

父容器(Grid Container)的屬性

display

將元素定義為 grid contaienr，并為其內容建立新的網格格式化上下文(grid formatting context)。

值:

grid - 生成一個塊級(block-level)網格inline-grid - 生成一個行級(inline-level)網格subgrid - 如果你的 grid container 本身就是一個 grid item（即,嵌套網格），你可以使用這個屬性來表示你想從它的父節點獲取它的行/列的大小，而不是指定它自己的大小。

.container {
 display: grid | inline-grid | subgrid;
}

注意：column, float, clear, 以及 vertical-align 對一個 grid container 沒有影響

grid-template-columns / grid-template-rows

使用以空格分隔的多個值來定義網格的列和行。這些值表示軌道大小(track size)，它們之間的空格代表表格線(grid line)。

.container {
 grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
 grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

例子:

(如果未顯示的給網格線命名)，軌道值之間僅僅有空格時，網格線會被自動分配數字名稱：

.container {
 grid-template-columns: 40px 50px auto 50px 40px;
 grid-template-rows: 25% 100px auto;
}

但你可以給網格線指定確切的命名。注意中括號里的網格線命名語法：

.container {
 grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
 grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

需要注意的是，一個網格線可以有不止一個名字。例如，這里第2條網格線有兩個名字：row1-end 和 row2-start：

.container {
 grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

如果你的定義中包含重復的部分，則可以使用repeat() 符號來簡化寫法：

.container {
 grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

上面的寫法和下面等價：

.container {
 grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

“fr”單位允許您將軌道大小設置為網格容器自由空間的一部分。例如，下面的代碼會將每個 grid item 為 grid container 寬度的三分之一：

.container {
 grid-template-columns: 1fr 1fr 1fr;
}

自由空間是在排除所有不可伸縮的 grid item 之后計算得到的。在下面的示例中，fr單位可用的自由空間總量不包括50px:

.container {
 grid-template-columns: 1fr 50px 1fr 1fr;
}

grid-template-areas

通過引用 grid-area屬性指定的網格區域的名稱來定義網格模板。重復網格區域的名稱導致內容擴展到這些單元格。點號表示一個空單元格。語法本身提供了網格結構的可視化。

值：

<grid-area-name> - 使用 grid-area 屬性設置的網格區域的名稱. - 點號代表一個空網格單元none - 沒有定義網格區域

舉例：

.item-a {
 grid-area: header;
}
.item-b {
 grid-area: main;
}
.item-c {
 grid-area: sidebar;
}
.item-d {
 grid-area: footer;
}
.container {
 grid-template-columns: 50px 50px 50px 50px;
 grid-template-rows: auto;
 grid-template-areas: 
 "header header header header"
 "main main . sidebar"
 "footer footer footer footer";
}

這將創建一個四列寬三行高的網格。整個第一行將由 header 區域組成。中間一行將由兩個 main 區域、一個空單元格和一個 sidebar 區域組成。最后一行是footer區域組成。

你的聲明中的每一行都需要有相同數量的單元格。

您可以使用任意數量的相鄰的.來聲明單個空單元格。只要這些點號之間沒有空格，他們就代表了一個單一的單元格。

需要注意的是你不是在用這個語法命名網格線，而是在命名區域。當你使用這種語法時，區域兩端的網格線實際上是自動命名的。比如，如果網格區域的名稱是foo，那么區域的起始的行網格線和列網格線名稱是 foo-start，并且區域終點的行網格線和列網格線名稱是 foo-end。這意味著某些網格線可能有多個名稱，比如上面的例子中最左邊的一條網格線有三個名字：header-start，main-start 和 footer-start。

grid-template

在單個聲明中定義 grid-template-rows、grid-template-columns、grid-template-areas 的簡寫。

值：

none - 將三個屬性都設置為其初始值subgrid - 把 grid-template-rows 和 grid-template-columns 設置為 subgrid, 并且 grid-template-areas 設置為初始值grid-template-rows / <grid-template-columns - 把 grid-template-columns 和 grid-template-rows 設置為指定值, 與此同時, 設置 grid-template-areas 為 none

.container {
 grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}

它也可以使用一個更復雜但相當方便的語法來指定這三個值。一個例子：

.container {
 grid-template:
 [row1-start] "header header header" 25px [row1-end]
 [row2-start] "footer footer footer" 25px [row2-end]
 / auto 50px auto;
}

以上等價于：

.container {
 grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
 grid-template-columns: auto 50px auto;
 grid-template-areas: 
 "header header header" 
 "footer footer footer";
}

由于 grid-template 不會重置隱式網格屬性（grid-auto-columns，grid-auto-rows和grid-auto-flow），而這可能是大多數情況下你想要做的。因此建議使用grid屬性來代替grid-template。

grid-column-gap / grid-row-gap

指定網格線的大小，你可以把它想象為設置列/行之間的間距的寬度。

值：

line-size - 一個長度值

.container {
 grid-column-gap: <line-size>;
 grid-row-gap: <line-size>;
}

舉例：

.container {
 grid-template-columns: 100px 50px 100px;
 grid-template-rows: 80px auto 80px; 
 grid-column-gap: 10px;
 grid-row-gap: 15px;
}

只能在列/行之間創建縫隙，而不是在外部邊緣創建。

grid-gap

grid-row-gap 和 grid-column-gap 的縮寫

.container {
 grid-gap: <grid-row-gap> <grid-column-gap>;
}

Example:

.container {
 grid-template-columns: 100px 50px 100px;
 grid-template-rows: 80px auto 80px; 
 grid-gap: 10px 15px;
}

如果沒有指定 grid-row-gap，則會被設置為與 grid-column-gap 相同的值。

justify-items

沿著行軸對齊網格內的內容（與之對應的是 align-items, 即沿著列軸對齊），該值適用于容器內的所有的 grid items。

值：

start: 內容與網格區域的左端對齊end: 內容與網格區域的右端對齊center: 內容位于網格區域的中間位置stretch: 內容寬度占據整個網格區域空間(這是默認值)

.container {
 justify-items: start | end | center | stretch;
}

舉例：

.container {
 justify-items: start;
}

.container{
 justify-items: end;
}

.container {
 justify-items: center;
}

.container {
 justify-items: stretch;
}

也可以通過給單個 grid item 設置justify-self屬性來達到上述效果。

align-items

沿著列軸對齊grid item 里的內容（與之對應的是使用 justify-items 設置沿著行軸對齊），該值適用于容器內的所有 grid items。

值：

start: 內容與網格區域的頂端對齊end: 內容與網格區域的底部對齊center: 內容位于網格區域的垂直中心位置stretch: 內容高度占據整個網格區域空間(這是默認值)

.container {
 align-items: start | end | center | stretch;
}

舉例:

.container {
 align-items: start;
}

.container {
 align-items: end;
}

.container {
 align-items: center;
}

.container {
 align-items: stretch;
}

也可以通過給單個 grid item 設置align-self屬性來達到上述效果。

justify-content

有時，網格的總大小可能小于其網格容器的大小。如果你的所有 grid items 都使用像px這樣的非彈性單位來設置大小，則可能發生這種情況。此時，你可以設置網格容器內的網格的對齊方式。此屬性沿著行軸對齊網格（與之對應的是 align-content, 沿著列軸對齊）。

值：

start - 網格與網格容器的左邊對齊end - 網格與網格容器的右邊對齊center - 網格與網格容器的中間對齊stretch - 調整g rid item 的大小，讓寬度填充整個網格容器space-around - 在 grid item 之間設置均等寬度的空白間隙，其外邊緣間隙大小為中間空白間隙寬度的一半space-between - 在 grid item 之間設置均等寬度空白間隙，其外邊緣無間隙space-evenly - 在每個 grid item 之間設置均等寬度的空白間隙，包括外邊緣

.container {
 justify-content: start | end | center | stretch | space-around | space-between | space-evenly; 
}

舉例：

.container {
 justify-content: start;
}

.container {
 justify-content: end; 
}

.container {
 justify-content: center; 
}

.container {
 justify-content: stretch; 
}

.container {
 justify-content: space-around; 
}

.container {
 justify-content: space-between; 
}

.container {
 justify-content: space-evenly; 
}

align-content

有時，網格的總大小可能小于其網格容器的大小。如果你的所有 grid items 都使用像px這樣的非彈性單位來設置大小，則可能發生這種情況。此時，你可以設置網格容器內的網格的對齊方式。此屬性沿著列軸對齊網格（與之對應的是 justify-content, 即沿著行軸對齊）。

值：

start - 網格與網格容器的頂部對齊end - 網格與網格容器的底部對齊center - 網格與網格容器的中間對齊stretch - 調整 grid item 的大小，讓高度填充整個網格容器space-around - 在 grid item 之間設置均等寬度的空白間隙，其外邊緣間隙大小為中間空白間隙寬度的一半space-between - 在 grid item 之間設置均等寬度空白間隙，其外邊緣無間隙space-evenly - 在每個 grid item 之間設置均等寬度的空白間隙，包括外邊緣

.container {
 align-content: start | end | center | stretch | space-around | space-between | space-evenly; 
}

舉例：

.container {
 align-content: start; 
}

.container {
 align-content: end; 
}

.container {
 align-content: center; 
}

.container {
 align-content: stretch; 
}

.container {
 align-content: space-around; 
}

.container {
 align-content: space-between; 
}

.container {
 align-content: space-evenly; 
}

grid-auto-columns / grid-auto-rows

指定自動生成的網格軌道（又名隱式網格軌道）的大小。隱式網格軌道在你顯式的定位超出指定網格范圍的行或列（使用 grid-template-rows/grid-template-columns）時被創建。

值：

<track-size> - 可以是一個長度值，一個百分比值，或者一個自由空間的一部分（使用 fr 單位）

.container {
 grid-auto-columns: <track-size> ...;
 grid-auto-rows: <track-size> ...;
}

為了說明如何創建隱式網格軌道，思考如下代碼：

.container {
 grid-template-columns: 60px 60px;
 grid-template-rows: 90px 90px
}

這里創建了一個 2x2的網格。

但是，現在想象一下，使用 grid-column 和 grid-row 來定位你的網格項目，如下所示：

.item-a {
 grid-column: 1 / 2;
 grid-row: 2 / 3;
}
.item-b {
 grid-column: 5 / 6;
 grid-row: 2 / 3;
}

這里我們指定 .item-b開始于列網格線 5 并結束于在列網格線 6，但我們并未定義列網格線 5 或 6。因為我們引用不存在的網格線，寬度為0的隱式軌道的就會被創建用與填補間隙。我們可以使用 grid-auto-columns 和 grid-auto-rows屬性來指定這些隱式軌道的寬度：

.container {
 grid-auto-columns: 60px;
}

grid-auto-flow

如果你存在沒有顯示指明放置在網格上的 grid item，則自動放置算法會自動放置這些項目。而該屬性則用于控制自動布局算法的工作方式。

值：

row - 告訴自動布局算法依次填充每行，根據需要添加新行column - 告訴自動布局算法依次填充每列，根據需要添加新列dense - 告訴自動布局算法，如果后面出現較小的 grid item，則嘗試在網格中填充空洞

.container {
 grid-auto-flow: row | column | row dense | column dense
}

需要注意的是，dense 可能導致您的 grid item 亂序。

舉例，考慮如下 HTML：

<section class="container">
 <div class="item-a">item-a</div>
 <div class="item-b">item-b</div>
 <div class="item-c">item-c</div>
 <div class="item-d">item-d</div>
 <div class="item-e">item-e</div>
</section>

你定義一個有5列和2行的網格，并將 grid-auto-flow 設置為 row（這也是默認值）：

.container {
 display: grid;
 grid-template-columns: 60px 60px 60px 60px 60px;
 grid-template-rows: 30px 30px;
 grid-auto-flow: row;
}

當把 grid item 放在網格上時，你只把其中兩個設置了固定的位置：

.item-a {
 grid-column: 1;
 grid-row: 1 / 3;
}
.item-e {
 grid-column: 5;
 grid-row: 1 / 3;
}

因為我們將 grid-auto-flow 設置為row，所以我們的grid就像這樣。注意觀察我們沒有做設置的三個項目（item-b，item-c和item-d）是如何在剩余的行水平擺放位置的：

如果我們將 grid-auto-flow 設置為 column，則 item-b，item-c 和 item-d 以列的順序上下擺放：

.container {
 display: grid;
 grid-template-columns: 60px 60px 60px 60px 60px;
 grid-template-rows: 30px 30px;
 grid-auto-flow: column;
}

grid

在單個屬性中設置所有以下屬性的簡寫：grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow。它同時也將 sets grid-column-gap 和 grid-row-gap 設置為它們的初始值，即使它們不能被此屬性顯示設置。

值：

none - 將所有子屬性設置為其初始值<grid-template-rows> / <grid-template-columns> - 將 grid-template-rows 和 grid-template-columns 分別設置為指定值，將所有其他子屬性設置為其初始值<grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ] - 接受所有與grid-auto-flow，grid-auto-rows和grid-auto-columns相同的值。如果省略grid-auto-columns，則將其設置為為grid-auto-rows指定的值。如果兩者都被省略，則它們被設置為它們的初始值

.container {
 grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

舉例：

以下代碼寫法等價

.container {
 grid: 200px auto / 1fr auto 1fr;
}
.container {
 grid-template-rows: 200px auto;
 grid-template-columns: 1fr auto 1fr;
 grid-template-areas: none;
}

以下代碼寫法等價

.container {
 grid: column 1fr / auto;
}
.container {
 grid-auto-flow: column;
 grid-auto-rows: 1fr;
 grid-auto-columns: auto;
}

它也可用使用一個更復雜但相當方便的語法來一次設置所有內容。你可以指定 grid-template-areas、grid-template-rows 以及 grid-template-columns，并將所有其他子屬性設置為其初始值。你現在所做的是在其網格區域內，指定網格線名稱和內聯軌道大小。可以看下面的例子：

.container {
 grid: [row1-start] "header header header" 1fr [row1-end]
 [row2-start] "footer footer footer" 25px [row2-end]
 / auto 50px auto;
}

上述代碼等價于

.container {
 grid-template-areas: 
 "header header header"
 "footer footer footer";
 grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
 grid-template-columns: auto 50px auto; 
}

孩子(Grid Items)的屬性

grid-column-start / grid-column-end / grid-row-start /grid-row-end

使用特定的網格線確定 grid item 在網格內的位置。grid-column-start/grid-row-start 屬性表示grid item的網格線的起始位置，grid-column-end/grid-row-end屬性表示網格項的網格線的終止位置。

值：

<line>: 可以是一個數字來指代相應編號的網格線，也可使用名稱指代相應命名的網格線span <number>: 網格項將跨越指定數量的網格軌道span <name>: 網格項將跨越一些軌道，直到碰到指定命名的網格線auto: 自動布局，或者自動跨越，或者跨越一個默認的軌道

.item {
 grid-column-start: <number> | <name> | span <number> | span <name> | auto
 grid-column-end: <number> | <name> | span <number> | span <name> | auto
 grid-row-start: <number> | <name> | span <number> | span <name> | auto
 grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

舉例：

.item-a {
 grid-column-start: 2;
 grid-column-end: five;
 grid-row-start: row1-start
 grid-row-end: 3
}

.item-b {
 grid-column-start: 1;
 grid-column-end: span col4-start;
 grid-row-start: 2
 grid-row-end: span 2
}

如果沒有聲明 grid-column-end / grid-row-end，默認情況下，該網格項將跨越1個軌道。

網格項可以相互重疊。您可以使用z-index來控制它們的堆疊順序。

grid-column / grid-row

grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end 的簡寫形式。

值：

<start-line> / <end-line> - 每個值的用法都和屬性分開寫時的用法一樣

.item {
 grid-column: <start-line> / <end-line> | <start-line> / span <value>;
 grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

舉例：

.item-c {
 grid-column: 3 / span 2;
 grid-row: third-line / 4;
}

如果沒有指定結束行值，則該網格項默認跨越1個軌道。

grid-area

給 grid item 進行命名以便于使用 grid-template-areas 屬性創建模板時來進行引用。另外也可以做為 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫形式。

值：

<name> - 你的命名<row-start> / <column-start> / <row-end> / <column-end> - 可以是數字，也可以是網格線的名字

.item {
 grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

舉例:

給一個網格項命名

.item-d {
 grid-area: header
}

作為 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫:

.item-d {
 grid-area: 1 / col4-start / last-line / 6
}

justify-self

沿著行軸對齊grid item 里的內容（與之對應的是 align-self, 即沿列軸對齊）。此屬性對單個網格項內的內容生效。

值：

start - 將內容對齊到網格區域的左端end - 將內容對齊到網格區域的右端center - 將內容對齊到網格區域的中間stretch - 填充網格區域的寬度 (這是默認值)

舉例：

.item-a {
 justify-self: start;
}

.item-a {
 justify-self: end;
}

.item-a {
 justify-self: center;
}

.item-a {
 justify-self: stretch;
}

要為網格中的所有grid items 設置對齊方式，也可以通過 justify-items 屬性在網格容器上設置此行為。

align-self

沿著列軸對齊grid item 里的內容（與之對應的是 justify-self, 即沿行軸對齊）。此屬性對單個網格項內的內容生效。

值：

start - 將內容對齊到網格區域的頂部end - 將內容對齊到網格區域的底部center - 將內容對齊到網格區域的中間stretch - 填充網格區域的高度 (這是默認值)

.item {
 align-self: start | end | center | stretch;
}

舉例:

.item-a {
 align-self: start;
}

.item-a {
 align-self: end;
}

.item-a {
 align-self: center;
}

.item-a {
 align-self: stretch;
}

要為網格中的所有grid items 統一設置對齊方式，也可以通過 align-items 屬性在網格容器上設置此行為。

譯者：若愚老師

原文鏈接：https://zhuanlan.zhihu.com/p/33030746

在線咨詢

上一篇：前端程序員不可忽略的 11 個有用的 HTML 屬性
下一篇：寫個網頁更簡單了！讓AI根據手繪原型生成HTML - 教程+代碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一文詳解CSS常見的五大布局

一、理解布局的重要性

二、常用的布局標簽

1、div標簽

2、span標簽

3、table標簽

4、form標簽

5、列表標簽

1）無序列表

2）有序列表

3）自定義列表

您的項目需求