定位问题
position规定元素的定位类型
absolute： 绝对定位（相对于static 定位以外的第一个父元素定位）
fixed：绝对定位（相对于浏览器窗口定位）
relative：相对定位（相对于其正常位置定位）
static：默认值（无定位）
inherit 从父元素继承
rgba设置颜色
语法：rgba(R,G,B,A)
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间
rgba可用于设置背景色，字体颜色，边框颜色等,可设置颜色的地方。
rgba透明度与opacity的区别：
这里主要应用透明度的属性，虽然平时我们也可以使用opacity来设置透明度，
但是这两个是有很大差别的。opacity是给元素设置透明度，其子元素也同样会有透明度。
使用场景举例：
我们经常会遇到一种场景就是背景是半透明的，但是上面的文字不是透明的。
以前我们的实现方式大概是利用绝对定位，一层半透明，一层不是透明的叠加在一起。
现在直接可以利用rgba的透明度来实现是不是简单很多？
box-sizing
语法：box-sizing: content-box|border-box|inherit;
content-box：默认值。宽度和高度分别应用到元素的内容框，
在宽度和高度之外绘制元素的内边距和边框。
border-box ：为元素设定的宽度和高度决定了元素的边框盒。
就是说为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit： 规定应从父元素继承 box-sizing 属性的值。
使用场景举例：
当我们给div设置100%并且添加了固定大小的padding值，
这时就会超出父元素的宽度，如果其父元素是body就会出现横向的滚动
条。此时我们可以使用box-sizing:border-box来解决，
因为无论你的padding值为多少，元素的框盒就等于父类的宽度，
只是内容宽度和高度会变化。
scale
scale 属于 CSS3 2D 转换 的一种效果。
scale() 根据给定的宽度（X 轴）和高度（Y 轴）参数改变元素的尺寸，让其放大或缩小。
eg.
transform: scale(2,4); 意思是把元素的宽度变为原来的2倍 高度变为原来的4倍
transform: scale(2); 意思是把元素的宽度和高度都变为原来的2倍
Transition
CSS3 的过渡属性 transition：允许 CSS 的属性值在一定时间区间内平滑的过渡。
语法：
transition: transition-property transition-duration transition-timing-function transition-delay
transition: 执行过渡效果的属性 完成过渡效果的持续时间 过渡效果的速度曲线 过渡效果何时开始的延迟时间
transition: 属性 持续时间 动画方式 延迟
举例：
transition: width 5s ease-in-out 1s;
意思是：当元素的 width 值发生改变时，该变化会持续 5s 来慢慢完成。动画是慢开始再慢结束。且需延迟 1s 再开始动画。
说明：
过渡的点就在于：让动画看起来不那么突兀，平滑一些。动画的利器，简单实用。
当要声明多个属性的过渡时，用逗号 , 隔开，然后各自设置各自的持续时间、变化速率、延迟。
动画方式：
过渡的动画速度，现有的属性值：
linear 匀速
ease 慢速开始-变快-慢速结束
ease-in 以慢速开始，加速运动
ease-out 以慢速结束，减速运动
ease-in-out 慢速开始和慢速结束，先加速再减速
cubic-bezier 自定义cubic-bezier曲线，所有值在[0,1]区域内
不透明度 opacity
opacity：元素的不透明度，值 [0.0, 1.0] 即 [完全透明, 完全不透明]
ie8- 用替代属性 filter: alpha(opacity=50); 值是 [1, 100]