关于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;
    }
}