css的常用知识

一，css2.1选择器

二、css3 选择器
1、css2.1 选择器
标签 div{} 类 .class{} id #id{} 通配符 *{}
后代 div p span 交集 div.class#id 并集 div,p,span,#id{}
2、关系选择器 儿子 div>p ie7
开始兼容 下一个兄弟 div+p ie7开始兼容
后边所有兄弟 div~ jquery 都可以使用这些选择器，ie6也可以兼容
3、属性选择器 在css3中，标签可以通过任何属性被选择
1、E[attr='val'] css3 选择属性attr的值为val的E元素
2、E[attr^='val'] css3 选择具有attr属性并且值是以val开头的E元素
3、E[attr$='val] css3 选择具有attr属性并且值是以val结束的E元素
4、E[attr*='val] css3 选择具有attr属性并且值中包含val的元素
5、E[attr|='val] css3 选择具有attr属性，
并且属性值是以 - 分割，并且 - 前边的内容是 val 的E元素
6、E[attr~='val] css3 选择具有attr属性，并且属性值是以空格分隔，并且空格后边是val的E元素

4、序选择器 儿子的序选择器 类似于伪类选择器
1、p:first-child{} 选择一个p表签，这个p标签是其父元素的第一个儿子 ie7开始兼容
2、p:last-child{} 选择一个p表签，这个p标签是其父元素的最后一个儿子 ie7开始兼容
3、p:nth-child(n){} 选择一个p标签，这个p是其父元素的第n个儿子，
n是从1开始，ie9开始兼容 p:nth-child(2n) 2,4,6,8...
p:nth-child(3n+8) 8,11,14,17....
注意：表达式中，n从0开始 但是2n最小只能取1，所以0是取不到的
，3n+8中，n是从0开始，最小8 4、p:nth-last-child(n){} 选择一个p标签，
这个p是其父元素倒着数的第n个儿子，ie9开始兼容
p:nth-last-child(2n){} :倒着数所有偶数个p被选中
5、p:nth-of-type(n){} 选择一个p标签，这个p标签是其父元素中所有p儿子中的第n个，ie9开始兼容
同类别中的第几个，只数p标签，其他标签不管 jquery 都是可以使用的 $('p').eq(3) 找的是下标为3的元素 $('p:nth-child(3)') 找的是第三个儿子元素
5、伪类选择器 a标签的伪类选择器
:link :visited :hover :active 1、hover 可以给任何元素使用 ie7开始兼容
2、:focus 获取焦点，当一个表单元素获取焦点，触发这个样式
3、:not p:not(.pp) 选择p标签，不带类名为pp的p标签
4、:only-child 唯一的儿子 p:only-child{} 如果一个p标签是其父元素唯一的儿子，就会被选中
5、:empty 空标签 当一个标签首尾相连，其中没有任何内容，包括空格换行tab等。即为空标签
6、:checked 表单元素中单选框或复选框被选中时会触发这个样式
7、:disabled :enabled ie9开始兼容 无效的表单元素和有效的表单元素

6、伪元素 ::表示伪元素 伪元素必须书写的属性是 content
1、::before :after 这两个都是行内伪元素，需要转为快级元素或者脱标才能设置宽高
2、::selection 被选中的文本样式 ie9开始兼容
3、::first-letter ::first-line 第一个文字，和第一行文字
7、圆角 border-radius 单位px % em ie9开始兼容
border-bottom-radius border-bottom-left-radius

 

 

一，背景 background
1，回顾
background-color
position
image
repeat
size
attachment:fixed

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);