第1章 选择器
1.1.基本选择器
1.1.1子元素选择器
1)定义：只能选择某元素的子元素
2)语法：父元素>子元素
1.1.2相邻兄弟选择器
1)定义：可以选择紧接着在另外一个元素后的元素，而且他们具有一个相同的父元素
2)语法：元素 + 相邻兄弟元素
1.1.3通用兄弟选择器
1)定义：选择某元素后边的所有兄弟元素，而且他们具有一个共同的父亲
2)语法：元素 ~ 后面所有兄弟元素
1.1.4群组选择器
1)定义：将具有相同样式的元素分组在一起，每个选择器之间用逗号 ， 隔开

2. 语法：元素1，元素2，元素3，.......
   1.2.属性选择器
   1.2.1 element[attribute]
   1)定义： 为带有attribute属性的元素设置样式
   2)语法：element[attribute]
   1.2.2 element[attribute='value']
3. 定义：为attribute='value'属性的元素设置样式
   2)语法：element[attribute='value']
   1.2.3 element[attribute~='value']
4. 定义：选择attribute属性包含单词value的元素,并设置样式
5. 语法：element[attribute~='value']
   1.2.4 element[attribute^='value']
6. 定义：设置attribute属性值，以value开头的所有元素样式
   2)语法：element[attribute^='value']
   1.2.5 element[attribute$='value']
7. 定义：设置attribute属性值，以value结尾的所有元素样式
8. 语法：element[attribute$='value']
   1.2.6 element[attribute='value']
   1)定义：设置attribute属性值，包含value的所有元素，并为其设置样式
   2)语法：element[attribute='value']
   1.3.动态伪类
   1.3.1 锚点伪类
   1):link
   2):visited
   1.3.2 用户行为伪类
9. :hover
10. :active
11. :focus
    1.3.3 目标伪类
    :target 当我们点击锚链接时，对应ID的元素会显示在视口
    1.3.4 checked状态伪类
12. checkbox:只能设置宽度和高度，不能设置背景颜色和边框
13. 清除input的默认样式 appearance: none;
    1.3.5 CSS3结构类
14. first-child：选择属于其父元素的首个子元素的每个element元素，并为其设置样式（element:first-child）
15. last-child：选择属于其父元素的最后一个子元素的每个element元素，并为其设置样式（element:last-child）
16. nth-child(n)：选择某元素下第number个element元素（n是一个简单的表达式，不能用其他字母代替，n从0开始计算）
    1.nth-child(odd) : 可用于匹配下标是奇数的元素的关键字
    2.nth-child(even):可用于匹配下标是偶数的元素的关键字
17. nth-last-child()：匹配属于其元素的第n个元素的每个元素，从最后一个子元素开始计数(element:nth-last-child(n))
18. nth-of-type()：匹配属于父元素的特定类型的第n个子元素（element:nth-of-type()）
19. nth-last-of-type()：选匹配属于父元素的特定类型的第n个子元素，从最后一个开始计数(element:nth-last-of-type()）
20. first-of-type()：匹配属于其父元素的特定类型的首个子元素的每个元素（element：first-of-type()）
21. last-of-type()：匹配属于其父元素的特定类型的最后一个子元素的每个元素（element：last-of-type()）
22. :only-child：匹配属于其父元素的唯一子元素的每个元素（element:only-child）
23. :only-of-type：匹配属于其父元素特定类型的唯一子元素的每个元素（element :only-of-type）
24. :empty：匹配没有子元素（包括文本节点）的每个元素（element :empty ---- div:empty）
    1.4.否定选择器
    1.4.1 定义
    匹配非 元素或者选择器 的每个元素
    1.4.2 语法
    父元素：not(子元素或者选择器)
    1.4.2 案例
    ul :not(span)
    1.5.伪元素
    1.5.1 element::first-line
    对元素的第一行文本进行设置，只能用于块级元素
    1.5.2 element::first-letter
    用于向文本的首字母设置特殊样式，只能用于块级元素
    1.5.3 element::before
    在元素的内容前面插入新内容，常与content配合使用
    1.5.4 element::after
    在元素的内容后面插入新内容，常与content配合使用
    1.5.5 element::selection
    用于设置浏览器中选中文本后的背景色与前景色
    1.5.6 伪元素与元素的区别
    无法通过JS获取其DOM，无法通过浏览器直接查看
    伪元素默认是 inline
    1.5.7 使用伪元素注意事项
    1)使用伪元素before,after必须设置content
    2)使用伪元素before,after显示背景图，一定要使用display设置为块元素
    3)使用伪元素before,after设置为display:inline_block,需要再次设置vertcal-align:middle

1.1. CSS权重（优先级）

1.6.1 定义

当很多规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程

1.6.2 权重的等级与权值

行内样式（1000）> ID选择器（100）>类，属性选择器和伪类选择器（10）> 元素选择器和伪元素选择器（1）>通配符选择器（0）

1.6.3 CSS权重规则

1. 当多个选择器发生冲突时，会选择权重高的选择器来显示，权重越高越优先显示
2. 比较时需要将多个选择器的权重进行相加在进行比较，如果权重一样，后面的会覆盖前面的样式
3. 权重相加不可能超过他的最大数量级，例如无论多少个元素组成的选择器，都没有一个class选择器权重高
4. 可以在样式后边添加一个！important ，这样该样式将会拥有最大的权重，其他样式都不能将其覆盖（注意：尽量不要使用！important）

第2章 边框圆角

2.1 Border-radius

2.1.1定义

可以为元素添加圆角边框（块元素，行内块元素，行内元素）

2.1.2 语法使用

1. 四个值：左上角 右上角 右下角 左下角
2. 三个值：左上角 右上角和左下角 右下角
   3)两个值：左上角和右下角 右上角和左下角
   4)一个值：4个角都生效

2.2****圆形与椭圆形

1. 一旦使用百分比，参照的是元素本身的高度与宽度
   当拿50%时， 宽等于高 ---- 圆形
   宽不等于高 --- 椭圆形
2. 椭圆形：border-radius: x轴半径 / y轴半径
   第3章 盒阴影
   3.1 Box-shadow
   3.1.1定义
   可以控制一个或多个下拉阴影的框
   3.1.2 语法使用
   box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影
   如果设置多个阴影，各项参数使用逗号分开
   3.2内阴影
   inset(默认没有，也就是默认是外阴影)
   加上inset,由元素本身的位置先里挤效果
   注意问题：扩展程度可为负值，但是模糊不可以
   第4章 背景
   4.1背景裁剪
   4.1.1定义
   background-cilp：指定背景的绘制区域
   4.1.2 语法使用
   background-cilp：border-box / padding-box / content-box
   border-box:默认值
   4.2背景原始起始位置
   4.2.1定义
   background-origin：设置背景图像的原始起始位置
   4.2.2 语法使用
   background-origin：border-box / padding-box / content-box
   padding-box:默认值
   4.2.3 注意问题
   background-position:定义背景图片的位置，水平与垂直方向上面的偏移量（参考点与这三个有关系）
   4.3背景图像的大小
   4.3.1定义
   background-size：指定背景图像的大小
   4.3.2 语法使用
   background-size：number / % / cover / contain
   4.3.3 属性说明
   background-size： 宽度 高度（如果只写一个数值，第二个数值默认auto）
   百分比： 0% - 100% 之间的任何值，此时的百分比参照于元素div的大小
   cover：将背景图片以容器最远边进行缩放，如果高度达到一定比例100%，宽度多出的会溢出
   contain：将背景图片以容器最近边进行缩放，如果高度达到一定比例100%，宽度部分就会出现空白
   4.4多重背景
   4.4.1定义
   background-image：CSS3允许您为元素使用多个背景图片
   4.4.2 语法使用
   background-image: url('1.jpg),url('2.jpg') ... 使用逗号把图片分开
   4.4.3 注意问题
   元素引入多个背景图片，前面图片会覆盖后面的图片

第5章 渐变

5.1线性渐变

5.1.1定义

background-image：是沿着一根轴线改变颜色，从起点到终点进行顺序渐变

5.1.2 语法使用

background-image:linear-gradient(方向，开始颜色，结束颜色)

5.1.3 方向分类

1. 从上到下（默认）：background: linear-gradient(red,blue);
2. 从左到右：background: linear-gradient(to right,red,blue);
3. 对角：background: linear-gradient(to right bottom,red,blue);
4. 角度：

5.1.4 颜色结点

默认每个颜色均匀分布

1. background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);
   从0%到10%，为红色，从10%到20%为红色到蓝色的渐变，从20%到30%为蓝色到绿色的渐变，从30%到40%，为绿色到黄色的渐变
2. background: linear-gradient(red 50%,blue);
   从0%到50%，为红色，从50%到100%为红色到蓝色的渐变，最后如果不写具体数值，默认到100%
3. background: linear-gradient(red,blue 30%);
   从0%到30%，为红色到蓝色的渐变，如果第一个不写，默认数值是 0%
4. background: linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1));
   由透明色变为不透明色

5.1.5 重复渐变

background: repeating-linear-gradient(90deg,red 0%,blue 20%);
或者
background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);

5.1.6 注意问题

渐变本质绘制的是一张图片（背景图片），所以使用background或者使用background-image
百分比：把元素渐变方向的整体长度看成100%

5.****2径向渐变

5.2.1定义

background-image：从起点到终点，颜色从内向外渐变

5.2.2 语法使用

background:radial-gradient(形状尺寸，开始颜色，结束颜色)

5.2.3 形状分类

1. 圆形circle
2. 椭圆形ellipse
3. 注意：当元素的高和宽一样时，参数无论设置谁，都是圆形

5.2.4 颜色结点

background: radial-gradient(circle,red 30% ,blue 70%);
注意：此时的百分比,指的是圆心到元素最远端的距离（角度）

5.1.5尺寸大小

1. closest-side最近边
   background: radial-gradient(closest-side circle,red , blue);
2. farthest-side 最远边
   background: radial-gradient(farthest-side circle,red , blue);
3. closest-corner最近角
   background: radial-gradient(closest-corner circle,red , blue);
4. farthest-corner最远角
   background: radial-gradient(farthest-corner circle,red , blue);

5.1.6 重复渐变

background: repeating-radial-gradient(red 0%,blue 20%);
background: repeating-radial-gradient(red 0%,blue 10%,red 20%);
第6章 过渡
6.1定义
允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画改变css的属性值
6.2属性
6.1.1 transition-property

1. 定义：设置对象中的参与过渡的属性
2. 语法：transition-property：none | all | property
3. 参数说明：
   none： 没有属性改变
   all : 默认值，所有属性都改变
   property： 元素的属性名 color等
   6.1.2 transition-duration
4. 定义：设置对象过渡的持续时间
5. 语法：transition-duration：time
6. 参数说明：
   规定完成过渡效果需要花费的时间，以秒或者毫秒计，默认值0
   6.1.3 transition-timing-function
7. 定义：设置对象中过渡的动画类型
8. 语法：transition-timing-function：动画类型（只能使用一种）
9. 参数说明：
   linear:线性过渡（匀速）cubic-bezier(0,0,1,1)
   ease:平滑过渡（慢--快--慢），默认值 cubic-bezier(0.25,0.1,0.25,1)
   ease-in:慢--快 cubic-bezier(0.42,0,1,1)
   ease-out:快--慢 cubic-bezier(0,0,0.58,1)
   ease-in-out:慢--快--慢 cubic-bezier(0.42,0,0.58,1)
   贝塞尔曲线
   6.1.4 transition-delay
10. 定义：设置对象延迟的过渡时间
11. 语法：transition-delay：time
12. 参数说明：
    指定秒或者毫秒数之前要等待切换效果的开始，默认是0
    6.1.5 transition
13. 定义：设置对象变换时的过渡
14. 语法：transition：property timing-function duration delay；
15. 参数说明：
    时间顺序不能乱，其他参数位置不限
    如果想给多个属性添加不同的过度，参数之间使用逗号分开
    第7章 变换
    7.1定义
    让一个元素在一个坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转，缩放元素
    7.2 2D变换
    7.2.1 旋转
16. 定义：通过指定一个角度参数，对元素指定一个2D的旋转
17. 语法：transform：rotate(angle) 单位deg
18. 注意：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转
    7.2.2 平移
19. 定义：根据X轴和Y轴的位置给定参数，使当前元素位置移动
20. 语法：
    transform：translateX() --- 仅水平方向移动
    transform：translateY() --- 仅垂直方向移动
    transform：translate( X, Y) --- 水平方向和垂直方向同时移动
    单位px
    注意：
    如果只写一个参数，第二个默认是0，也就是只设置了水平方向上的位移
    7.2.3 缩放
21. 定义：设置元素的缩放程度
22. 语法：
    transform：scaleX() --- 仅水平方向缩放
    transform：scaleY() --- 仅垂直方向缩放
    transform：scale(x,y) --- 使元素垂直和水平方向同时缩放
    没有单位
23. 语法：
    如果只写一个参数，元素垂直和水平方向同时缩放
    7.2.4 扭曲/倾斜
24. 定义：设置元素的倾斜状态
25. 语法：
    transform：skewX() --- 仅使元素在水平方向上扭曲变形
    transform：skewY() --- 仅使元素在垂直方向上扭曲变形
    transform：skew(x,y) --- 使元素在水平方向和垂直方向上扭曲变形
    单位deg
26. 语法：
    0deg与180deg 效果一样
    7.2.5 变换基点
27. 定义：元素变换的基准点
28. 语法：
    transform-origin：水平方向 垂直方向
29. 默认值：
    rotate 几何中心点
    skew 几何中心点
    scale 几何中心点
    translate 本身位置
    7.3 3D变换
    7.3.1 开启3D空间
    transform-style: preserve-3d（一般对父元素设置）
    7.3.2 3d变换设置
    rotateX()：指对象在X轴上的旋转角度（变换基点： 50% 50% 0）
    rotateY()：指对象在Y轴上的旋转角度（变换基点： 50% 50% 0）
    rotateZ()：指对象在Z轴上的旋转角度（变换基点： 50% 50% 0）
    translateZ()：指对象在Z轴上面的平移（变换基点： 50% 50% 0）
    scaleZ():指对象在Z轴上面的缩放（变换基点： 50% 50% 0）
    7.3.3 景深(灭点)
    1)定义：实现元素在3D空间中的近大远小的效果
    2)设置：
    父元素设置景深：perspective: 300px;
    子元素设置景深：transform:perspective(300px) translateZ(-200px);
    3)景深分析图
    7.3.4 变换基点
    1)默认值： 50% 50% 0
    2)语法使用：可以使用关键字（top,bottom,left,right）,百分比，具体像素值等
    3)注意：立体3d盒子 Z：只能使用具体的长度，不能使用百分比和关键字
    4)案例：旋转的立体盒子
    7.3.5 景深中心点
    1)定义：改变观察者视角
    2)语法使用：
    perspective-origin: top right;
    perspective-origin: top;
    7.3.6 元素背面是否可见
    backface-visibility:visible ;（默认值：可见）
    backface-visibility: hidden; 不可见
    第8章 动画
    8.1定义
    使元素从一种样式逐渐变化到另外一种样式的效果
    8.2原理
    视觉暂留原理：
    人类具有”视觉暂留“的特征，人的眼睛在看到一幅画或一个物体后，在0.34s 内不会消失
    动画原理：
    通过把人物的表情，动物变化等动作，分解成许多动作瞬间的画幅，利用视觉原理，在一幅画还没消失前播放下一副画，就会给人造成一种流畅的视觉变化效果
    8.3关键帧@keyframes
    1)定义：keyframes关键帧，用来决定动画变化的关键位置
    （注意：keyframes 控制关键位置，并不是所有的位置）
    2)语法：
    @keyframes animationname{
    keyframes-selector{
    cssStyles;
    }
    }
    3)参数说明：
    animationname：必写项，定义动画的名称
    keyframes-selector：必写项，动画持续时间的百分比
    0% - 100%之间， 或者使用from和to关键字也可以设置，from代表0%，to代表100%
    8.4 animation属性
    8.4.1 animation-name
    1)定义：设置对象所应用的动画名称
    2)语法：animation-name：keyframename | none
    3)参数说明：
    keyframename：指定要绑定到选择器的关键帧的名称
    8.4.2 animation-duration
    1)定义：设置对象动画的持续时间
    2)语法：animation-duration：time
    3)参数说明：
    指定对象播放完成需要花费的时间，默认值是0
    8.4.3 animation-timing-function
    1)定义：设置对象动画的过渡类型
    2)参数说明：
    linear:线性过渡（匀速）
    ease:平滑过渡（0--慢--快--慢），默认值
    ease-in:慢--快
    ease-out:快--慢
    ease-in-out:慢--快--慢
    贝塞尔曲线

8.4.4 animation-delay
1)定义：设置对象动画的延迟时间
2)语法：animation-delay：time
3)参数说明：
可选值，定义动画开始前等待的时间，以秒或者毫秒数计数，默认值是0
8.4.5 animation-iteration-count
1)定义：设置对象动画的循环次数
2)语法：animation-iteration-count ： infinite | number
3)参数说明：
number为数字，其默认值是1
infinite：无限循环次数
8.4.6 animation-direction
1)定义：设置对象动画是否反向运动
2)语法：
animation-direction：normal , reverse , alternate , alternate-reverse
3)参数说明：
Normal:正常方向
reverse :反向运动
Alternate:先正常运动在反向运动，并持续交替运行， 需要配合循环属性使用
alternate-reverse:先反向运动在正常运动，并持续交替运行， 需要配合循环属性使用
8.4.7 animation-play-state
1)定义：设置对象是否正在运行或已暂停
2)语法：animation-play-state：paused | running
3)参数说明：
paused ： 指定暂停动画
running : 默认值，制定正在运行的动画
8.4.8 animation-fill-mode
1)定义：设置对象动画外的状态
2)语法：animation-fill-mode：backwards | both | forwards
3)参数说明：
backwards ： 让元素一开始与 form 状态保持一致
both : 让元素一开始与 form 状态保持一致,结束时候与to状态保持一致
forwards: 结束时候与to状态保持一致
8.4.9 animation
1)定义：设置对象所应用的动画特效
2)语法：
animation ： name duration timing-function delay interation-count direction play-state
第9章 伸缩盒模型
9.1新版本与老版本对比
9.1.1 flex容器
新版:
display: flex;
display: -webkit-flex;
老版:
display: box;
display: -webkit-box;
9.1.2 主轴的布局方向
新版:
flex-direction: row; --- 主轴默认值
flex-direction: column; --- 主轴与侧轴发生对调
老版:
-webkit-box-orient: horizontal; --- 主轴默认值
-webkit-box-orient: vertical; --- 主轴与侧轴发生对调
9.1.3 主轴的排列方向
新版:
flex-direction: row-reverse; --- 主轴从左到右，start与end对调
flex-direction: column-reverse; --- 主轴与侧轴发生对调，主轴start与end对调
老版:
-webkit-box-direction: normal; --- 元素排从左到右，默认方向
-webkit-box-direction: reverse; --- 元素排从右到左，但是元素整体都在左边

9.1.4 富裕空间的管理（主轴）
新版:
justify-content: flex-start; --- 富裕空间在右侧
justify-content: flex-end; --- 富裕空间在左侧
justify-content: center; --- 富裕空间在两边
justify-content: space-around; --- 富裕空间在左侧包含每一个伸缩项目
justify-content: space-between; --- 每一个伸缩项目包含富裕空间

老版:
-webkit-box-pack: start; --- 默认值：富裕空间在右边
-webkit-box-pack:end; --- 富裕空间在左边
-webkit-box-pack:center; --- 富裕空间包含伸缩项目的整体，使伸缩项目整体在中间，富裕空间在两边
-webkit-box-pack:justify; --- 伸缩项目包含富裕空间
9.1.5 富裕空间的管理（侧轴）
新版:伸缩项目的高度又自身内容撑开
align-items: flex-start; --- 富裕空间在下边
align-items: flex-end; --- 富裕空间在上边
align-items: center; --- 富裕空间在两边
align-items: baseline; --- 富裕空间被基线分开
align-items: stretch; --- 拉伸，默认值
老版:
-webkit-box-align: start; --- 富裕空间在下边
-webkit-box-align: end; --- 富裕空间在上边
-webkit-box-align: center; --- 富裕空间在上下两边，富裕空间包含伸缩项目的整体，使伸缩项目整体在中间
9.1.6 弹性空间（伸缩项目）
新版:
flex-grow: 1; --- 将富裕空间分配到项目上
老版:
-webkit-box-flex: 1; --- 弹性空间，将富裕空间分配到项目上
9.2新版本特有属性
9.2.1 项目实现换行（flex容器）
flex-wrap: nowrap; --- 默认值，父元素宽度不够，子元素自身宽度会被压缩
flex-wrap: wrap; --- 父元素宽度不够，子元素会进行换行
flex-wrap: wrap-reverse; --- 子元素换行的同时，侧轴的start与end发生对调
出现flex-wrap：wrap；之后，出现单行的富裕空间
注意：align-items 每一行的富裕空间，align-items: flex-start;
9.2.2 控制整体侧轴的富裕空间（flex容器）
align-content: flex-start; --- 项目整体进行打包，放在整体侧轴的start处
align-content: flex-end; --- 项目整体进行打包，放在整体侧轴的end处
align-content: center; --- 项目整体进行打包，放在整体侧轴的center处
注意：align-items 与 align-content 发生冲突时，看元素是否换行
如果没有换行align-items 生效
如果有换行align-content 生效 --- 打包
align-content 生效条件：
1)在伸缩容器中产生换行flex-wrap: wrap;
2)同时设置足够高的容器高度（因为需要整体打包才能看见效果，所以需要高度）
9.2.3 控制主轴和侧轴的位置及方向（flex容器）
flex-flow 是 flex-wrap 与 flex-direction 的缩写
flex-flow:wrap-reverse column-reverse;
与flex-wrap: wrap-reverse;flex-direction: column-reverse;实现效果一样
9.2.4 项目的排列顺序（flex项目）
order: 1;
order排序，把排序元素先单独拿出来，让剩余元素先正常排列，排完之后，order元素在其后边再进行顺序排列
order是沿着主轴方向进行排序的

9.2.5 项目自身侧轴的富裕空间（flex项目）
每一个项目控制自身的侧轴
align-self: flex-start;
align-self: flex-end;
align-self: center;
9.2.6 收缩率（flex项目）
当伸缩项目设置宽度，比容器宽度还要大时，元素并没有发生溢出的情况，那此时就出现一个东西叫 收缩因子（收缩率）
flex-shrink:拉伸银子 0 ---不拉伸
flex-shrink:收缩因子 默认值：1 --- 收缩
9.2.7 基准值（flex项目）
子元素的基准值 flex-basis：0

第10章 多列

10.1定义

使用CSS3，能够创建多个列来对文本进行布局 ( 就像报纸那样)

10.2属性

10.2.1 column-count

1)定义：规定元素应该被分隔的列数
2)语法：column-count: number;

10.2.2 column-****fill

1)定义：规定如何填充列
2)语法：column-fill: balance | auto;

10.2.3 column-gap

1)定义：规定列之间的间隔
2)语法：column-gap: 像素值;

10.2.4 column-rule

1)定义：所有 column-rule-* 属性的简写属性(颜色，样式，宽度)
2)语法：column-rule: 颜色，样式，宽度;

3. 列之间规则的颜色：column-rule-color
   列之间规则的样式：column-rule-style
   列之间规则的宽度：column-rule-width

10.2.5 column-span

1)定义：元素应该横跨的列数
2)语法：column-span:number

10.2.6 column-width

1)定义：列的宽度
2)语法：column-width:像素值