1. outline: none;
chrome瀏覽器選中選中元素的預設藍色框框。
2. grid網格布局
**作用在==父==容器上的：**
display : grid
grid-template-columns : 設定列數
grid-template-rows : 設定行數
fr單位
repeat
()方法
注：網格中提供了乙個新的單位：fr
( 比例單位 )
grid-template-areas : 劃分區域的
注：區域必須是矩形。
grid-template:復合寫法
grid-template-rows
grid-template-columns
grid-template-areas
grid-template:
"a1 a1 a1"
1fr "a3 a3 a2"
1fr "a3 a3 a2"
1fr /
1fr 1fr 1fr;
grid-column-gap : 列的間距
grid-row-gap : 行的間距
grid-gap : 復合寫法
grid-row-gap grid-column-gap
justify-items : 子項的水平居中方式
預設 : stretch 預設值，拉伸。表現為水平或垂直填充。
start
center
endalign-items : 子項的垂直居中方式
預設 : stretch 預設值，拉伸。表現為水平或垂直填充。
start
center
endplace-items : 復合寫法
align-items justify-items
justify-content : 整體網格的水平對齊方式
預設：stretch
start
endcenter
space-between
space-around
space-evenly
align-content : 整體網格的垂直對齊方式
預設：stretch
start
endcenter
space-between
space-around
space-evenly
place-content : 復合寫法
align-content justify-content
**作用在==子==項上的：**
grid-area : 找指定的區域
1.對應網格的名字
2.寫對應的線的數字：grid-area :1/
3/ span 2/4
; grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-column-start 水平方向上佔據的起始位置
grid-column-end 水平方向上佔據的結束位置
grid-row-start 垂直方向上佔據的起始位置
grid-row-end 垂直方向上佔據的結束位置
注：只有在grid-column-end和 grid-row-end 中可以設定span操作。span去設定的不是結束位置，而是個數。
正常數字是位置，加上span是個數。
grid-column:3/
4;grid-column-start / grid-column-end
grid-row:
1/ span 2
; grid-row-start / grid-row-end
justify-self
algin-self
place-self
Grid網格布局
前言 就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一...
Grid網格布局
flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格，然後指定 專案所在 的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列，每一列為33....
grid網格布局
1.1 容器和專案 採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 item 1.2 行和列 容器裡面的水平區域稱為 行 row 垂直區域稱為 列 column 1.3 單元格 行和列的交叉區域，稱為 單元格 cell 正常情況下，n行和m列會產生n x...