结构伪类选择器
E : first-child
E : last-child
E : nth-child(n)
先查看**nth-child(n)**，再看类型E。
- n可以是数字，也可以是关键字和公式。
- 数字：1,2,3…。
- 关键字：even（偶数），odd（奇数）——表格隔行渐变色。
- 公式：从0开始计算。
E : first-of-type
E : last-of-type
E : nth-of-type(n)
先查看类型E，再看nth-of-type(n)
伪元素选择器
应用三——清楚浮动
.clearfix::after{
content:"";
display:block;/*插入的元素必须是块级*/
height:0;/*不要看见这个元素*/
clear:both;/*清楚浮动*/
visibility:hidden;/*不要看见这个元素*/
}.clearfix::before,.clearfix::after{
content:"";
display:table;/*插入的元素必须是块级，且在一行*/
}
.clearfix::after{
clear:both;/*清楚浮动*/
}盒子模型
box-sizing : content-box;
盒子大小为 width+padding+border（默认）。
box-sizing :border-box;
盒子大小为 width。padding和border不会撑大盒子。
图像模糊
filter: blur(5px);
/*数值越大，模糊处理越厉害*/calc函数
width: calc(100% - 30px);过渡（transition）
过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画：是从一个状态渐渐的过渡到另外一个状态。
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持( ie9以下版本），但是不会影响页面布局。
我们现在经常和**:hover**一起搭配使用。
语法：
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
- 属性：想要变化的css属性，宽度、高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
- 花费时间：单位是秒(必须写单位）。比如0.5s
- 运动曲线：默认是ease (可以省略)
- 何时开始：单位是秒(必须写单位)。可以设置延迟触发时间，默认是0s（可以省略)
2D转换（transform）
移动（translate）
transform:translate(x,y);
transform:translateX(x);
transform:translateY(y);- 最大的优点：不会影响其他元素的位置。
- 百分比单位是相对自身元素进行移动。
- 对行内标签无效。
盒子水平垂直居中
使用定位+移动：
position:absolute;
top:50%
left:50%;
width:100px;
height:100px;
background-color:red;
transform:translate(-50%,-50%);旋转（rotate）
transform:rotate(45deg);默认转换中心是元素中心点。
transform-origin:x y;
/*默认是(50% 50%)，还可以设置像素、方位名词*/缩放（scale）
transform:scale(x,y);
/*x,y是倍数*/优点：
- 不会影响其他盒子。
- 可以设置中心点。
2D转换总结
- 转换 transform，我们简单理解就是变形有2D和3D之分。
- 我们暂且学了三个分别是位移、旋转和缩放。
- 2D**移动translate(x, y)**，最大的优势：是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的。
- 可以分开写，比如translateX(x)和translateY(y)。
- 2D**旋转rotate(度数)**可以实现旋转元素，度数的单位是deg。
- 2D**缩放sacle(x,y)**里面参数是数字不跟单位，可以是小数。最大的优势：不影响其他盒子、设置转换中心点（transform-origin : x y;）参数可以百分比、像素或者是方位名词。
- 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前。
动画（animation）
animation-timing-function（速度曲线）
