、CSS2.1セレクタ
二つ、CSS3セレクタ
1、CSS2.1セレクタ
タブのdivクラス{}の.class {} ID #ID {} * {}ワイルドカード
子孫DIV Pのスパンと設定交差点div.class＃識別DIV、P、スパン、＃IDは{}
2、セレクタ息子DIVとの関係> P IE7
互換次の兄弟を開始DIV + P IE7互換開始
jQueryのこれらのセレクタを使用することができる〜、IE6と互換性がある可能性のあるすべての兄弟のdivの背後にある
、3セレクタCSS3属性、タグ任意の属性によって選択することができる
1、E [ATTR = 'ヴァル '] CSS3 選択された要素は、ヴァルのATTR E値属性
2、E [ATTR ^ =' val'を] CSS3 と属性の値を選択することヴァルのATTR始まりであります素子E
3、E [ATTR $ = 'ヴァル] CSS3 ATTR属性及びEの値を選択することがヴァル端部要素である
4、E [ATTR * ='ヴァル] CSS3 ATTR属性とvalの要素に含まれる値を選択
5、 E [ATTR | = 'ヴァル] CSS3 のattr特性を有するように選択し、
属性値がある-スプリット、および-内容の前にvalの要素Eである
6、E [ATTR〜='ヴァル] CSS3 のattrの特性、および特性を有するように選択値は、スペースで区切られ、そしてEはヴァル要素の背後の空間である
4、セレクタシーケンサ息子セレクタシーケンサー同様の擬似クラスセレクタ
一子{1、P } から選択されます P表の記号は、このPタグは、親要素の最初の息子はIE7互換開始であります
図2に示すように、P：最後の子{ } Pテーブルタブを選択し、タブpは最後の子の親要素が互換性IE7開始する
n番目の子（：3、P N）{} pはPであるタグを選択しますN-息子親要素、
nは1を開始し、IE9互換開始P：テラス、N番目（2N）2,4,6,8 ...
P：テラス、N番目（3Nの+ 8）8、11 、17 ....
注：発現、nはゼロであるが、最低限2Nを取るために、それが0未満を取ることで
、3N + 8、nはゼロである、最小8 4、P：nth-最後の子（N）{} pがラベルを選択し、
親要素は、pはn後方息子番号番目、IE9互換開始
P：第n-最後の子（ 2N）を{}： すべての数は後方偶数P選択されている
5、P：n番目オブ型（n）{} Pラベルを選択し、ラベルpはn番目の息子、互換IE9開始における全てのpの親要素である
いくつかの異なる種類の、わずか数Pラベルにかかわらず、すべてのjQueryの$（「P」）EQ（の使用可能な他のラベル 3） を探しているが標識されている要素$ 3（「P：n番目の子（ 3）」） を探して第三の息子素子
5、擬似ラベルを選択するための擬似クラスのクラス選択
：リンク：訪問：ホバー：アクティブ 1、ホバー任意の要素は、開始とIE7するために使用することができます
2つの,:フォーカスは、フォーカスを取得したときのフォーカス取得フォーム要素、トリガーパターン
3 ,:ないP：いない（ .PP） クラスと呼ばれるタグ無しP選択されたタブ、PPのP
4 ,:のみ、子のみ息子P：専用子{} Pタグは、親要素のみ息子がある場合には、選択される
,: 5ブランクタグがないコンテンツであって、存在しない、請求、エンドツーエンド接続の空のタグをようにタブスペースとを包みます。これは、空のタグである
6：フォーム要素のチェックボックスをチェックまたはチェックボックスが選択されている場合、このスタイルがトリガされた
無効な7 ,:を：IE9は互換性のある無効なフォーム要素と効果的なフォーム要素開始有効に
6を、擬似要素を表し::擬似要素は、擬似要素のプロパティで記述する必要がありますコンテンツです
。1、前::: 2つの行がダミー要素であり、または要素は、幅と高さの添字を設定するために、すぐに舞台をオフにする必要があります後に
2を、::選択選択したテキストのスタイルIE9互換性の開始
、3 ::最初の文字::最初 -line 文字の、テキストの最初の行
7、境界半径フィレットPX％の電磁IE9部は、互換性の開始
境界底半径境界底 -left半径を
一、背景背景
1、回顾
地色
位置
画像
リピート
サイズ
アタッチメント：固定
2.background-origin 和 background-clip
background-origin : 背景起源属性
content-box:盒子内容,如果有这个属性，那么盒子的背景从内容开始渲染，如果没人，默认从盒子右上角开始渲染
padding-box:图片完整的那一张是从盒子左上角开始起源
注意：盒子的padding区域永远有背景
2.1 background-clip:背景剪裁
content-box:padding区域的背景
padding-box:默认，padding区域有背景
background: url(../images/longlong.jpg);
content-box content-box; 总称
3 background-size
改变背景尺寸 ie9开始兼容
background-size：100px 100px;
将背景图片变为100乘以100的大小
如果背景图不是正方形，则会变形
3.1 background-size：100px auto;
图片不变形的情况下，宽度变为100，高度按比例自适应，宽完全可以显示完， 高有可能显示一部分
background-size:cover;
图片不变形的情况下，尽可能多的显示内容，根据图片的宽高比例和盒子的宽高比例调整，如果两个比例不相同，会出向两种情况；显示不完整，显示完整
3.2 background-size:contain;
图片不变形，按照div短边长度压缩，图片一点能展示完整，但是可能会留白
多背景
一个盒子可以设置多个背景图片 ie9开始兼容
background:url() no-repeat,url() no-repeat, url()repeat-x,......;
背景会按照书写顺序进行覆盖，第一个是最上边的
background-size:auto auto,100px 200px,200px 300px;
二：蒙版
可以使用图片渐变作为遮罩层
语法：
-webkid-mask-image:url();
-webkid-mask-repeat:no-repeat;
-webkid-mask-position:center center;
综合：-webkid-mask:url() no-repeat center center;
注意：目前至于 -webkid- 的内核支持该方法
四：倒影
语法 -webkit-box-reflect:right 0px;57 参数1：倒影的位置，above below left right\
参数2 倒影的距离 2px 倒影与真实图片之间的距离
倒影加渐变：-webkit-box-reflect:right 0px -webkit-linear-gradient(top,);
五 过渡 transition
过渡： 元素从一个状态转变为另一个状态的过程叫做过渡，是一个动画的转变过程，过渡是需要时间的，不是瞬间完成的
语法： transition: all 1s ease 0s;
参数1：参与过渡的元素属性是什么 all 表示所有可变化的属性都参与过渡
height 高度变化
width 宽度变化
opacity 透明度变化
参数2：状态转变动画的持续时间，单位 秒（s）
参数3： 过渡的缓冲描述 ease表示不均与运动 linear 匀速运动 贝赛尔 曲线 参考网站：https://cubic-bezier.com/#.11,1.01,1,.17 cubic-bezier(.11,1.09,.98,.15)
参数4: 过渡延迟时间，单位 s 多少秒后开始过渡
大部分属性都可以过渡，但是背景渐变不能过渡，浮动不能过渡
注意：jquery 中animate 动画不支持
background-color 和background-position 的动画，所以这些动画要使用过渡替代
过渡什么时候触发：
当参与过渡的属性发生变化是否可以触发，比如：类名变话导致属性值变化时，js设置属性值变化时：伪类
一，关键帧动画
animation 属性
两个关键词：调用动画 animation，定义关键帧(动画)
@keyframes
1,定义关键帧
兼容性前缀
@-webkit-keyframes 谷歌
@-moz-keyframes 火狐
@-o-keyframes IE
@-webkit-keyframes 欧明
@keyframes w3C
语法：
@-webkit-keyframes aniName{
from{ //开始
width:100px;
}to{ //结束
width200px;
}
}
@keyframes aniName{
0%{
width:100px;
}
10%{
width:130px;
}
20%{
width:180px;
}
80%{
width:250px;
}
100%{
width:300px;
}
}
2： 动画调用
animation:
兼容性前缀
-webkit-keyframes 谷歌
-moz-keyframes 火狐
-o-keyframes IE
-webkit-keyframes 欧明q
animation w3C
注：animation的各个参数如果分开写也需要 前缀
综合写法：
animation:aniName 1s linear 0s infinite alternate forwords paused;
组合写法：
参数1：animation-name:'aniName'; 动画调用的名称
参数2：animation-duration：1s; 动画持续时间
参数3：animation-timing-function:linear;
linear: 匀速轨迹
ease-in: 低速开始
ease-out 低速结束
ease: 低速，加速 减速
ease-in-out:低速进入，低速结束
cubic-bezi(a,b,c,d) 贝赛尔曲线 https://cubic-bezier.com/#.11,1.01,1,.17
动画运行轨迹
参数4：
animation-delay:1s; 运动延迟属性，0s不是延迟，如果动画循环执行多次，那么只有开始的时候会延迟，之后的循坏动画不会延迟
参数5：animation-iteration-count:10; 动画循环次数，整数， infinite 表示无限循环
参数6：animation-direction:normal;
动画播放方式
normal:正常的播放
reverse:反向播放
alternate:往返播放
alternate-reverse:反向的往返播放
initial 默认值，不写就是默认值；
inherit： 从父元素继承
参数7：animation-fill-mode:forwords; 动画执行结束的样式
none 动画结束不使用任何样式到达目的地，返回原来的样式
forwords:动画结束展示结束时状态
backwards:动画结束瞬间回到开始的样式
both:遵循forwords和backwards的规则，在两个方向上扩展动画属性
注：none和backwards 都会返回原来的样式
forwards 和both 都会停在结束时的样式
参数8:
animation-play-state:paused;
动画播放暂停状态
paused:暂停状态
running：动画正在播放状态（默认的）
js操作动画播放或暂停：
box.style,webkitAnimationPlayState = 'paused';
3.transition 与 animation的区别
transition：对元素的某个或多个属性变化进行过渡，形成一个类似的动画过程，
只有开始和结束，需要特殊方式触发，不能使用js进行开始暂停的控制，只能执行一次，无法循环
animation:对元素一个或多个属性执行动画，可以设置多个关键帧，不需要触发就可以直接执行，可以通过js进行精准的控制，
可以无限循环或循环多次
二，兼容性策略
1，平稳退化
对于老版本的游览器，不考虑效果，只要能展示内容即可，平稳退化就是追歼的放弃老版本游览器
2，渐进增强
对于低版本的游览器个给予普通的功能，增强高版本游览器的功能和效果，渐进增强就是加强新版本，追歼放弃老版本游览器
3，破碗子破摔
直接禁用老版本游览器
<!-- -->
<!--[if lte IE 8]>
<script>
// window.open('error.html','_self');
alert('游览器版本过低，请升级')
</script>
<script src='./js/html5shiv.js'></script>
<![end] -->
html5新标 header footer section aside main.......
ie678 虽然不支持，但是可以使用：html5shiv.js 这个文件可以让低版本游览器支持新标签
三 2D变形
css3中三大功能：
1）过渡 transition
2) 动画：animation
3)变形：transform ie9开始兼容
1，旋转
语法：
transform:rotate(30deg)
rotate : 旋转属性
deg 角度单位，一圈 360deg 一圈 π 弧度， 弧度 = 角度*π/180 1弧度 = π = 180deg
正方向：垂直向上为0度，顺时针方向为正方向（水平向左为90deg）
旋转角度：+(顺时针旋转) - （逆时针旋转）
transform:rotate(90deg);==>transform:rotate(-270deg);
注意：任何变形都可以被过渡
2, 缩放变形
语法：transform:scale(1.3);
scale:缩放，正数数字，大于1表示放大，小于1表示缩小
scale(1.2,0.5);r
参数1：横向放大1.2倍
参数2：纵向缩小0.5倍
transform:scaleX(1.2) scaleY(0.5)
3，扭曲变形
语法：transform:skew(30deg,60deg);
skew:我斜扭曲 两个值分别是横向扭曲角度和纵向扭曲角度
transform:skew(30deg) skewY(60deg);
总结：2D变形有三种，旋转缩放扭曲
transform:rorate(30deg) scale(2,0.4) skew(20deg,30deg);
四 3D变形
舞台与演员的关系
ie10开始兼容
3D变形与2D变形事实上多了一个舞台的概念 舞台的作用是负责添加景深(pers的距离pective),单位 px，表示你的眼睛距离这个舞台
也可以理解为3D变形元素的陡峭程度，演员就是其中的变形元素，使用transform进行变形
2，反转
rotateX(ndeg);
绕着X轴反转N度
n为整数，向后翻
n为负数，向前翻
3, rotateY(ndeg);
绕着Y轴反转N度
n为整数，向后右翻
n为负数，向前左翻
4， rotateZ(ndeg);
绕着Z轴反转N度
Z轴：位于x轴与y轴交叉点，方向垂直变形元素所在的平面，正方向是该平面正面对的方向
n为整数，顺时针
n为负数，逆时针
5、rotate3d(a,b,c,d)
a,b,c 0|1|-1
a:x轴，0:x轴不旋转 1:向后翻 -1:x轴向前翻
b:y轴，0:y轴不旋转 1:向后翻 -1:y轴向左翻
c:z轴，0:z轴不旋转 1:顺时针旋转 -1:逆时针
n:表示旋转的角度
rotate3d(1,0,-1,30deg);
6，背面可见设置
backface-visibility:hidden; 背面默认是可见的 ，使用这个属性决定了一个元素反转，180deg背面是否可见
7，旋转轴设置
语法：
transform-origin:10px 10%;
参数1：控制Y轴的位置，从左到右10px的位置反转
参数2：控制x轴的位置，从上到下10%的位置反转
百分比：变形元素宽高的百分之几
8,移动，位移
2d位移
transform:translate(50px,50px)
参数1：控制x轴方向移动；
参数2：控制y轴方向移动；
3d位移：
transform:translateX(50px);
transform:translateY(50px);
transform:translateZ(50px);
transform:translate3d(10px,20px,50px);