1. 现状
# 1. 现状
- 有兼容性问题。IE9+才支持
- 移动端支持优于PC段
- 不断改进中
- 应用相对广泛
# 2. 新增选择器
# 2.1 属性选择器
根据元素特定属性来选择元素，可以不用借助于类或id选择器
input[value] {
}
input[type=text] {
}
div[class^=icon] {
}
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att="val"] | 选择具有att属性且属性值等于val的E元素 |
| E[att^="val"] | 选择具有att属性且属性值以val开头的E元素 |
| E[att$="val"] | 选择具有att属性且属性值以val结尾的E元素 |
| E[att*="val"] | 选择具有att属性且属性值中含有val的E元素 |
- 类选择器，属性选择器，伪类选择器，权重为10
# 2.2 结构伪类选择器
根据文档结构来选择元素，常用于根据父级选择器里面的子元素
ul li:first-child {
}
section div:nth-child(n) {
/*权重：12*/
}
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
- n 可以是数字、关键字、公式
- 数字：选择第n个子元素，从1开始
- 关键字：even偶数，odd奇数
- 公式：2n,2n+1,5n,n+5(从第5个开始),-n+5(前5个)（从0开始，但是第0或者超出了元素的个数会被忽略）
- nth-child与nth-of-type的区别
- nth-child对父元素里面所有孩子排序（序号固定）先找第n个孩子，然后再看看是否和E匹配
- nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
# 2.3 伪元素选择器（重点）
可以帮助我们利用CSS创建新标签元素，则不需要HTML标签，从而简化HTML标签
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
div::before {
content: '我';
/*权重为2*/
}
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法：element::before{}
- before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
# 使用场景
# 2.3.1 伪元素字体图标
p::before {
position: absolute;
right: 20px;
top: 10px;
content: '\e91e';
font-size: 20px;
}
# 2.3.2 仿土豆效果
.tudou::before {
content:'';
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backgrounf: rgba(0,0,0,.4) url(images/arr.png) no-repeat center;
}
.tudou:hover::before {
display: block;
}
# 2.3.3 伪元素清除浮动
见浮动
# 3. 盒子模型
- CSS3中可以通过box-sizing来指定盒模型，有2个值：content-box、border-box
- 这样计算盒子大小的方式就发生了改变
box-sizing: content-box; /* 盒子大小为width+padding+border （默认） */
box-sizing: border-box; /* 盒子大小为width */
- 改成border-box后，padding和border就不会撑大盒子（前提padding和border不会超过width宽度）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
# 4. 其他特性
# 4.1 滤镜 filter
- filter属性将模糊和颜色偏移等图形效果应用于元素
filter: 函数();
filter: blur(5px); /*blur模糊处理，数值越大越模糊*/
# 4.2 calc函数
calc() 函数让你在声明CSS属性值时执行一些计算
width: calc(100%-80px);
# 4.3 过渡transition (重点)
- 过渡transition是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JS的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
- 过渡动画：从一个状态，渐渐的过渡到另一个状态
- 更好看，低版本浏览器不支持（IE9以下），但是不影响页面布局
- 和 :hover一起搭配使用
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
- 属性：想要变化的CSS属性，宽度高度 背景颜色 内外边距都可以，所有属性all，多个属性用逗号隔开
- 花费时间：单位秒 0.5s
- 运动曲线：默认ease（可以省略）
- 何时开始：单位秒 可以设置延迟出发时间 默认0s （可以省略）
- 过渡写在本身上，谁做过渡给谁加
transition: height .5s, width .5s;
transition: all .5s;
# 5. 2D转换
- 转换transform 是CSS3中具有颠覆性的特征之一，可以实现元素的位移translate、旋转rotate、缩放scale等效果
# 5.1 translate 位移
- 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);
移动盒子位置的三种方式：定位，盒子外边距、2D转换移动
- 定义2D转换中的移动，沿着X轴和Y轴移动元素
- translate最大优点：不会影响到其他元素位置
- translate中的百分比单位是相对于自身元素的高度和宽度（50% 自身一半）
- 对==行内标签==没有效果
# 5.2 rotate 旋转
transform: rotate(度数deg);
- rotate里面跟度数，单位是deg
- 角度为正，顺时针，负为逆时针
- 默认旋转的中心点是元素的中心点
# 5.3 2D转换中心点 transform-origin
transform-origin: x y;
- x 和y 用空格隔开
- 默认50% 50%
- x y 可以像素值，也可以方位词：top、bottom、left、right、center
# 5.4 缩放scale
transform: scale(x,y);
- x,y 用逗号隔开 表示缩放倍数 可以只写一个等于写了两个
- 优势：可以设置转换中心点缩放，默认是中心点；不影响其他盒子
# 5.5 2D转换综合性写法
- 同时使用多个转换
transform: translate() rotate() scale() ... ;
- 顺序会影响转换的效果（先旋转会改变坐标轴方向）
- 当我们同时有位移和其他属性时，位移放到最前面
# 5.6总结
# 6. 动画 animation
- 可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
- 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
# 6.1 动画的基本使用
- 先定义动画
- 用关键帧keyframes定义动画（类似定义类选择器）
@keyframes 动画名称 {
0% {
width:100px;
}
100% {
width:200px;
}
}
- 动画序列
- 0%是动画开始，100%是动画完成。这样的规则就是动画序列
- 在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的格式样式，任意多的次数
- 用百分比来规定变化发生的时间，或者用关键词from to 等同于 0% 100% （整数）（是总时间的划分）
- 元素使用(调用)动画
div {
animation-name: 动画名称; /*调用*/
animation-duration: 持续时间;
}
# 6.2 动画常用属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 简写属性 （不包含play-state） |
| animation-name | 动画名称 |
| animation-duration | 持续时间 |
| animation-timing-function | 速度曲线 默认ease |
| animation-delay | 何时开始 默认0 |
| animation-iteration-count | 播放次数 默认1 还有infinite无限 |
| animation-direction | 是否在下一周期逆向播放 默认normal 还有 alternate逆向播放 |
| animation-play-state | 是否运行或暂停 默认 running 还有 paused （配合:hover使用） |
| animation-fill-mode | 结束后状态 默认回到起始backwards 还有 保持forwards |
速度曲线
| 值 | 描述 |
|---|---|
| linear | 匀速 |
| ease | 先快后慢 |
| ease-in | 低速开始 |
| ease-out | 低速结束 |
| ease-in-out | 低速开始和结束 |
| steps() | 指定时间函数中的时间间隔数量（步长） |
# 6.3 动画简写
animation: name duration timing-function delay iteration-count direction fill-mode; /*前两个必填*/
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态;
animation: myfirst 5s linear 2s infinite alternate;
# 7. 3D转换
# 7.1 三维坐标轴
- x轴：水平向右，右正左负
- y轴：垂直向下，下正上负
- z轴：垂直屏幕，外正里负
# 7.2 3D位移 translate3d(x,y,z)
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px);
transform:translate3d(x,y,z);
# 7.3 透视 perspective
- 近大远小
- 透视写在被观察元素的父盒子上面
perspective: 500px; /*视距，人眼睛到屏幕的距离 值越小，物体越大*/
transform:translateZ(100px);/*z轴，物体距离屏幕的距离 z值越大，我们看到的物体就越大*/
# 7.4 3D旋转 rotate3d(x,y,z)
- 3D旋转可以让元素在三位平面内沿着x轴，y轴，z轴或者自定义轴进行旋转
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(x,y,z,deg);/*自定义轴,xyz矢量*/
- 左手准则
- 左手的大拇指指向x,y,z轴的正方向
- 其余手指弯曲的方向就是该元素沿着x,y,z轴旋转的方向
# 7.5 3D呈现 transfrom-style (重要)
- 控制子元素是否开启三位立体环境
transform-style: flat' /*子元素不开启3D立体空间，默认*/
transform-style: preserve-3d; /*子元素开启立体空间*/
- 代码写给父级，但是影响的是子盒子
# 8. 浏览器私有前缀
- 为了兼容老版本的写法，比较新的浏览器无需添加
# 8.1 私有前缀
- -moz- 火狐浏览器私有属性
- -ms- IE浏览器私有属性
- -webkit- safari、chrome私有属性
- -o- 欧朋私有属性
# 8.2 提倡的写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;