共计 14189 个字符，预计需要花费 36 分钟才能阅读完成。
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;}
}
正文完
