第一章
复杂选择器
一、兄弟选择器：具备相同父元素的元素
① 特点：1、通过位置关系来匹配元素（平级关系）
2、只能向后找，不能向前找
② 兄弟选择器——相邻兄弟选择器
什么是相邻兄弟：紧紧挨在一起的元素，称之为相邻兄弟
语法：选择器1+选择器2{} 只选择 挨着选择器1的选择器2
③ 兄弟选择器——通用兄弟选择器
什么是通用兄弟：后面所有的兄弟元素
语法：选择器1~选择器2{} 选择 后面所有的选择器2
使用 ~ 作为结合符
二、属性选择器
属性选择器：允许通过元素所附带的属性及其值来匹配页面的元素
语法：[ ]（唯一一组以[]表示的属性）
属性选择器分类
① [attr] attr：表示任意属性
作用：匹配附带 attr 属性的元素
例：[id] : 匹配 附带 id属性的元素
[class] : 匹配 附带 class属性的元素
② elem[attr]
Elem：element，表示页面中任意元素(中间不加空格)
作用：匹配页面中附带attr属性的 elem 元素
例：p[id][class] : 同时具备id和class属性的p元素
div[id][style] : 同时具备id和style属性的div元素
③ elem[attr1][attr2]
作用：匹配既具备attr1属性的同时也具备attr2属性的元素
例：p[id][class]:匹配页面中即有id属性又有class属性的p元素
④ elem[attr=value]
value：表示某一具体数值
作用：匹配attr属性值为value的所有元素，elem可不写
例：想获取页面中所有的文本框 input[type=text]
⑤ elem[class~=value]
作用：1、在多类选择器引用中使用
2、匹配class属性值是以空格隔开的值列表，并且value是该值列表中的一个独立的选择器
[attr=value]，attr的值只为value，[class~=value]，attr的值可以为多个，只要其中一个为value即可
⑥ elem[attr^=value]
^=：以…（字符）作为开始————有多个class时，若此class在后面则不生效(将class看做字符串)
作用：匹配 attr 属性值以value 字符作为开始的元素
例：<div class="col-sm-1"></div>
<div class="col-sm-2"></div>
...
匹配页面中所有class以col字符为开始的元素[class^=col]
⑦ elem[attr*=value]
* ：包含…（字符）
作用：匹配 attr 属性值中包含value 字符的元素
例：<div class="col-md-1"></div>
<div class="col-md-2"></div>
...
匹配页面中所有class中包含md字符的元素[class*=md]
⑧ elem[attr$=value]
$=：以…（字符）作为结束
作用：匹配atter 属性值以value字符结尾的元素，如have以e结尾
注意：属性选择器中所有的值都可以使用""或''引起来，包含数字或者特殊字符必须用""或''引起来
三、伪类选择器
① 目标伪类
作用：匹配页面中被激活的HTML【锚】元素
用于点击后显示内容（有锚和锚点、隐藏和显示即可）
语法：:target （要显示的内容的类名:target）
② 结构伪类
作用：用过元素间的结构关系，来匹配元素
语法：1、:first-child ：匹配属于其父元素中的首个子元素
2、:last-child ： 匹配属于其父元素中的最后一个子元素
3、:nth-child（n）： 匹配属于其父元素中的第N个子元素(n大于0，参数是括号里的n)
n也可以换成odd(奇数)、even(偶数)、an+b(每a个的第b个, (从1开始数) )
4、:empty：匹配没有子元素的元素（没有空格、文本、回车等）
5、:only-child ：匹配属于父元素中的唯一子元素（此子元素的父元素只有这一个子元素）
6、:nth-last-child(n)：匹配属于其父元素的倒数第N个子元素(与 :nth-child(n) 用法相同)
7、:nth-of-type(n)： 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
8、:last-of-type 匹配属于其父元素的特定类型的最后一个此类型的元素
等同于:nth-last-of-type(1)
例：选择父元素的最后一个 p 元素：p:last-of-type
③ 否定伪类（排除属性）
作用：将满足条件的选择器匹配的元素排除在外
语法： :not(selector) selector：选择器
例：div:not(".container") 获取页面中所有除class为container之外的div元素
span:not(:empty) 获取非空的span元素
④ 元素状态伪类
作用：匹配元素已启用，被禁用，被选中的状态
主要应用在表单控件上
语法：1、:enabled ：匹配每个已启用的元素
2、:disabled ：匹配每个被禁用的元素
3、:checked ：匹配每个被选中的input元素(用于单选按钮和复选框)
四、伪元素选择器
伪类： 匹配元素的不同状态，匹配到的是"元素"
伪元素：匹配的某个元素中的"某个部分内容"
① :first-letter 或 ::first-letter letter:字符（伪元素中优先级最高）
用于匹配某元素中的首字符
② :first-line 或 ::first-line
用于匹配某元素的首行字符
③ ::selection
匹配被用户选取部分的样式
注意：只能改变文本颜色和背景颜色
：与 ：：的区别
1、：既能表示伪类选择器，也能表示伪元素选择器（css2）
2、css3中 ：只表示伪类选择器，：：只表示伪元素选择器
尽量选择：来使用，既表示伪类也表示伪元素（css3中兼容css2）
____________________________________________________________________________________
内容生成：通过css，动态的向某元素区域内增加内容
伪元素选择器
1、语法 ① :before或 ::before
定位到某元素的内容区域之前
② :after或 ::after
定位到某元素内容区域之后
<div>(内容区域之前) 内容 (内容区域之后)</div>
2、属性 content: （配合 :after 或 :before 一起使用，作为它们的属性）
作用：生成内容(可把生成的内容看做行内元素，可设置定位、背景图、高宽、样式等)
取值：① 字符串：纯文本，使用的话要用 " " 引起来 生成字符串
② 图像： url(图片地址) 生成图片
③ 计数器（基本不用）
3、解决问题
(一) 浮动元素的父元素高度(元素不占据父元素的页面空间)
.clear:after{ .clear 指定的类
content：""; 生成空内容
display：block; 将空内容变成块级元素
clear：both; 清除浮动带来的影响
}
(二) 外边距溢出
#d1:before{ 父元素:before
content：""; 生成空元素
display：table; 把空元素变成表格元素
}
注意: 将伪元素和伪类结合起来使用时，必须先伪类再伪元素
如果div:after:hover是没有效果的，应设置为div:hover:after
4、计数器使用
什么是计数器：使用css动态生成一组有序的数字并且插入到元素中
语法：
①、属性：counter-reset
1、作用：声明或重置计数器
2、语法：counter-reset：名 初始值；
counter-reset ：名称1 初始值1 名称2 初始值2;
注意：1、初始值可以省略，如果省略的话默认为0
2、不能放在使用的元素中声明，大部分情况下，可以将计数器声明在使用元素的父元素上（结合实际情况考虑）
②、属性：counter-increment
1、作用：设置计数器增量，即每次出现的计数器值的变化范围
2、语法：counter-increment：计数器名称 增量值；
counter-increment：计数器名称1 增量值1 计数器名称2 增量值3;
注意：1、增量值可以为正，也可以为负，也可以省略
为正：递增；为负：递减
省略：默认增量值为1
2、哪个元素使用计数器，在哪个元素上使用计数器
③、函数：content
1、作用：在指定元素中，使用计数器的值
必须要配合 content 属性一起使用
content要配合着 ：before 或 ：after一起使用
2、语法： xx：before{
content：cunter（名）；
}
____________________________________________________________________________________
弹性布局(Flexible box)，简称为： flex布局 指定某元素中的子元素的排列布局方式
弹性布局容器：简称 "容器"，使用弹性布局属性的元素，其子元素能够按照弹性布局的方式进行排列
弹性布局项目：简称 "项目"，弹性布局容器中的子元素，允许按照弹性布局的方式进行排列
flex布局分为:
旧版本(2009年) dispaly: box;
过渡版本(2011年) dispaly: flexbox;
标准版本(2012)display: flex;
Android
2.3(2010年12月7日) 开始就支持旧版本 display: -webkit-box;
4.4(2013年9月4日) 开始支持标准版本 display: flex;
IOS
6.1(2013年1月29日) 开始支持旧版本 display: -webkit-box;
7.1(2014年3月11日) 开始支持标准版本 display: flex;
IE10部分支持(2012)，需要-ms-前缀: display: -ms-flexbox;
做兼容性时，只需要写旧版本和标准版本即可
语法：属性：display
取值：①、flex 作用：将块级元素设置为弹性布局的容器，此容器具有块级元素的特征
②、inline-flex 作用：将行内元素设置为弹性布局的容器，此容器具有行内元素的特征
注意：①、元素设置为flex布局后，子元素的float,clear,vertical-align,text-align全部失效
②、容器中的项目，允许直接修改尺寸
③、容器中的项目，外边距合并问题被解决
④、若li的子元素被设置为容器，则li需设置display：inline-block
容器属性：将属性设置给容器元素，从而实现所有子元素的排列布局方式
1、flex-direction 作用：决定主轴以及项目在主轴上的排列方向
取值：①、row 主轴为水平方向的轴，起点在左端，默认值
②、row-reverse 主轴为水平方向的轴，起点在右端
③、column 主轴 更改为 交叉轴，起点在上端（重点）
④、column-reverse 主轴 更改为 交叉轴，起点在底端
2、flex-wrap
作用：默认情况下，项目们都在一条线上排列(轴线)，如果项目们在一条轴线上排不下时，如何换行
取值：①、nowrap 默认值，不换行,但是会缩放项目
②、wrap 换行
③、wrap-reverse 换行，第一行在下方
3、flex-flow
作用：flex-direction 和 flex-wrap 的缩写
取值：①、row nowrap ：默认值
②、指定：flex-direction flex-wrap;
4、justify-content
作用：指定项目在主轴上的对齐方式
注意：1. 如果主轴为横轴，则指定横向的排列对齐方式
2. 如果主轴为交叉轴，则指定纵向排列对齐方式
取值：①、flex-start 在轴的起点对齐
②、flex-end 在轴的终点对齐
③、center 居中对齐，可使多行居中(子项目不能使用flex-grow), (主轴为交叉轴时可垂直居中)
④、space-between 两端对齐(分散对齐)，项目之间的间隔都相等（重点）
⑤、space-around 每个项目两侧的间隔是相等的，所以项目之间的间隔比边框的间隔大一倍
5、align-items
作用：定义项目在交叉轴上的对齐方式
取值：①、flex-start 在交叉轴的起点对齐
②、flex-end 在交叉轴的终点对齐
③、center 在交叉轴的中间对齐，可使子项目居中
④、baseline 基线对齐，以最大的文本第一行的基线为准
⑤、stretch 默认值，如果项目未设置高度或高度为auto的话，将占满整个容器的高度
6、align-content
作用：该属性定义项目们有多根轴线时的对齐方式(仅在项目自动换行时有效)
取值：①、flex-start 在轴的起点对齐
②、flex-end 在轴的终点对齐
③、center 在轴的中间对齐
④、space-between 与轴的两端对齐，轴线之间的间隔相等
⑤、space-around 每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线边框的间隔大一倍
⑥、stretch 默认值，占满轴线
项目属性
1、order
作用：排序，取值越小，排列越靠前，默认值为0
取值：整数数字
可将容器元素设置为flex-direction:column-reverse，需要排在前面的设置order: 1; 其它反向排列，固定高度时可设置justify-content:flex-end
只能为整数数字，否则无效
2、flex-grow———需要分配一个固定值，在此基础上放大
若都设置width：0，则完全按比例放大，建议使用
作用：父元素有剩余空间的条件下，定义项目放大比例，默认为0时，即便有剩余空间，也不放大
取值：整数数字，取值越大，放大比例越大（可设置为不同的倍数，使之是其它元素的几倍）
注: 可以是小数，但若还有剩余空间，则不会分配给任何元素，整数则会平均分配
有时即使设置width为0，空间也不会完全按比例放大，可将占据空间较大元素的flex-grow减少0.01
3、flex-shrink
作用：父元素剩余空间不足的情况下，定义了项目如何缩小即缩小比例，默认值为1
取值：整数数字，取值越小，缩小比例越小
注意：如果一个项目的 flex-shrink 设置为0，其它项目设置为1，如果空间不足时，flex-shrink 为0的元素宽度不变，为1的元素会缩小
如:当空间多余时，第一个元素变大，其它元素不变
当空间不足时，第一个元素缩小且不换行，其它元素不变
.parent>div:nth-child(1){
flex-grow: 1; 空间多余时放大
flex-shrink: 1; 空间不足时缩小
overflow: hidden;
}
.parent>div:nth-child(2), .parent>div:nth-child(3){
flex-grow: 0; 空间多余时不变
flex-shrink: 0; 空间不足时不变
}
4、flex-basis
作用：定义项目所占据容器空间的大小(主轴空间)，浏览器根据这个属性，计算主轴空间是否还有多余空间
取值：①、auto 项目本身大小，默认值
②、具体数值，自定义大小，项目将占据固定空间，也可以设置跟width和height属性值一样
5、flex
作用：flex-grow，flex-shrink flex-basis 的简写方式
取值：①、auto 等同于1 1 auto;
②、none 等同于0 0 auto;
③、flex-grow[,flex-shrink,flex-basis] [ ]里的可以省略不写
6、align-self
作用：定义单个项目与其他项目不一样的在交叉轴的对齐方式，可以覆盖父元素的 align-items 属性
取值：①、auto 默认值，继承父元素align-items的值,如果没有父元素的话，则等同于stretch
②、flex-start 在交叉轴的起点对齐
③、flex-end 在交叉轴的终点对齐
④、center 在交叉轴的中间对齐
⑤、baseline 基线对齐
⑥、stretch 占满整个容器的高度
兼容性:
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-ms-flex-positive: 1;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-ms-flex-pack: center; /* WP IE 10 */
-webkit-box-pack: center; /* android 2.1-3.0, ios 3.2-4.3 */
-webkit-justify-content: center; /* Chrome 21+ */
justify-content: center; /* android 4.4 */
-ms-flex-align: center; /* WP IE 10 */
-webkit-box-align: center; /* android 2.1-3.0, ios 3.2-4.3 */
-webkit-align-items: center; /* Chrome 21+ */
align-items: center; /* android 4.4 */
-ms-flex-direction: column; /* WP IE 10 */
-webkit-box-orient: vertical; /* android 2.1-3.0, ios 3.2-4.3 */
-webkit-flex-direction: column; /* Chrome 21+ */
flex-direction: column; /* android 4.4 */
-webkit-align-centent: center;
align-centent: center;
-ms-flex-pack: justify; /* WP IE 10 */
-webkit-box-pack: justify; /* android 2.1-3.0, ios 3.2-4.3 */
-webkit-justify-content: space-between; /* Chrome 21+ */
justify-content: space-between; /* android 4.4 */
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-align-items: baseline;
align-items: baseline;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
box-align: stretch;
align-items: stretch;
____________________________________________________________________________________
多列
1、语法
①、分隔列
属性：column-count
取值：数字
②、列间隔
属性：column-gap
取值：px为单位的数值
③、列规则
作用：定义每两列之间的线条样式
属性：column-rule
取值：width style color;
2、浏览器兼容性
IE 10 、Opera 浏览器兼容较好
Chrome、Safari、Firefox 不直接支持多列相关属性
第二章*******************************************************************************
CSS Hack（做IE浏览器的兼容性）
IE浏览器中的3种发展模式 混杂模式： 没有标准的模式
准标准模式：既支持标准，同时又向前兼容非标准代码
标准模式： 只支持W3C的标准规范，不支持非标准代码
不同模式主要对css（框模型）和JS解析会有不同的解析效果
1、CSS Hack
根据不同的IE浏览器版本，去执行不同的css代码
原理：通过css属性的优先级解决兼容性问题
2、CSS Hack方式
① CSS类内部Hack
通过css样式属性名或值的前后增加前后缀以便识别不同版本的浏览器
② 选择器Hack
在css选择器前增加前缀以便识别不同的浏览器
③ HTML头部引用Hack（掌握）
3、如何解决浏览器兼容性问题
① html、css、js代码，全部都是标准模式
<!doctype html> html5
<!doctype ..... strick> html4.01 xhtml1.0
② 针对不支持的属性，需要通过浏览器前缀来解决
-webkit- Chrome、Safari
-moz- firefox
-o- Opera
-ms- Microsoft IE
③ 针对微软IE的低版本浏览器，可以通过CSSHack的方式来解决
1、CSS类内部Hack
IE 8.9.10 属性：值\0 后缀
IE 9.10 属性：值\9\0 后缀
IE 7 *, +, #属性：值
IE 6 -, _属性：值，以及：*, +, _, #
注意：+,- 同时出现时，+ 只针对IE7，- 只针对IE6
属性前缀：在css样式属性名前加上一些只有也定浏览器才能识别的hack前缀
2、选择器Hack
*前缀 识别IE6
*+前缀 识别IE7
@media screen\9{...} 只对IE6，IE7生效
3、头部引用Hack
原理：通过使用 IE 的条件注释来完成浏览器版本的判断，引入不同的CSS文件
④ 主流浏览器的主流版本
通过相应的CSS框架解决，比如 Bootstrap
____________________________________________________________________________________
CSS Hack-头部引用Hack（浏览器兼容性 ——— 比较实用）
1、什么是头部引用Hack：使用IE条件注释 来解决兼容性问题
2、语法：（区别大小写）
<!--[if 条件 IE 版本]> /*用于区分浏览器版本*/
满足浏览器版本时要执行的操作
<![endif]-->
例：<!--[if IE 6]>
该段内容只有在IE 6的浏览器会被解析
<![endif]-->
① 版本
取值：1、6-10之间的任意数字（版本号）
2、省略版本号的话，则判断是否为IE浏览器
② 条件
1、gt 只在 大于 指定版本的浏览器中解析内容 greater than
2、lt 只在 小于 指定版本的浏览器中解析内容 less than
3、gte 只在 大于等于 指定版本的浏览器中解析内容 greater than or equal
4、lte 只在 小于等于 指定版本的浏览器中解析内容 less than or equal
5、！ 只在条件版本以外的所有版本浏览器中解析内容（非，取反）
6、省略 判断是否为 IE 或是否为指定版本
例：<!--[if gt IE 6]>
该段内容只有在IE 6以上的浏览器会被解析
<![endif]-->
例：<!--[if ! IE 6]>
该段内容除IE6以外的浏览器都会被解析 //<link rel="stylesheet" href="指定版本的css文件"/>
<![endif]-->
一般在<head></head>中使用 link 引入各种版本的CSS外部文件（放在其它正常 link 之后）
____________________________________________________________________________________
转换
1、什么是转换：转换是改变元素在页面中的大小，位置，形状，角度的一种方式
注意：在父元素上使用了transform或perspective时，因为transform本身创造了一个局部坐标系，所以子元素定位被映射到新的坐标系中，而父元素会取代viewport成为fixed子元素的定位基准
转换分为 2D转换 和 3D转换
① 2D转换 只允许元素在X轴和Y轴进行转换操作
② 3D转换 在2D的基础上，增加了Z轴上的转换操作
2、转换的原点
属性：transform-origin
默认：转换原点在元素的中心处（X轴和Y轴的50%处）
取值：数字 以元素左上角为(0 0)点进行计算，单位px
百分比 以元素左上角为(0% 0%)点进行计算，单位%
关键字 top/right/bottom/left/center
取值时，多个值之间用"空格"隔开
最少两个值 值1（X）值2（Y）
三个值 值1（X）值2(Y) 值3(Z)
3、转换属性：transform
取值：1、none 默认值，表示元素不进行转换
2、trans-function 由一组转换函数组成，一个或多个转换函数
如果是多个转换函数，中间用 空格 分开
4、2D转换
① 2D位移：改变元素在X轴和Y轴上的位置
属性：transform (相对于自身位移)
函数：1、translate（X）
元素在X轴上的位移距离，取值为正，右移；取值为负，左移
2、translate（X，Y）
元素在X轴和Y轴上的位移距离
Y：改变Y轴的距离，取值为正，下移；取值为负，上移
3、translateX(X)
改变元素在X轴上的位置
4、translateY（Y）
改变元素在Y轴上的位置
② 2D缩放：改变元素在X轴或Y轴上的大小
在正常的布局情况下，在最里面再次添加一个span，使之缩小，可得到小于12px的字体
属性：transform
函数：1、scale（value）
value为缩放倍数，如果只给一个值，X轴和Y轴是等比缩放(相对于自身)
取值：默认值为1，即原始大小
缩小：0到1之间的小数
放大：大于1的数值
负值：放大，以及旋转180度效果显示
2、scale（x,y） 分别改变元素在X轴和Y轴上的大小
3、scaleX（x） X轴缩放
4、scaleY（y） Y轴缩放
③ 2D旋转
属性：transform
函数：rotate（ndeg） //设置transform-origin:left;transform:rotate(**deg); 可使其旋转，用于连线
n为旋转角度：n的取值为正，顺指针旋转；n的取值为负，逆时针旋转
注意：1、转换原点：旋转围绕着转换原点来做的，所以原点位置不同，转换效果也不同
2、旋转时，连同坐标轴也一同跟着旋转(top/left也会不同)
3、可累加，即使超过360deg，但使用animation时，100%时应为360的倍数
可设置body{ transform:rotate(90deg); }，旋转屏幕，但position:fixed会失效
④ 2D倾斜：改变元素在页面中的形状，以原点为中心，围绕着X轴和Y轴产生的倾斜角度
属性：transform
函数：skewX（Xdeg） 向X轴（横向）产生倾斜效果，其本质改变的是Y轴的倾斜角度
取值为正，Y轴按逆时针角度倾斜
取值为负，Y轴按顺时针角度倾斜
skewY（Ydeg） 向Y轴（纵向）产生倾斜效果，其本质改变的是X轴的倾斜角度
取值为正，X轴按顺时针角度倾斜
取值为负，X轴按逆时针角度倾斜
skew（Xdeg，Ydeg） X：横向倾斜
Y：纵向倾斜
5、3D转换：允许元素在x、y、z轴上进行转换
① 透视距离
属性：perspective
单位：px
作用：模拟人眼到3D转换物体之间的距离
注意：该属性要添加在3D转化元素的父元素上
浏览器兼容性：Chrome 和 Safari 要加 -webkit-perspective：数值;
② 3D旋转
属性：transform
作用：允许让元素在x，y，z轴上分别实现旋转效果
取值：1、rotateX(ndeg); 以 x 轴为中心轴，旋转元素
2、rotateY(ndeg); 以 y 轴为中心轴，旋转元素
3、rotateZ(ndeg); 以 z 轴为中心轴，旋转元素，与2D旋转一样
4、rotate3D(x,y,z,ndeg)
x、y、z取值为0，则该轴不参与旋转
x、y、z取值为1，则该轴参与旋转（x,y,z都为1时，与三轴先后旋转的效果不同）
在旋转中，n为旋转角度：n的取值为正，顺指针旋转；n的取值为负，逆时针旋转
③ 3D位移（一般需要绝对定位、且父元素3D旋转，transform-style，而不需要perspective）
作用：改变元素在x、y、z的位置
语法：1、transform-style 属性，转换风格
作用：如何显示子元素的3D位置，给父元素加
取值：1、flat 默认值，不保留其子元素的3D位置，子元素不能以3D位置摆放
2、preserve-3d 保留其子元素的3D位置，允许子元素以3D方式摆放位置
2、transform 属性，3D位移
取值：translateZ（zpx）;
translate3D(xpx,ypx,zpx);
兼容性:
-moz-transform: ...; /* Firefox */
-ms-transform: ...; /* IE */
-o-transform: ...; /* Opera */
-webkit-transform: ...; /* Chrome, Safari */
transform: ...;
旋转屏幕并使其仍然占满屏幕:
body{
transform-origin: 0 0 0;
transform: translate(1280px, 0px) rotate(90deg);
width: 720px;
height: 1280px;
overflow: hidden;
}
document.documentElement.style.fontSize = innerHeight/32 + 'px';
____________________________________________________________________________________
过渡：使得CSS属性值，在一段时间内，平缓变化的一个效果
Internet Explorer 10、Firefox、Chrome和Opera均支持过渡，但Safari必须添加-webkit-前缀
过渡效果4要素
① 指定过渡属性（必须的）指定哪个css属性值在变化时需要使用过渡效果
② 指定过渡时间（必须的）多长时间内完成过渡效果
③ 指定过渡速度时间的曲线函数，指定过渡过程中的变化速率（匀速、先快后慢、…）
④ 指定过渡延迟时间，当用户激发操作后，等待多长时间才激发效果
1、指定过渡属性（必须）
属性：transition-property：
取值：①、none：默认值，不使用过渡
②、all：能使用过渡效果的属性全部使用过渡
③、具体属性名称，要使用过渡效果的属性名，属性名过多时可用 ， 隔开
页面中允许设置过渡效果的属性：(display不支持)
① 颜色属性：color，background-color，border-color
② 取值为数值的属性：background-size，margin，padding
③ 转换属性：transform
④ 渐变属性：background-image
⑤ 阴影属性：box-shadow
⑥ 显示效果可见性：visibility
注意：设置多个属性过渡时同样用，号隔开
例： transition-property：background，color，margin...
2、指定过渡时长（必须）
属性：transition-duration：
取值：以 s / ms 为单位的数值（1s=1000ms）
注意：默认值为0s，即没有过渡效果
多个属性名可以给多个时长，用，隔开（曲线函数和延迟同理）
3、指定过渡速度时间的曲线函数
属性：transition-timing-function：
取值：① ease 默认值，先慢后快再慢
② linear 匀速
③ ease-in 慢速开始，快速结束
④ ease-out 快速开始，慢速结束
⑤ ease-in-out 慢速开始和结束，中间先快后慢
4、过渡延迟
延迟：用户激发操作后，等待多长时间再显示效果
属性：transition-delay：
取值：以 s / ms 为单位的数值
5、过渡属性简写方式
transition：property duraion timing-function delay;（多个属性名在；前用，隔开）
例：transtion：all .5s linear .5s
过渡声明在激发操作的属性中，只管去，不管回；过渡声明在声明属性中，既管去，又管回
如果想改变两个或多个css属性，需把几个transition的声明以列表的形式连在一起，用逗号,隔开，然后各自可以设置不同的延续时间等属性：
-moz-transition：width .8s linear, color .3s ease-in;
-ms-transition：width .8s linear, color .3s ease-in;
-o-transition：width .8s linear, color .3s ease-in;
-webkit-transition：width .8s linear, color .3s ease-in;
transition：width .8s linear, color .3s ease-in;
网友评论