css 之 filter
一个样式在firefox上正常的，但是在IE上不正常，经过查找发现是当时的开发人员只实现了firefox的逐渐变色效果，却没有去实现IE的效果，后来查找了一些资料使用IE的滤镜来完善相应的页面，并找到了rgba和16进制颜色转变的方法 详情点击下方链接
http://xiaobashagua.iteye.com/blog/1915513
属性选择器
1、E[attr] 表示存在attr属性即可；
2、E[attr=val] 表示属性值完全等于val
3、E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的
4、E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以“-”分隔的
5、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置
6、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置
7、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置
伪类选择器
重点理解E是用来参考确定其父元素的，
nth-child(n) 对应根据E元素确定的父元素的所有子元素，
nth-of-type(n) 的不同之处在于其对应的是只有E元素，会忽略其子元素。（此处要配合案例加强理解）
E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素
E:nth-of-type(n) 第n个子元素，计算方法只是E元素，会忽略其子元素的
存在
E:nth-last-child(n) 同E:nth-child(n) 计算顺序相反。
E:nth-last-of-type(n) 同E:nth-of-type(n) 计算顺序相反。
- 关于n的取值范围：
1、当n做为一个独立值时，n取值为n>=1，例如nth-child(n)
2、当n做一个系数时，n取值为n>=0者n<0，例如nth-child(2n+1)、nth-child(-1n+5) 此处需要理解2n+1或者-n+5做为一个整体不能小于1；
E:only-child 表示当前以E确定的父元素，除E之外并无其它子元素（独生子）；
E:only-of-type表示当前以E确定的父元素， 除E之外不能包含其它和E同类型的子元素；
E:target 结合锚点进行使用，处于当前锚点的元素会被选中；
E:empty 选中没有任何子节点的E元素；
伪元素选择器
E::selection 可改变选中文本的样式
E::placeholder 可改变placeholder默认样式，这个存在明显的兼容问题，比如::-webkit-input-placeholder，具体参考手册进行对比。
E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待。
":" 与 "::" 区别在于区分伪类和伪元素
颜色
新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，不具有继承性，即不会影响子元素的透明度。
Red、Green、Blue、Alpha即RGBA
Hue、Saturation、Lightness、Alpha即HSLA
R、G、B 取值范围0~255
H 取值范围0~360，0/360表示黑色、120表示绿色、240表示蓝色
S 取值范围0%~100%
L 取值范围0%~100%
A 取值范围0~1
关于透明度：
1、opacity子元素会继承父元素的透明度，在实际开发中会带来干扰；
2 、transparent 设置透明度时完全类似于“玻璃”一样的透明；
文字
阴影
文字阴影 text-shadow: 2px 2px 8px #000;
x偏移量，y偏移量，模糊度，颜色文本溢出
单行文本溢出，需要配合overflow:hidden; white-space: nowrap;
多行文本文字溢出处理，非标准属性，可应用于移动端
边框圆角
圆：border-radius: 90px 90px 90px 90px
border-radius: 50%
椭圆：border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px;
border-radius: 45px / 90px;
前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）
当圆角半径小于或等于边框宽度时，元素内角是直角
边框阴影
外阴影：box-shadow: 20px 20px 0 -10px #000;
x偏移量 y偏移量 模糊度 移量 颜色（偏移量可为负数，表示方向，模糊度不能为负）
内阴影：box-shadow: inset 20px 20px 20px -10px #000,
边框图片
border-image-slice: 27
三种平铺方式
border-image-repeat: round;
round 会自动调整尺寸，完整显示边框图片
border-image-repeat: stretch
border-image-repeat: repeat
repeat 单纯平铺多余部分，会被“裁切”而不显示
盒模型
IE模型下 width = padding + content + border;
W3C盒模型下 width = content
box-sizing: border-box width = border + padding + content
box-sizing: content-box width = content
IE盒模型只会出现在IE5版本和IE6+的怪异模式中。
怪异模式
http://www.cnblogs.com/coco1s/p/4034937.html
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box;
背景
可以修改我的背景区域
background-clip: padding-box;
background-clip: border-box;默认背景填充区域*/
background-clip: content-box;
background-size: cover;
cover 会使“最大”边，进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。
background-size: contain;
contain 会使“最小”边，进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片。
background-size 与 background-clip无关
background-size 与 background-origin 保持一致
渐变
background-image: linear-gradient(yellow, green);
伸缩布局
指定一个盒子为伸缩盒子 display: flex
设置属性来调整此盒的子元素的布局方式
- flex-direction：row、column、row-reverse、column-reverse
明确主轴对齐方向
justify-content：flex-start、flex-end、center、space-around、space-between调整侧轴方向对齐方式
align-items：flex-start、flex-end、center、baseline、stretch控制是否换行
flex-wrap：wrap（换行）、nowrap（默认不换行）堆栈排列，可对应用flex-wrap: wrap后产生的换行进行控制，
align-content：flex-start、flex-end、center、space-between、space-around、stretchflex-flow： flex-direction和flex-wrap的简写形式
例如 flex-flow: column wrapflex 控制子元素伸缩比例（分配的是父盒子剩余的空间）
order 控制子元素的顺序
align-self
过渡
transition-property设置过渡属性
transition-duration设置过渡时间
transition-timing-function设置过渡速度
transition-delay设置过渡延时
