1、Css3 --tranform属性 (位移，缩放 ，旋转)
一、2D效果下
1. 位移 translate(x,y) | translateX(x) | translateY(y)
2. 缩放 scale(x,y) | scaleX(x) | scaleY(y)
3. 旋转 rotate(angle) 例：rotate(45deg)=> 旋转45度
2、Css3 --transition属性
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property ---规定设置过渡效果的 CSS 属性的名称。
transition-duration ---规定完成过渡效果需要多少秒或毫秒。
transition-timing-function ---规定速度效果的速度曲线。
transition-delay ---定义过渡效果何时开始。
1、transition-property
指定需要执行动画的属性的名字,当元素对应的属性值发生变化时将会触发动画效果.
其主要有以下几个值：
none(没有属性改变)； 当其值为none时，transition马上停止执行
all（所有属性改变）这个也是其默认值；当指定为all时，则元素产生任何属性值变化时都将执行transition效果
indent（元素属性名）；ident是可以指定元素的某一个属性值(width,height,background...)
2、transition-duration
是用来指定元素转换过程的持续时间，其默认值是0，也就是变换时是即时的。
取值：<time>为数值，单位为s（秒）,可以作用于所有元素，包括:before和:after伪元素。
3、transition-timing-function
transition-timing-function 的值允许你根据时间的推进 去改变属性值的变换速率，
transition-timing-function有6个可能值，如下所示：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)；
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
4、transition-delay(动画延迟执行的时间)
默认大小是0，也就是变换立即执行，没有延迟。
是用来指定一个动画延迟执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，
取值：<time>为数值，单位为s（秒），它的使用和transition-duration极其相似，也可以作用于所有元素
Css两种盒子模型类型
1：设置box-sizing
默认box-sizing: concent-box :元素设置的width = 内容(conent)的宽度,会撑大盒子 ---W3C标准盒模型
设置box-sizing :border-box:元素设置的width = 内容(conent)的宽度+padding+border ---IE怪异盒模型
css清除浮动
描述：清除浮动是使用了浮动之后必不可少的，为了网站布局的效果，清除浮动也变得非常麻烦。
属性：clear ： 值（left, right , both）;
清除浮动常见的几种方式：
1.结尾处加空div标签，使用clear:both
2.浮动元素的父级div定义 overflow:hidden
3.浮动元素的父元素定宽高属性
定位
1.position : relative 相对定位 ---被定位的元素会占据原有的物理位置，即不会脱离文档流
相对定位是 以当前的自己为参照物移动指定的距离。
2、position : absolute 绝对定位 ---元素不会占据原有的物理位置，即会脱离文档流
绝对定位是以其他元素作为参照物移动指定距离的定位方式
关于绝对定位的参考点：
1.如果元素的外层元素是非 static(有除默认值之外的定位设置)，那么这个外层元素就成为该元素的定位参考点
2.如果外层元素没有设置任何的position的值，那么该元素就会寻找距离自己最近的其他设置过position值的外层元素作为参照物（必须为嵌套元素）
3.如果该元素的任何外层元素都没有设置任何的position的值，那么此时定位参考元素是body或者页面
3、position : fixed 固定定位
4、z-index :堆叠顺序 注意：z-index属性只支持定位元素
```
css选择器的优先级
1、css 属性 !important
2、内联样式
3、ID 选择器(
4、类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等]
5、元素选择器(p等) = 伪元素选择器(:after/:before/::selection等)
6、通用选择器(*)
7、继承的样式
重绘和回流
1、回流（reflow）：当render tree中的元素的宽高、布局、显示、隐藏或元素内部文字结结构发生改变时，会影响自身及其父元素、甚至追溯到更多的祖先元素发生改变，
则会导致元素内部、 周围甚至整个页面的重新渲染，页面发生重构，回流就产生了。
2、重绘（repaint）：元素的结构（宽高、布局、显示隐藏、内部文字大小）未发生改变，只是元素的外观样式发生改变，
比如背景颜色、内部文字颜色、边框颜色等。此时会引起浏览器重绘，显然重绘的速度快于回流。
3、***注意*** ---回流必将引起重绘，而重绘不一定会引起回流。
例如：只有颜色改变的时候就只会发生重绘而不会引起回流。
