CSS 语言（负责前端样式）
引入方法
1、行间样式 <div style="...."></div> style 中的就是 css 代码
2、页面级 <style type="text/css"></style> 在 head 里编写
(important)3、外部 css 文件 命名: abc.css 并在 html 的 head 里用 link 导入，如：<link rel="stylesheet" type="text/css" href="lesson4.css">
在计算机里同步是不同时进行 而 异步是同时进行，html 加载 link 里的 css 是一个异步加载
选择器:
1、id 选择器
在元素上绑定 id，在 css 里用 #+id 来进行选择（一对一关系）
#only{background-color: red;}
2、class 选择器
在 css 里用 .+id 来进行选择（多对多关系，多个元素可以绑定同一个 class，一个元素可以绑定多个 class）
.only1{background-color: blue;}
3、标签选择器
在 css 里直接用 标签名 来进行选择
div{background-color: black;}
4、通配符选择器
在 css 里用 * 号来进行选择（将所有标签进行选择，包括 body 标签）
*{background-color: green;}
5、属性选择器
在 css 里用 [属性名（如：id、class）或属性名加属性值] 来进行选择（所有包括方括号里属性的元素都进行选择）
[class]{background-color: red;} 或 [class="only"]{background-color: red;}
属性选择器可以进行多个匹配，如：[class="only happy"][hidden]{}（这样子限制了两个属性，可以理解为&&）
属性选择器还有很多用法:
[attr]：匹配有该属性名的元素（不管有没有属性值，属性值为什么，只要元素上有该属性即可）
[attr="value"]：匹配有该属性名以及属性值**完全匹配（即元素标签上有该属性，而且该属性有且仅有属性值“value”的元素）**的元素
[attr~="value"]：匹配有该属性名以及属性值包括“value”的元素（与上述选择器唯一的区别就是该选择器属性值不完全匹配，但属性值为完整属性值，例如如元素标签上属性值为“hello moo”，该选择器中”value“必须且只能为为“hello”或“moo”才能匹配）
[attr^="value"]：匹配 attr 属性值以“value”开头的元素
[attr$="value"]：匹配属性值以“value”结尾的元素
[attr*="value"]：匹配属性值含有“value”的元素（和上述不完全匹配属性值的选择器相比，该选择器不要求属性值为完整属性值，例如元素标签上属性值为“hello”，该选择器中”value“为“llo”也能匹配）
[attr|="value"]：匹配所有属性值为“value”或以“value-”开头的所有元素（元素相应属性值只能唯一一个）
6、父子选择器/派生选择器
如果在 div 里有 span 可以在 css 里用 div span{} 来选择
不一定要用标签，还可以用 class 选择器或者混用来选择
注意：父子选择器不一定是直接子元素也可以是间接子元素，理解为它下面的所有该元素，如; div span{} 代表 div 里所有的 span 元素
7、直接子元素选择器
如果想直接选择下一级子元素可以用形如 div > span 来选择，像
<div>
<em>1</em>
<strong>
<em>2</em>
</strong>
</div>div > em {
background-color: red;
}就会只选择第一个 em 而不会选择 strong 里的那个
注意：浏览器父子元素选择器是从右向左寻找相应标签的
8、并列选择器
由多个限制条件修饰一个选择器，并且不加空格，如 div.demo{}
<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>选择的将会是第二个 div
注意：标签选择器放在 class 选择器前面不然像 .demodiv 这种选择不出来，系统默认查找 class 等于 demodiv 这个元素
9、分组选择器
多个相同样式的代码块适合，如 em,strong,span{} 可以选择三个选择器，共享相同代码,一般公司会把几个选择器独占一行
10、伪类选择器
在选择器后加如 :hover 的形式后，将会根据伪类选择器展示相应样式
a:hover{} 就是当鼠标触碰该元素的时候触发样式
a:visited 就是访问该元素后触发的样式
锚点伪类：
:link :visited
行为伪类：
:hover :active :focus
伪类设置顺序：link -> visited -> hover -> active（伪类设置顺序弄错可能会带来意想不到的错误）
结构伪类：
:first-child：选择元素的第一个子元素
:last-child：选择元素的最后一个子元素
:nth-child(x)：选择元素的一个或多个特定子元素，从第一个子元素开始计算
x 可以为一个值或者表达式：
（length）匹配父元素下第 length（length 是具体数值）个子元素
（n）匹配从 0 开始的所有元素（n 不是数值，是表达式），可以理解为 n=0，值为 1*0，没有选择元素；n=1，值为 1*1，选择第一个元素...... 以此类推
（mn）以 m 为间隔匹配从 0 开始的所有元素（n 是表达式，m 是数值），可以理解为 n=0，值为 m*0，没有选择元素；n=1，值为 m*1，选择第 m 个元素...... 以此类推
综上所述：我们可以发现 n 永远是从 0 开始，触碰到边界停止（选中不了子元素后），所以我们可以用 2n、even 选择偶数元素、用 2n+1、2n-1、odd 选择奇数元素、用-n+5 选择第 5、4、3、2、1 个元素，只要你 n 从零开始套进公式计算就能的到被选中的元素
:nth-last-child(x)：选择元素的一个或多个特定的子元素，这个子元素从最后一个开始
与:nth-child(x)一摸一样，不过他是从最后一个子元素开始的，可以看作左后一个子元素为第一个子元素
:nth-of-type(x)：选择指定的元素
类似于:nth-child(x)，可以看作筛出了选中元素后的列表，的:nth-child(x)操作，如p:nth-of-type(2n)就会只看到父元素下的 p 子元素，然后隔一个 p 子元素再选择下一个 p 子元素（选择偶数 p 子元素），其他的诸如 div 子元素、span 子元素都会被忽略
:nth-last-of-type()：选择指定的元素，从最后一个开始
与:nth-of-type(x)一样，只不过是从最后一个子元素开始
:first-of-type：选择一个上级元素下的第一个同类子元素
可以看作:first-child和:nth-of-type结合体
:last-of-type：选择一个上级元素下最后一个同类子元素
:only-child：选择的元素是它父元素的唯一一个子元素
:only-of-type：选择一个元素是它的上级元素的唯一一个相同类型的子元素
:empty：选择的元素里没有任何内容（哪怕是空格、回车）
否定伪类：
:not(x)：x 为选择器，选中的元素为非 x 选择器能匹配到的元素
状态伪类：
:enabled：匹配指定范围内所有可用的 UI 元素，一般 UI 元素指表单元素，例如input:enabled将匹配表单中所有的文本框，但是不包括表单中的按钮
:disabled：匹配指定范围内所有不可用的 UI 元素
:checked：匹配指定范围内所有可用的状态为”checked“的 UI 元素
目标伪类：
形如E:target：匹配所有被 target 指向的 E 元素
11、伪元选择器
在普通选择器后加，如 span::before 、span::after 的形式后，将会选择该元素的伴生伪元素
伪元素（行级元素）没有 html 结构，是所有元素产生时会产生的两个元素（伴生关系），但是在 css 里可以进行调整
span::before {
content: "lsn ";
}
span::after {
content: " 的确是这样！！";
}12、相邻兄弟选择器
两个元素为同层级的相邻兄弟元素 p + h2{}，只能选择两个相邻兄弟中的第二个元素，即例子中的h2元素
13、兄弟选择器
选择同级两个元素的前置元素后所有匹配元素 p ~ h1{}，可以选择例子中p后所有同级的h1元素（只能是h1元素，其他任何元素都不会选中）
css 权重计算
同一行权重是相加，相同权重下后一个 css 代码会覆盖前一个 css 代码
优先级：! important > 行间样式 style > id > class == 属性选择器 > 标签选择器 > *
css 权重：
! important Infinity（正无穷）
行间样式 1000
id 100
class、属性选择器、伪类选择器 10
标签选择器、伪元素选择器 1
通配符选择器 0
权重并不是十进制和二进制 而是 256 进制
css 属性
1、font-size：字体大小，一般浏览器默认 16px ：这是设置字体的高
2、font-weight：字体粗细，lighter normal bold bolder 数字（100-900，取整百值），是由字体包自带的，如果字体没有 bolder，那设置了也没用
3、font-style：italic（斜体）等
4、font-family：arial（apple 开发的，互联网通用字体）等
5、color：设置字体颜色
① 土鳖式：red
② 颜色编码：#ff4040 每两个十六进制数字代表一个光学三原色 r g b
如果颜色代码每两位都是重复的话可以简写如：#ff4 = #ffff44
③ 颜色代码：rgb（255，255，255）
6、border：1px solid black；
复合属性 border = border-weight + border-style + border-color
单独边框设置（复合属性） border-方向（left 等）
transparent（透明色）
行内属性的上下边框高度不会影响行高，而且不受段落和行高的约束，会遮住上下文本；但是行内元素的座右边框会占据座右文本的位置，不会将左右文本遮住左右边框会根据文本流自由移动，但是不会出现断行，也就是单个边框不会显示在第二行中。
7、文本：
text-align：文本垂直对齐方式（right、center、left）
line-height：文本行高（px）
单行文本垂直居中：单行文本的行高等于容器高度
text-indent：首行缩进，单位：em（为当前文本的字符宽度单位，1em = 1*font-size）
text-decoration：line-through、underline、overline、none
vertical-align：文字参照水平方向上底线的对齐方式，一般是底对齐
8、cursor（光标）：pointer、help、方位-resize、copy、move
9、margin：外边距（注意：body 自带 8px 的 margin）
10、list-style：none（去掉 ul 中的大圆点）等
11、position（定位）：static（默认值）、absolute（脱离原来位置进行定位）、relative（保留原来位置进行定位）、fixed（固定位置）、sticky（基于用户的滚动位置来定位，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效（生效相当于 fixed），否则其行为与相对定位（relative）相同 [ Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位，Safari 需要使用 -webkit- prefix ] ）
z-index（层元素的层级，只有在 position 元素时起作用，对 sticky 无效）
配合 left、top、bottom、right 使用
层模型
absolute：会创建一个新的层，类似两个不同的图层，可以重叠，元素会相对于最近的有 position 的父级进行定位，如果没有有 position 的父级就相对于 body 进行定位
relative：也会创建一个新的图层，但保留原来位置，类似灵魂出窍，元素会相对于自己原来的位置进行定位
fixed：创建一个新的图层，图层不会随着页面滚动，元素默认定位在页面某一位置不随着页面滚动而滚动
sticky：在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如 top：100px)，其相当于 fixed 定位，固定到适当位置
注意：一般由 relative 当作基架，absolute 作为定位
12、opacity（透明度）
13、border-radius（圆角）
14、background-image（背景图片）：url（），括号里放本地文件地址
background-size（背景图片的大小）：设置背景图片的大小
background-repeat（背景图片的重复）：当背景图片较小时，会自动在背景上重复放置多次图片以至铺满，如
这时就可以设置 no-repeat; 不重复
background-position：可以填两个数值，也可以填两个位置词（top、right、bottom、left、center），也可以填百分数
15、scroll-behavior（滚动条行为）：auto（直接跳转，无滚动动画）、smooth（有平滑的滚动动画）
隐藏滚动条
滚动条宽长,滚动条整体部分，其中的属性有 width,height,background,border 等
::-webkit-scrollbar {
width: 7px;
}滚动条的滑轨背景颜色,可以用 display:none 让其不显示，也可以添加背景图片，颜色改变显示效果
::-webkit-scrollbar-track {
background-color: #f5f5f5;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}滑块颜色
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
}滚动条两端的按钮。可以用 display:none 让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-button {
background-color: #eee;
display: none;
}横向滚动条和纵向滚动条相交处尖角的颜色
::-webkit-scrollbar-corner {
background-color: black;
}16、display: grid（栅格化布局，后文有详细介绍）、flex
17、float：none 、left、right
浮动元素会具有块状属性，如行内元素可以设置宽高，如果浮动元素没有设置宽高，那么将会自动调整为能包裹住内容的大小。
浮动元素仅能改变水平显示方式。
浮动元素不会影响前面的元素，而是会在前面流动元素的下一行浮动显示，但是后面的流动元素可能会被重叠
浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素将看不到它，但是产生了 bfc 的元素和文本类属性（inline）的元素以及文本都能看到浮动元素
浮动元素可以并列显示，如宽度不够，则会错行显示。
浮动子元素会让没有定义宽高的父级浮动元素按照内容自动调整，但是定义了宽高的父级浮动元素就不会
浮动元素嵌入流动元素会出现问题，即父级流动元素将不会被动态撑开，下方浮动模型区域讲解解决方法
浮动模型：
可以向容器里添加一个块级元素（不建议用）或者利用伪元素（建议使用），并且清除当前浮动流的影响（clear 只能对块级元素有效），父级元素将会被动态撑开，如：
.wrapper {
border: 2px solid black;
}
.content {
float: left;
width: 100px;
height: 100px;
background-color: black;
color: white;
}
//建议使用
.wrapper::after {
content: ""; //需要有content才会生效
display: block; //块级元素才会生效
clear: both; //清除浮动流
}
/*
不建议用
p{
border-top: 10px solid green;
clear: both;
}*/
18、clear：left、right、both、none
与浮动相结合使用，可以清除浮动流
left：清除左边的浮动流，如果左边存在浮动元素，则该元素会换行
right：清除右边的浮动流，如果右边存在浮动元素，则该元素会换行
both：清除左右两边浮动流，不管哪边存在浮动元素，都会换行
none：默认值，允许左右存在浮动流，不会主动换行显示
css 属性相关值
inherit：继承父元素，仅当该属性为继承元素时有效，以下属性可以继承：
- 所有元素可继承：visibility 和 cursor
- 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
- 块状元素可继承：text-indent 和 text-align
- 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
- 表格元素可继承：border-collapse
initial：关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式（IE 不支持该关键字）
unset：如果该属性是默认继承属性，该值等同于 inherit，如果该属性是非继承属性，该值等同于 initial
标签总结
1、行级元素、内联元素 inline
feature：内容决定元素所占位置，不可以通过 css 改变宽高
span、strong、em、a、del
2、块级元素 block
feature：独占一行，可以通过 css 改变宽高
div、p、ul、li、ol、form、address
3、行级块元素 inline-block
feature：决定大小，可以改宽高
img
相应的元素 css 里 display 已经相应的默认了，但是可以手动更改
如块级元素可以设置 display:inline
注意：凡是带有 inline 的元素都有文字特性，统称为文本类元素
编写页面的时候可以先编写 css，定义形式，再在 html 里随意搭配，如：
这样的搭配可以很多，适合工作搭配
一个 html 可以引入无数个 css 文件，将已经写好的 css 样式引入就好了，极大的提高了团队开发效率
盒子模型
盒子壁：border
内边距：padding
盒子内容：width+height
外边距：margin
两栏布局
某一个块级元素不设宽度，另一个绝对位置，并且不设宽度的块级元素设置 margin 将另一个元素所占的位置让出来，如
.right {
position: absolute;
right: 0;
width: 100px;
height: 100px;
background-color: pink;
opacity: 0.5;
}
.left {
margin-right: 100px;
height: 100px;
background-color: black;
}
margin 塌陷
只发生在块级元素中
垂直区间里，如果父级元素没有 border-top 或者没有 bfc，两个相邻元素的垂直 margin 将会合并（一般不解决）；
垂直区间里，上边元素设置浮动但是下边元素不浮动就会产生 margin 塌陷
解决办法（bfc 触发方法）：
bfc（block format context --- 块级格式化上下文）：以下方法将会触发 bfc
1、position：absolute；
2、display：inline-block；
3、float：left/right；
4、overflow：hidden；
当设置了 1、3 属性的时候系统内部将会把该元素变成 inline-block 元素
溢出容器
1、单行文本溢出：
white-space: nowrap; /*取消换行*/
overflow: hidden;
text-overflow: ellipsis;2、多行文本溢出：
有技术，但是 pc 老版本浏览器不支持
一般咋们用截段处理
overflow: hidden;图片文字内容
当网速不够时，浏览器将忽略 css 和 JavaScript，这时背景图片将加载不出来，我们需要替换成文字：
方案一：对标签里的文字进行隐藏
text-indent: 190px;
white-space: nowrap;
overflow: hidden;方法二：利用 padding 能够放置背景图片的特点
height: 0;
padding-top: 90px;
overflow: hidden;行级元素只能套行级元素
块级元素能够套任何元素
p 标签里不能套块级元素，套了就会被截断
a 标签不能套 a 标签
利用 margin: x auto 左右居中，如
绿色方块 width 不变，黑色方块（默认不设置 width，这样黑色方块会按照 100%占据）width 随浏览器变化而变小，只需要在绿色方块样式中设置 margin:0 auto;
在一行里，文本和文本类元素是底对齐的，一旦行级块元素里面有文字，文字将会与行级块元素里面的文字底对齐，如：
Grid 布局
1、display: grid;（默认情况）
2、display: inline-grid;
设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效
3、grid-template-columns、grid-template-rows
grid-template-columns每一列的宽，grid-template-rows每一行的高
这里尝试定义一个三行三列的网格：
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;repeat()函数
例如：grid-template-columns: repeat(3, 100px);
同样，重复某种模式也是可以的
例如：grid-template-columns: repeat(2, 100px 20px 80px);
auto-fill
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充
例如：grid-template-columns: repeat(auto-fill, 100px);
fr（fraction 的缩写，意为"片段"）
类似于比例，下面例子代表第一列和第二列宽度一样
grid-template-columns: 1fr 1fr;
下面代表第二列宽度是第三列的二分之一
grid-template-columns: 150px 1fr 2fr;
minmax()函数
minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值
auto
auto关键字表示由浏览器自己决定长度
grid-template-columns: 100px auto 100px;上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度
网格线的名称 [xxx]
grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}上面代码指定网格布局为 3 行 x 3 列，因此有 4 根垂直网格线和 4 根水平网格线。方括号里面依次是这八根线的名字,网格布局允许同一根线有多个名字，比如[fifth-line row-5]
4、grid-row-gap、grid-column-gap、grid-gap
grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）
.container {
grid-row-gap: 20px;
grid-column-gap: 20px;
}
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，例如：
grid-gap: 20px 20px;
/*如果省略第二个值，浏览器就会假定第二个值等于第一个值*/根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap
5、grid-template-areas
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成，grid-template-areas属性用于定义区域
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas:
"a b c"
"d e f"
"g h i";
}
/*上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格*/
grid-template-areas:
"a a a"
"b b b"
"c c c";
/*上面代码将9个单元格分成a、b、c三个区域*/
grid-template-areas:
"a . c"
"d . f"
"g . i";
/*如果某些区域不需要利用，则使用"点"（.）表示*/注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end
比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end
6、grid-auto-flow
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"，下面：row、column
grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置，下面：row、row dense、column dense
7、justify-items、align-items、place-items
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}place-items属性是align-items属性和justify-items属性的合并简写形式，如：
place-items: start end;
/*如果省略第二个值，浏览器就会假定第二个值等于第一个值*/8、justify-content、align-content、place-content
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}place-content属性是align-content属性和justify-content属性的合并简写形式，如：
place-content: space-around space-evenly;
/*如果省略第二个值，浏览器就会假定第二个值等于第一个值*/相关属性：
stretch - 项目大小没有指定时，拉伸占据整个网格容器
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
9、grid-auto-columns、grid-auto-rows
grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高，如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 50px;
}
10、grid-template、grid
grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式
以上为 grid 父容器的属性，接下来是第一级子容器（项目）的属性
11、grid-column-start、grid-column-end、grid-row-start、grid-row-end
grid-column-start属性：左边框所在的垂直网格线grid-column-end属性：右边框所在的垂直网格线grid-row-start属性：上边框所在的水平网格线grid-row-end属性：下边框所在的水平网格线
例如：
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
除了指定为第几个网格线，还可以指定为网格线的名字
.item-1 {
grid-column-start: header-start;
grid-column-end: header-end;
}这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格
.item-1 {
grid-column-start: span 2;
}
/*上下两者完全一样*/
.item-1 {
grid-column-end: span 2;
}
12、grid-column、grid-row
grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}这两个属性之中，也可以使用span关键字，表示跨越多少个网格
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}斜杠以及后面的部分可以省略，默认跨越一个网格
.item-1 {
grid-column: 1;
grid-row: 1;
}13、grid-area
grid-area属性指定项目放在哪一个区域
.item-1 {
grid-area: e;
}grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置
.item-1 {
grid-area: 1 / 1 / 3 / 3;
}14、justify-self、align-self、place-self
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}例如：
.item-1 {
justify-self: start;
}
place-self属性是align-self属性和justify-self属性的合并简写形式
place-self: center center;
/*如果省略第二个值，浏览器就会假定第二个值等于第一个值*/css3 相关属性
1、box-sizing（适用于所有能够定义宽高的元素）
content-box|border-box|inherit
content-box（初始值）：width/height = border + padding + content
border-box：width/height = content
2、resize（适用于所有 overflow 属性不为 visible 的元素）
none|both|horizontal|vertical|inherit
none（初始值）：用户不能调节元素尺寸
both：用户能够调节元素的高度和宽度
horizontal：用户能够调节元素的宽度
vertical：用户能够调节元素的高度
3、overflow -> overflow-x、overflow-y
visible|hidden|scroll|auto|no-display|no-content
visible（初始值）：不剪切内容，也不添加滚动条，clip 属性将失效
auto：在需要时剪切内容并添加滚动条（body 和 textarea 的默认值）
hidden：不显示超出元素尺寸的内容
scroll：当内容超出元素尺寸时，添加滚动条
no-display：当内容超出元素尺寸时，不显示元素（类似 display: none）
no-content：当内容超出元素尺寸时，不显示元素内容（类似 visibility: hidden）
4、outline：outline-color outline-style outline-width outline-offset|inherit
轮廓是属于 css2 属性但是在 css3 中有增强，而且轮廓不会影响文档流也不会影响页面布局，因为轮廓始终在页面顶端，并且始终闭合。，而且是按照元素形状来变化的，也就是说他不一定是矩形
outline-width：thin|medium|thick|<length>|inherit
细|中等|粗|值|继承（默认）
outline-style：auto|<border-style>|inherit
根据浏览器自动设置|沿用边框样式（none、dotted、solid......）|继承（默认）
outline-color：<color>|invert|inherit
颜色|颜色反转|继承（默认）
outline-offset：<length>|inherit
距离容器的值|继承（默认）
5、border：border-color
border-color 适用于所有元素
border-color：一个或多个颜色
当属性为一个颜色值时则边框为纯色，如果设置了 n 个颜色，那么每种颜色为 1 像素，如果不满整个 border 则最后一个元素为剩下宽度的颜色
border-top|right|bottom|left-color，分别定义四个边框的颜色
6、border-image：border-image-source border-image-slice / border-image-width ? / border-image-outset ? border-image-repeat
border-image-source：
定义元素边框背景图像，可以是图片路径或使用渐变创建的“背景图像”。
border-image-slice： number（单位：px，赋值时不应该带单位）|percentage [fill]?
定义元素边框背景图像从什么位置开始分割。指定 4 个值(4 条分割线：top, right, bottom, left)将 border-image-source 分割成 9 宫格
fill 关键字决定是否将 border-image-source 九宫格中间那一块切片作为 DOM 节点的背景
原图：
(81px*81px)border-image-slice: 27 27 27 27;
border-image-slice: 27 27 27 27 fill;
当然，也可以定义三个值表示：上 左右 下，同时也可以设置两个值表示：上下 左右，更可以设置一个值表示：上下左右
border-image-width： [ <length> | <percentage> | <number> | auto ]{1,4}
定义元素边框背景图像厚度。
length带 px, em, in … 单位的尺寸值percentage百分比number不带单位的数字，它表示 border-width 的倍数auto使用 auto， border-image-width 将会使用 border-image-slice 的值border-image-width 的参数不能为负值 border-image-width 的缺省值是 number 类型：1
border-image-outset： [ <length> | <number> ]{1,4}
定义元素边框背景图像的外延尺寸。
border-image-outset: 27px;
border-image-repeat： [ stretch（默认值） | repeat | round | space ]{1,2}
定义元素边框背景图像的平铺方式，语法上最多可接收两个参数，第一个参数指定水平方向边框的平铺方式，第二个参数指定垂直方向边框的平铺方式
repeat 与 round 的区别：round 除了能平铺外还能通过伸缩使背景完整显示。 round 与 space 的区别：虽然都使背景完整显示，但是 space 在小方块之间有一定的空隙。
一、 border-image-outset 参数一定要在 border-image-width 之后，假设 border-image-width 缺省，仍然需要在原来 border-image-width 写上 /
border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 27 27 27 27 / / 10px;
二、 如果有 border-image-width/ border-image-outset 属性值，border-image-slice 必须指定数值，否则不合语法
border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 27 27 27 27 / 10px / 10px;
7、columns：column-width column-count（多列布局）
column-width：length(>=0)|auto
column-count：integer(>0)|auto
column-gap（两栏之间间距）：normal|length(>=0)
column-rule（边框宽度、样式和颜色）：length(>=0)|style|color|transparent
如：column-rule: dashed 2px gray;（2px 宽的灰色虚线）
column-span（跨列显示）：none|all
none：只在本栏中显示，all：横跨所有列
如：column-rule: all;在某个子元素上设置后将会横跨所有列
column-fill（各列高度是否对齐）：auto|balance（默认值）
auto：高度随内容变化而变化，balance：各列高度会随着最高那个统一
感觉没啥区别(╯▔ 皿 ▔)╯
8、flexbox
display：flex|inline-flex
flex 容器会被渲染成块级元素，而 inline-flex 容器会被渲染成一个行内元素
columns、float、clear、vertical-align 属性将会失去效果
flex-flow：flex-direction flex-wrap
flex-direction：row（默认）|row-reverse|column|column-reverse
flex-wrap：nowrap（默认）|wrap|wrap-reverse
主轴对齐
justify-content：flex-start（默认）|flex-end|center|space-between|space-around
align-items（伸缩项目在伸缩容器当前行侧轴上对齐方式）：flex-start（默认）|flex-end|center|baseline|stretch
align-content（调整伸缩行在容器里的对齐方式）：flex-start|flex-end|center|space-between|space-around|stretch
order（控制伸缩项目在它的伸缩容器中出现的顺序）：integer
flex：flex-grow [flex-shrink? flex-basis?]（默认值 0 1 auto）
flex-grow（决定伸缩容器剩余空间应按多少比例扩展）：number（默认 0）
flex-shrink（定义项目的收缩能力，与 flex-grow 正好相反）：number（默认 1）
flex-basis（设置伸缩的基准值，剩余的空间按比例来进行伸缩）：length(>=0)|auto（默认）
align-self（在单独的伸缩项目上覆写默认对齐方式，而不是写在容器上）：auto|flex-start|flex-end|center|baseline|stretch
g 的属性值为 auto，但是因为父容器设置了 align-items：flex-end
在伸缩项目里设置 margin：auto 将会将会合并剩余空间，比伸缩容器中只有一个元素，然后元素设置了 margin：auto，则该元素会水平垂直居中
9、perspective：number|none（初始值）
设置透视，为元素距离视图的距离
number：px 为单位
要搭配 perspective-origin 来使用
10、perspective-origin：x-axis y-axis
属性定义 3D 元素所基于的 X 轴和 Y 轴，该属性允许您改变 3D 元素的底部位置，当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身
x-axis：left、center、right、length、%（默认值 50%）
y-axis：top、center、bottom、length、%（默认值 50%）
要搭配 perspective 来使用
帮助理解上述两种方法：
（1）灰色部分就是我们要看的物体。
（2）橘红色部分就是 perspective 属性设置的查看位置。
（3）红色中心点就是默认的 perspective-origin 属性值所在位置。
css3 动画
transform：none（初始值）|transform-function {1，+}
transform-function：设置变换函数
transform-origin：参数 参数 参数（在 2D 效果中第三个值可以省略）
x 和 y 轴参数可以为百分比、px、left、right、top、bottom、middle 等，第三个 z 轴参数只能为具体数值 px、em 等
默认为：50% 50% 0
transform-style：flat|preserve-3d
该属性是一个实验属性，并不是所有浏览器都支持；该属性不会被继承
flat
设置元素的子元素位于该元素的平面中
preserve-3d
指示元素的子元素应位于 3D 空间中
变换函数 2D（transform-function）
matrix()：
定义矩阵变换，基于 x 和 y 轴坐标重新定位元素位置
可以传入六个参数：x 轴缩放、x 轴倾斜、y 轴倾斜、y 轴缩放、x 轴移动、y 轴移动
translate()：
移动元素对象，基于 x 和 y 轴重新定位元素
可以传入两个参数，分别表示相对于原位置，x 和 y 轴的偏移距离，如果只传一个参数，则第二个参数默认为 0
scale()：
缩放元素对象，可以取正值和负值还可以取小数
可以传两个参数，分别表示宽和高缩放比例，如果只有一个参数，则宽高缩放比例相同
rotate()：
旋转元素对象，取值为度数值（deg）
传入一个参数
skew()：
倾斜元素对象，取值为度数值（deg）
传入两个参数，分别代表 x 和 y 轴倾斜的角度，如果只传一个参数，则默认第二个参数为 0
变换函数还有很多......
变换函数 3D（transform-function）
3D 位移：translateZ()、translate3d()
3D 旋转：rotateX()、rotateY()、rotateZ()、rotate3d()
3D 缩放：scaleZ()、scale3d()
3D 矩阵：matrix3d()
舞台大小会对 3D 变换产生影响
translate3d(tx，ty，tz)
tx、ty、tz 分别代表横、纵、z 轴位移向量的长度
scale3d(sx，sy，sz)
sx、sy、sz 分别代表横、纵、z 轴缩放比例
scaleZ 可以理解为正方体 z 轴厚度的变化，厚度为零或者俯视是看不到效果的；sz 为-1 时表示相对于原点的对称点，类似于 z 轴反转
rotate3d(x，y，z，a)
x 为 0~1 之间的值，表示围绕 x 的矢量值
y 为 0~1 之间的值，表示围绕 y 的矢量值
z 为 0~1 之间的值，表示围绕 z 的矢量值
a，角度值，为 3d 旋转角度，正值就顺时针旋转，负值就逆时针旋转
rotateX(a) = rotate3d(1, 0, 0, a)
rotateY(a) = rotate3d(0, 1, 0, a)
rotateZ(a) = rotate3d(0, 0, 1, a)
设计过渡动画
transition: property duration timing-function delay
transition-property：none|all|[ident,ident,......]{1,+}
none：没有元素
all：表示针对所有元素，包括:before和:after伪元素
ident：指定 css 属性列表，几乎所有色彩、大小、位置相关的 css 属性
transition-duration：time
设置动画过渡时间，默认值为 0，适用于所有元素，包括:after和:before伪元素
transition-delay：time
设置过渡动画延迟时间，初始值为 0，使用于所有元素，包括:after和:before伪元素，可以是正整数、负数和 0，非零时必须有单位 s 或者 ms；设置为负数时，过渡动画会从该时间开始，之前的动作会被截断。
transition-timing-function：ease（初始值）|linear|ease-in|ease-out|ease-in-out|cubic-bezier(num, num, num, num)
ease：平滑过渡，等同于 cubic-bezier(0.25, 0.1, 0.25, 1.0)函数
linear：线性过渡，等同于 cubic-bezier(0.0, 0.0, 1.0, 1.0)函数
ease-in：由慢到快，等同于 cubic-bezier(0.42, 0, 1.0, 1.0)函数
ease-out：由快到慢，等同于 cubic-bezier(0, 0, 0.58, 1.0)函数
ease-in-out：由慢到快再到快，等同于 cubic-bezier(0.42, 0, 0.58, 1.0)函数
cubic-bezier：
特殊的立方贝塞尔曲线效果，可以理解 x 轴为时间轴（时间点沿 x 轴正方向匀速移动），y 轴为速度轴
贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0 是（0,0）并且表示初始时间和初始状态，P3 是（1,1）并且表示最终时间和最终状态
从上图我们需要知道的是 cubic-bezier 的取值范围:
P0：默认值 (0, 0)
P1：动态取值 (x1, y1)
P2：动态取值 (x2, y2)
P3：默认值 (1, 1)我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大
cubic-bezier(x1,y1,x2,y2)帧动画
css3 使用 animation 属性定义帧动画，使用@keyframes 定义关键帧
@keyframes animationName {
keyframes-selector {
css-styles;
}
}animationName：定义动画的名称
keyframes-selector：定义帧的时间未知，也就是动画时长的百分比，合法值包括 0~100%、from（等价于 0%）、to（等价于 100%）
css-styles：一个或多个合法的 css 样式
设置动画属性
animation-name（动画名称）：none（初始值）|keyframeName
animation-duration（动画时间）：time
默认为 0，不会有动画，如果为负值则被视为 0
animation-timing-function（动画类型）：ease（初始值）|linear|ease-in|ease-out|ease-in-out|cubic-bezier(num, num, num, num)
详情请看上文过渡动画
animation-delay（动画延迟时间）：time
默认为 0
animation-iteration-count（动画次数）：infinite|number
默认为 1，如果是非整数，则动画将在一个周期的一部分结束，如果为负数则动画将会在交替周期内反向播放动画
animation-direction（动画播放方向）：normal（初始值）|alternate
normal：每次循环都向前播放
alternate：偶数次向前播放，奇数次相反方向播放
animation-play-state（动画运行和暂停设置）：paused|running（初始值）
paused 定义动画已暂停，running 定义动画正在播放
animation-fill-mode（动画外状态）：none（初始值）|forwards|backwards|both
表示当动画完成时，或当动画有一个延迟未开始播放时，要应用到元素的样式
none：不设置
forwards：设置对象状态为动画结束时状态
backwards：设置对象状态为动画开始状态
both：设置对象状态为动画结束或开始状态
