關於CSS3（最新的CSS標準）

CSS3---邊框

1. CSS3圓角：border-radius
   語法：border-radius:xx;（可爲px，可爲百分比。當爲50%時，是一個圓）
   若是你在border-radius屬性中只指定一個值，那麼將生成4個圓角
   可是，若是你要在四個角上一一指定，可使用如下規則：
   四個值：第一個值爲左上角，第二個值爲右上角，第三個值爲右下角，第四個值爲左下角。
   三個值：第一個值爲左上角, 第二個值爲右上角和左下角，第三個值爲右下角
   兩個值：第一個值爲左上角與右下角，第二個值爲右上角與左下角
   一個值：四個圓角值相同
   屬性：
   全部四個邊角 border-*-*-radius 屬性的縮寫
   border-top-left-radius：定義了左上角的弧度
   border-top-right-radius：定義了右上角的弧度
   border-bottom-right-radius：定義了右下角的弧度
   border-bottom-left-radius：定義了左下角的弧度
   擴展：
   border-radius:50% 和 100% 的區別：
   border-radius:50% 和 border-radius:100% 的效果是相同的。
   border-radius的值若是爲百分比，則爲盒子的寬度與高度的比值。因此當值爲50%的時候正好是直徑爲盒子長度的圓。那當border-radius爲100%的時候，直徑應該爲兩倍的邊長，那爲何最終效果是和50%的時候的長度是同樣的呢？
   其實在W3C中，若是兩個相鄰角的半徑之和超過了相應盒子邊的長度，那麼瀏覽器要從新計算，以保證二者不會重合。
   假設有一個 100px 的盒子，若 border-top-left-radius:100%; 則盒子會變成一個半徑爲 100px 的 1/4圓。
   這個時候，若是咱們再給一個 border-top-right-radius:100%; 此時相鄰的兩個角的半徑之和已經超過了盒子的長度，瀏覽器須要從新計算。計算的規則就是同時縮放兩個圓角的半徑，直至兩個相鄰角的半徑和爲盒子的長度。也就是說，當兩個圓角的半徑爲50%的時候，圓角正好符合W3C標準。
  
2. 添加陰影：box-shadow
   語法：box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];
   屬性：
   h-shadow：必需的。水平陰影的位置。容許負值
   v-shadow：必需的。垂直陰影的位置。容許負值
   blur：可選。模糊距離
   spread：可選。陰影的大小
   color：可選。陰影的顏色
   inset：可選。從外層的陰影（開始時）改變陰影內側陰影
   
3. 設置全部邊框圖像：border-image
   語法：border-image: source slice width outset repeat|initial|inherit;
   border-image-source：用於指定要用於繪製邊框的圖像的位置
   border-image-slice：圖像邊界向內偏移
   border-image-width：圖像邊界的寬度
   border-image-outset：用於指定在邊框外部繪製border-image-area的量
   border-image-repeat：用於設置圖像邊界是否應重複（repeat）、拉伸（stretch）或鋪滿（round）

CSS3---背景

語法：background ： [background-color] | [background-image]（CSS3容許添加多個背景圖片） | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
CSS3新增的背景屬性：
background-clip：規定背景的繪製區域（取值：border-box（默認值）：背景繪製在邊框方框內（剪切成邊框方框）。
                                         padding-box：背景繪製在襯距方框內（剪切成襯距方框）。
                                         content-box：背景繪製在內容方框內（剪切成內容方框）。
                                  ）
background-origin：規定背景圖片的定位區域（取值：padding-box：背景圖像填充框的相對位置
                                               border-box：背景圖像邊界框的相對位置
                                               content-box：背景圖像的相對位置的內容框）
                                        ）
background-size：規定背景圖片的尺寸（background-size: length|percentage|cover|contain;）
                                  （屬性值：length設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。若是隻給出一個值，第二個是設置爲 auto(自動)
                                            percentage將計算相對於背景定位區域的百分比。第一個值設置寬度，第二個值設置的高度。若是隻給出一個值，第二個是設置爲"auto(自動)"
                                            cover此時會保持圖像的縱橫比並將圖像縮放成將徹底覆蓋背景定位區域的最小大小
                                            contain此時會保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小。
                                  ）

CSS3---漸變

線性漸變的語法：linear-gradient(direction（direction/angle, color1, color2, ...); （必須至少定義兩種顏色節點）
第一個參數可爲direction：規定的方向，如：to left bottom
            也可爲angle：規定的角度，如：60deg
repeating-linear-gradient() 函數用於重複線性漸變


徑向漸變的語法：radial-gradient(shape（肯定圓的類型） size（定義漸變的大小） at position（定義漸變的位置）, start-color, ..., last-color);
屬性：
shape size at position的取值：ellipse (默認): 指定橢圓形的徑向漸變。
                             circle：指定圓形的徑向漸變
size的取值：farthest-corner (默認): 指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角
            closest-side：指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊
            closest-corner： 指定徑向漸變的半徑長度爲從圓心到離圓心最近的角
            farthest-side：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊
start-color, ..., last-color：用於指定漸變的起止顏色
repeating-radial-gradient() 函數用於重複徑向漸變

CSS3---文本效果

1. text-shadow：文本陰影
   語法：text-shadow: h-shadow v-shadow blur color;
   屬性：
   h-shadow：必需。水平陰影的位置。容許負值。
   v-shadow：必需。垂直陰影的位置。容許負值。
   blur：可選。模糊的距離。
   color：可選。陰影的顏色。

2. text-overflow：文本溢出
   語法：text-overflow: clip/ellipsis/string;
   屬性：
   clip：修剪文本。
   ellipsis：顯示省略符號來表明被修剪的文本。
   string：使用給定的字符串來表明被修剪的文本。
   
3. word-wrap：單詞換行
   語法：word-wrap: normal/break-word;
   屬性：
   normal：只在容許的斷字點換行（瀏覽器保持默認處理）。
   break-word：在長單詞或URL地址內部進行換行。

4. word-break：單詞拆分換行
   語法：word-break: normal|break-all|keep-all;
   屬性：
   normal：使用瀏覽器默認的換行規則。
   break-all：容許在單詞內換行。
   keep-all：只能在半角空格或連字符處換行。

CSS3---@font-face規則

語法：
@font-face
{
    font-family: xxx;
    src: xxx;
    font-weight:xxx;
    ...
}
屬性：
font-family：必需。規定字體的名稱。
src：必需。定義字體文件的 URL。
font-stretch：可選。定義如何拉伸字體。默認是 "normal"。
font-style：可選。定義字體的樣式。默認是 "normal"。
font-weight：可選。定義字體的粗細。默認是 "normal"。
unicode-range：可選。定義字體支持的 UNICODE 字符範圍。默認是 "U+0-10FFFF"。

CSS3---轉換（2D和3D）

2D轉換：
1. translate(x,y)：定義2D轉換，沿着X和Y軸移動元素。
2. rotate(angle)：定義2D旋轉，在參數中規定角度。
3. scale(x,y)：定義2D縮放轉換，改變元素的寬度和高度。
4. skew(x-angle,y-angle)：定義2D傾斜轉換，沿着X和Y軸。
5. matrix(n,n,n,n,n,n)    定義2D轉換，使用6個值的矩陣。

3D轉換：
1. translate3d(x,y,z)：定義3D轉換，沿着X軸，Y軸和Z軸移動元素。
2. scale3d(x,y,z)：定義3D縮放轉換。
3. rotate3d(x,y,z,angle)：定義3D旋轉。
4. perspective(n)：定義3D轉換元素的透視視圖。
5. matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定義3D轉換，使用16個值的4x4矩陣

transform: none|transform-functions;（取值爲上述的屬性，容許你將元素旋轉，縮放，移動，傾斜等）

CSS3---過渡transition

語法：transition: property duration timing-function delay;
屬性:
transition-property：指定CSS屬性的name，transition效果
transition-duration：transition效果須要指定多少秒或毫秒才能完成
transition-timing-function：指定transition效果的轉速曲線
transition-delay：定義transition效果開始的時候
（必須指定要添加效果的CSS屬性 和 指定效果的持續時間。）

要添加多個樣式的變換效果，添加的屬性由逗號分隔：
如：添加了寬度，高度和轉換效果：
div {transition: width 2s, height 2s, transform 2s;}

CSS3---動畫@keyframes

語法：@keyframes animationname {keyframes-selector {css-styles;}}
屬性：
animationname：必需的。定義animation的名稱。
keyframes-selector：必需的。動畫持續時間的百分比。
            合法值：0-100%
                   from (和0%相同)
                   to (和100%相同)
注意： 您能夠用一個動畫keyframes-selectors。
css-styles：必需的。一個或多個合法的CSS樣式屬性
（指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：規定動畫的名稱，規定動畫的時長）
e.g.：
@keyframes xxx
{
    from {top:0px;}
    to {top:200px;}
}
或
@keyframes xxx
{
    0%   {top:0px;}
    50%  {top:100px;}
    100% {top:0px;}
}

CSS3---多列

1. column-count：指定某個元素應分爲的列數。
   語法：column-count: number/auto;
   屬性：
   number：列的最佳數目將其中的元素的內容沒法流出
   auto：列數將取決於其餘屬性，例如："column-width"
   
2. column-gap：指定列與列之間的差距。
   語法：column-gap: length/normal;
   屬性：
   length：一個指定的長度，將設置列之間的差距
   normal：指定一個列之間的普通差距。 W3C建議1EM值
  
3. column-rule-style：指定列之間的樣式規則
   語法：column-rule-style: xxx;
   可取的屬性：
   none    定義沒有規則。
   hidden：定義隱藏規則。
   dotted：定義點狀規則。
   dashed：定義虛線規則。
   solid：定義實線規則。
   double：定義雙線規則。
   groove：定義 3D grooved 規則。該效果取決於寬度和顏色值。
   ridge：定義 3D ridged 規則。該效果取決於寬度和顏色值。
   inset：定義 3D inset 規則。該效果取決於寬度和顏色值。
   outset：定義 3D outset 規則。該效果取決於寬度和顏色值。
   
4. column-rule-width：指定列之間的寬度規則
   語法：column-rule-width: xxx;
   可取的屬性：
   thin：指定一個細邊框的規則
   medium：定義一箇中等邊框規則
   thick：指定一個粗邊框的規則
   length：指定寬度的規則
   
5. column-rule-color：指定列之間的顏色規則
   語法：column-rule-color: color;
   屬性：
   color：指定顏色的規則。
   
6. column-rule：速記屬性，設置全部column-rule-*屬性（column-rule屬性設置列之間的寬度，樣式和顏色）
   語法：column-rule: column-rule-width column-rule-style column-rule-color;
   屬性：
   column-rule-width：設置列中之間的寬度規則
   column-rule-style：設置列中之間的樣式規則
   column-rule-color：設置列中之間的顏色規則
   
7. column-span：指定某個元素應該跨越多少列
   語法：column-span: 1/all;
   屬性：
   1：元素應跨越一列
   all：該元素應該跨越全部列
   
8. column-width：指定列的寬度
   語法：column-width: auto/length;
   屬性：
   auto：瀏覽器將決定列的寬度
   length：指定列寬的長度

CSS3---關於用戶界面

1. resize：指定一個元素是不是由用戶調整大小的
   語法：resize: none/both/horizontal/vertical:xxx;
   屬性：
   none：用戶沒法調整元素的尺寸。
   both：用戶可調整元素的高度和寬度。
   horizontal：用戶可調整元素的寬度。
   vertical：用戶可調整元素的高度。
   
2. box-sizing：容許你以某種方式定義某些元素，以適應指定區域
   語法：box-sizing: content-box|border-box|inherit:xxx;
   屬性：
   content-box：指定盒模型爲 W3C 標準模型，設置 border、padding 會增長元素 width與 height 的尺寸，即 border 與 padding 至關因而元素的「殖民地」，元素的「土地」、尺寸會增長，爲向外延伸。
   border-box：指定盒模型爲 IE模型（怪異模式），設置 border、padding 不會影響元素 width 與 height 的尺寸，即 border 與 padding 由元素已設空間轉變。即空間仍是這個空間，只是將部分空餘的地方，轉變成了其餘空間用法而已，爲內部轉變。
   inherit：指定 box-sizing 屬性的值，應該從父元素繼承
   
3. outline-offset：設置輪廓框架在 border 邊緣外的偏移 （Outlines在兩個方面不一樣於邊框：Outlines 不佔用空間。Outlines 可能非矩形）
   語法：outline-offset: length|inherit:xxx;
   屬性：
   length：輪廓與邊框邊緣的距離。
   inherit：規定應從父元素繼承 outline-offset 屬性的值。

CSS3---關於圖片

1. 縮略圖：
   咱們使用 border 屬性來建立縮略圖。
    a {
        display: inline-block;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 5px;
        transition: 0.3s;
    }
    a:hover {
        box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
    }
    <a href="paris.jpg">
        <img src='xxx'>
    </a>
    
2. 響應式圖片：
   響應式圖片會自動適配各類尺寸的屏幕。
   若是你須要自由縮放圖片，且圖片放大的尺寸不大於其原始的最大值，可編寫如下代碼：
   img {
        max-width: 100%;
        height: auto;
   }
   
3. 圖片濾鏡：
   filter屬性爲元素添加可視效果 (例如：模糊與飽和度) 。
   修改全部圖片的顏色爲黑白 (100% 灰度):
   img {
        filter: grayscale(100%); 
    }
    filter語法：filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

CSS3---flex佈局

flex佈局是一種當頁面須要適應不一樣的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式
display：flex;

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器經過設置 display 屬性的值爲 flex 或 inline-flex將其定義爲彈性容器。
彈性容器內包含了一個或多個彈性子元素。

display:flex可與如下屬性配合使用：
1. flex-direction：指定了彈性子元素在父容器中的位置
   語法：flex-direction: row | row-reverse | column | column-reverse;
   屬性：
   row：橫向從左到右排列（左對齊），默認的排列方式。
   row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
   column：縱向排列。
   column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

2. justify-content：應用在彈性容器上，把彈性項沿着彈性容器的主軸線對齊
   語法：justify-content: flex-start | flex-end | center | space-between | space-around
   屬性：
   flex-start：彈性項目向行頭緊挨着填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，然後續彈性項依次平齊擺放。
   flex-end：彈性項目向行尾緊挨着填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，然後續彈性項依次平齊擺放。
   center：彈性項目居中緊挨着填充。（若是剩餘的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
   space-between：彈性項目平均分佈在該行上。若是剩餘空間爲負或者只有一個彈性項，則該值等同於flex-start。不然，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，而後剩餘的彈性項分佈在該行上，相鄰項目的間隔相等。
   space-around：彈性項目平均分佈在該行上，兩邊留有一半的間隔空間。若是剩餘空間爲負或者只有一個彈性項，則該值等同於center。不然，彈性項目沿該行分佈，且彼此間隔相等（好比是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

3. align-items：設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式
   語法：align-items: flex-start | flex-end | center | baseline | stretch
   屬性：
   flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
   flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
   center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
   baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
   stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。
   
4. flex-wrap：用於指定彈性盒子的子元素換行方式 
   語法：flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
   屬性：
   nowrap：默認， 彈性容器爲單行。該狀況下彈性子項可能會溢出容器。
   wrap：彈性容器爲多行。該狀況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
   wrap-reverse：反轉 wrap 排列。
   
5. align-content：用於修改flex-wrap屬性的行爲。相似於align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。
   語法：align-content: flex-start | flex-end | center | space-between | space-around | stretch
   屬性：
   stretch：默認。各行將會伸展以佔用剩餘的空間。
   flex-start：各行向彈性盒容器的起始位置堆疊。
   flex-end：各行向彈性盒容器的結束位置堆疊。
   center：各行向彈性盒容器的中間位置堆疊。
   space-between：各行在彈性盒容器中平均分佈。
   space-around：各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。
   
 如下屬性用於彈性子元素：
 1. order：對彈性子元素進行排序
    語法：order：<integer>
    屬性：<integer>用整數值來定義排列順序，數值小的排在前面。能夠爲負值。
 
 2. 彈性子元素設置"margin"值爲"auto"值，自動獲取彈性容器中剩餘的空間。因此設置垂直方向margin值爲"auto"，可使彈性子元素在彈性容器的兩上軸方向都徹底居中。
 
 3. align-self：用於設置彈性元素自身在側軸（縱軸）方向上的對齊方式。
    語法：align-self: auto | flex-start | flex-end | center | baseline | stretch
    屬性：
    auto：若是'align-self'的值爲'auto'，則其計算值爲元素的父元素的'align-items'值，若是其沒有父元素，則計算值爲'stretch'。
    flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
    flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
    center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
    baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
    stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。
    
4. flex：用於指定彈性子元素如何分配空間。
   語法：flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
   屬性：
   auto: 計算值爲 1 1 auto
   initial: 計算值爲 0 1 auto
   none：計算值爲 0 0 auto
   inherit：從父元素繼承
   [flex-grow]：定義彈性盒子元素的擴展比率。
   [flex-shrink]：定義彈性盒子元素的收縮比率。
   [flex-basis]：定義彈性盒子元素的默認基準值。

CSS3---grid佈局

grid佈局是一個二維的基於網格的佈局系統，它的目標是徹底改變咱們基於網格的用戶界面的佈局方式
display:grid

grid佈局中的幾個重要術語：
1. 網格容器（grid container）
2. 網格項（grid item）：網格容器的子元素
3. 網格線（grid line）：構成網格結構的分界線（可水平可垂直）
4. 網格軌道（grid track）：兩條相鄰網格線之間的空間
5. 網格單元格（grid cell）：兩個相鄰的行和兩個相鄰的列網格線之間的空間
6. 網格區域（grid area）：一個網格區域能夠由任意數量的網格單元格組成

語法：grid: xxx;
屬性：

如下屬性用於grid item：
1. grid-area：設置網格項目的尺寸以及在網格佈局中的位置
   語法：grid-area: _grid-row-start_ / _grid-column-start_ / _grid-row-end_ / _grid-column-end_ | _itemname_;
   屬性：
   grid-row-start：規定從哪一行開始顯示項目。
   grid-column-start：規定從哪一列開始顯示項目。
   grid-row-end：規定在哪條行線中止顯示項目，或跨越多少行。
   grid-column-end：指定在哪條列線中止顯示項目，或跨越多少列。
   itemname：規定網格項目的項目。
   
2. grid-column：規定網格項目的尺寸以及在網格佈局中的位置
   語法：grid-column: _grid-column-start_ / _grid-column-end_;
   屬性：
   grid-column-start：規定從哪一列開始顯示項目。
   grid-column-end：規定在哪一條列線（column-line）上中止顯示項目，或跨越多少列。
   
3. grid-column-end：規定項目將橫跨多少列，或者項目會在哪條列線（column-line）上結束
   語法：grid-column-end: auto|span _n_|_column-line_;
   屬性：
   auto：默認值。項目將橫跨一列。
   span n：規定項目將橫跨的列數。
   column-line：規定在哪列上中止顯示項目。
   
4. grid-column-start：定義項目將在哪條列線上開始
   語法：grid-column-start: auto|span _n_|_column-line_;
   屬性：
   auto：默認值。項目將隨着流放置。
   span n：規定項目將橫跨的列數。
   column-line：規定從哪列開始顯示項目。
   
5. grid-row：規定網格項目的尺寸以及在網格佈局中的位置
   語法：grid-row: _grid-row-start_ / _grid-row-end_;
   屬性：
   grid-row-start：規定從哪行開始顯示項目。
   grid-row-end：規定在哪條行線上中止顯示項目，或者橫跨多少行。
   
6. grid-row-end：規定項目將橫跨多少行，或者項目將在在哪條行線上結束
   語法：grid-row-end: auto|_row-line_|span _n_;
   屬性：
   auto：默認值。項目將橫跨一行。
   span n：規定項目將橫跨的行數。
   column-line：規定從哪行結束顯示項目。
 
7. grid-row-start：定義項目將在哪條行線上開始
   語法：grid-row-start: auto|_row-line_;
   屬性：
   auto：默認值。項目將隨着流定位。
   row-line：規定從哪行開始顯示項目。

如下屬性用於grid container：
1. grid-auto-columns：設置網格容器中列的尺寸（只會影響未設置尺寸的列）
   語法：grid-auto-columns: auto|max-content|min-content|_length_;
   屬性：
   auto：默認值。由容器尺寸決定列的尺寸。
   max-content：根據列中最大的項目設置每列的尺寸。
   min-content：根據列中最小的項目設置每列的尺寸。
   minmax(min.max)：設置大於或等於 min 且小於或等於 max 的尺寸範圍。
   length：設置列的尺寸，經過使用合法的長度值。
   %：設置列的尺寸，經過使用百分比值。

2. grid-auto-flow：控制自動放置的項目如何插入網格中
   語法：grid-auto-flow: row|column|dense|row dense|column dense;
   屬性：
   row：默認值。經過填充每一行來放置項目。
   column：經過填充每一列來放置項目。
   dens：放置項目以填充網格中的任何孔。
   row den：經過填充每一行來放置項目，並填充網格中的任何孔。
   column dense：經過填充每一列來放置項目，並填充網格中的任何孔。
 
3. grid-auto-rows：爲網格容器中的行設置尺寸
   語法：grid-auto-rows: auto|max-content|min-content|length;
   屬性：
   auto：默認值。由行中的最大項目的尺寸決定行的尺寸。
   max-content：根據行中的最大項目設置每行的尺寸。
   min-content：根據行中的最大項目設置每行的尺寸。
   length：設置行的尺寸，經過使用合法的長度值。
   
4. grid-column-gap：定義網格佈局中列間隙的尺寸
   語法：grid-column-gap: _length_;
   屬性：_length_：任何合法長度值，好比像素或百分百。默認值爲 0。

5. grid-gap：定義網格佈局中行與列之間間隙的尺寸
   語法：grid-gap: _grid-row-gap_ _grid-column-gap_;
   屬性：
   grid-row-gap：設置網格佈局中行間隙的尺寸。默認值爲 0。
   grid-column-gap：設置列間隙的尺寸。默認值爲 0。
   
6. grid-row-gap：定義網格佈局中行間隙的尺寸
   語法：grid-row-gap: _length_;
   屬性：length：任何合法的長度值。好比像素或百分百。默認值爲 0。
   
7. grid-template：定義網格中行，列與分區
   語法：grid-template: none|_grid-template-rows_ / _grid-template-columns_|_grid-template-areas_|initial|inherit;
   屬性：
   none：默認值。不規定列或行的尺寸。
   _grid-template-rows_ / _grid-template-columns_：規定列和行的尺寸。
   _grid-template-areas_：規定使用命名項目的網格佈局。
   initial：將此屬性設置爲其默認值。
   inherit：從其父元素繼承此屬性。
   
8. grid-template-areas：在網格佈局中規定區域（可使用 grid-area 屬性命名網格項目，而後在 grid-template-areas 屬性中引用該名稱）
   語法：grid-template-areas: none|_itemnames_;
   屬性：
   none：默認值。未命名網格區域（grid areas）。
   itemnames：規定每列和每行應如何顯示的序列。
   
9. grid-template-columns：規定網格佈局中的列數（和寬度）
   語法：grid-template-columns: none|auto|max-content|min-content|_length_|initial|inherit;
   屬性：
   none：默認值。在須要時建立列。   
   auto：列的尺寸取決於容器的大小以及列中項目內容的大小。
   max-content：根據列中最大的項目設置每列的尺寸。
   min-content：根據列中最小的項目設置每列的尺寸。
   _length_：設置列的尺寸，經過使用合法的長度值。
   initial：將此屬性設置爲其默認值。 
   inherit：從其父元素繼承此屬性。
   
10. grid-template-rows 規定網格佈局中的行數（和高度）
    語法：grid-template-rows: none|auto|max-content|min-content|_length_|initial|inherit;
    屬性：
    none：未設置尺寸。在須要時建立行。 
    auto：行的尺寸取決於容器的大小以及行中項目內容的大小。
    max-content：根據行中的最大項目設置每行的尺寸。
    min-content：根據行中的最小項目設置每行的尺寸。
    _length_：設置行的尺寸，經過使用合法的長度值。

CSS3---多媒體查詢

多媒體查詢由多種媒體組成，能夠包含一個或多個表達式，表達式根據條件是否成立返回 true 或 false
使用 @media 查詢，你能夠針對不一樣的媒體類型定義不一樣的樣式
@media能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的
當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面

@media not/only mediatype and (expressions) {
     CSS 代碼...;
}
not：not是用來排除掉某些特定的設備的，好比 @media not print（非打印設備）。
only：用來定某種特別的媒體類型。對於支持Media Queries的移動設備來講，若是存在only關鍵字，移動設備的Web瀏覽器會忽略only關鍵字並直接根據後面的表達式應用樣式文件。對於不支持Media Queries的設備但可以讀取Media Type類型的Web瀏覽器，遇到only關鍵字時會忽略這個樣式文件。
all：全部設備，這個應該常常看到。

你也能夠在不一樣的媒體上使用不一樣的樣式文件：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 多媒體類型（mediatype）：
all：用於全部多媒體類型設備
print：用於打印機
screen：用於電腦屏幕，平板，智能手機等。
speech：用於屏幕閱讀器

e.g.
在屏幕可視窗口尺寸小於 480 像素的設備上修改背景顏色:
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}