孔子曰：学而不思则罔，思而不学则殆。
废话不多说，直接上。
浅谈兼容
css相较于js html来说，兼容性问题最不是事，CSS在最初设计时，就有一个协议：如果不能识别选择器属性，那么就默认不处理，不报错。这个也是CSS得以发展的非常重要的特征。
下面是各个浏览器私有前缀：
IE -ms-
Chrome -webkit-
Firefox -moz-
Safari -webkit-
Opera -o-
CSS3中的两种兼容性策略：
渐进增强：先写浏览器都支持的属性，以保证低版本的浏览器的基本功能，然后再添加新浏览器中新增的属性。（向上兼容）
优雅降级：首先针对高版本浏览器写CSS，然后向低版本浏览器做兼容。（向下兼容）
CSS3选择器
选择器，也叫选择符，就是用来选择DOM元素的符号。
CSS2.1选择器
复习一下之前学习的七种选择器：
|
选择器 |
说明 |
|
* |
通配符选择器 |
|
p |
标签选择器 |
|
.box |
类选择器 |
|
#box |
ID选择器 |
|
div span |
后代选择器 |
|
div, p |
分组选择器 |
|
div.box |
交集选择器 |
|
:hover |
鼠标悬停时 |
CSS3属性选择器
按照元素的属性进行选择。img标签里面alt属性， input里面的type属性......
|
选择器 |
说明 |
|
input[title] |
选择具有title的input元素 |
|
input[title=”bz”] |
选择具有title属性，具属性值为”bz” |
|
input[title *= “bz”] |
选择具有title属性，且属性值中包含有”bz” |
|
input[title ^= “bz”] |
选择具有title属性，且属性值中以”bz”开头 |
|
input[title $= “bz”] |
选择具有title属性，且属性值中以”bz”结束 |
|
input[title ~= “bz”] |
选择具有title属性，且属性值中”bz”是以空格分隔的独立部分 |
|
input[title |= “bz”] |
选择具有title属性，且属性值中以”bz-”开头 |
注意点：属性选择器，是从IE7才开始支持的。
CSS3 关系选择器
|
选择器 |
说明 |
|
section div |
选择section后面所有的div，是所有后代 |
|
section>div |
选择seciton后面儿子，不是所有后代 |
|
div+span |
选择div后面紧挨着的第一个span |
|
div~span |
选择div后面所有的span |
CSS3 伪类选择器
|
选择器 |
说明 |
|
:root |
根元素选择器 |
|
:nth-child(n) |
选中第n个孩子 |
|
:first-child |
选中第一个孩纸 |
|
:last-child |
选中最后一个孩纸 |
|
:nth-last-child(n) |
选中倒数第n个孩子 |
|
:only-child |
独生子女 |
|
:nth-child(2n) :nth-child(even) |
选中排行偶数的孩纸 |
|
:nth-child(2n+1) :nth-child(odd) |
选中排行奇数的孩纸 |
|
:nth-child(-n+5) |
选中排行前5的孩纸 |
|
:nth-of-type(n) |
选择其父母下的排行第n的同类孩子 |
|
:first-of-type |
选择同类中的第一个孩子 |
|
:last-of-type |
选择同类中的最后一个孩子 |
|
:nth-of-type(2n) :nth-of-type(even) |
选择同类中排行偶数的孩子 |
|
:nth-of-type(2n+1) :nth-of-type(odd) |
选择同类中排行奇数的孩子 |
|
:nth-of-type(-n+2) |
选择同类中排行同两个的孩子 |
|
:only-of-type |
选择同类中唯一一个的孩子 |
|
:nth-last-of-type(n) |
选择同类中倒数第n个孩子 |
|
:hover |
任意元素都可以使用，鼠标在元素上盘旋时 |
|
:active |
任意元素都可以使用，元素处于激活时 |
|
:focus |
当表单处于焦点时 |
|
:checked |
当表单元素处于选中状态时 |
|
:disabled |
当表单元素处处于不可用时 |
|
:enabled |
当表单元素处于可用时 |
|
:lang() |
表单元素处于某种语言时 |
|
:empty |
选择空元素 |
|
:not(selector) |
取非 |
|
:target |
当锚点处于当前状态时 |
:nth-child 和 :nth-of-type 的区别：
参考张鑫旭：www.zhangxinxu.com/wordpress/2…
CSS3 伪元素选择器
|
选择器 |
说明 |
|
:before |
在当前元素的内部最前面插入一个伪元素 |
|
:after |
在当前元素的内部最后面插入一个伪元素 |
|
:first-letter |
选中元素的第一个字符 |
|
:first-line |
选中元素的第一行 |
|
::selection |
选中的元素 |
注意：:before里面有一个content属性，这个属性必须要写，如果没有内容，就写空串。
::selection选择器注意点:必须保证容器没有被接受一个属性，叫user-select: none;如果接受了这个属性，那么该元素的文字不可选，样式永远不可能生效。
CSS3新属性
颜色表示法
在CSS3中，又新增了几种颜色表示法：
|
颜色表示法 |
说明 |
|
RGBA |
A是透明度（0~1） |
|
HSL |
说明如下 |
|
HSLA |
说明如下 |
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S： Saturation(饱和度)。取值为：0.0% - 100.0%
L： Lightness(亮度)。取值为：0.0% - 100.0%
圆角属性
|
属性 |
说明 |
|
border-radius |
|
|
border-top-left-radius |
左上角 |
|
border-top-right-radius |
右上角 |
|
border-bottom-left-radius |
左下角 |
|
border-bottom-right-radius |
右下角 |
阴影属性
格式：box-shadow: 右 下 羽化值 延展 颜色 inset
注意细节
1，前两个参数为0时，可以去模拟发光效果。
2，如果需要设置内阴影，那么需要给box-shadow添加上inset值就可以。
3，可以给盒子设置多个阴影，只需要在多个阴影之间以逗号分隔就可以。
4，从IE9开始支持盒子阴影。
格式：text-shadow: 右 下 羽化值 颜色
注意细节：
1，文字阴影没有延展，没有inset， 其它和盒子阴影一样
2，它是从IE10开始支持
背景起点
背景起点就是研究背景是相对于谁进行定位的。默认的，它是相对于盒子的padding进行定位的。
background-origin:padding-box | border-box | content-box
background-origin的默认值是padding-box
背景裁切
background-clip: border-box | padding-box | content-box
|
背景裁切属性 |
说明 |
|
border-box |
表示背景图片是按照边框盒进行裁切 |
|
padding-box |
表示背景图片是按照内边距框进行裁切 |
|
content-box |
表示背景图片是按照内容框进行裁切 |
背景大小
|
背景图大小取值 |
说明 |
|
background-size:auto auto |
默认情况 |
|
background-size:100px 100px |
背景图片被设置成100px * 100px |
|
background-size:100% 100% |
背景图的宽高与盒子等宽高 |
|
background-size:100% auto |
宽度与盒子等宽，高度自动等比缩放 |
|
background-size: auto 100% |
高度与盒子等高，宽度自动等比缩放 |
|
background-size: cover |
缩放背景图到刚好覆盖盒子为止 |
|
background-size: contain |
在保证背景图完整显示的情况下，尽可能的缩放背景图到等高或等宽 |
背景渐变
背景渐变是指背景图，而不是指背景色，用到的属性是background-image, 不是background-color。
liear-gradient(开始的位置，颜色值1， 颜色值2.....)
有两种坐标系（W3C和WHATWG）
w3c：
background-image: linear-gradient(90deg,red,black)whatwg：
background-image: -webkit-linear-gradient(0deg,red,black)
效果才是一样的。
背景图与插入图片区别
1，插入的图片可以拖拽，背景图片不能拖拽
2，插入图片占位，背景图片不占位
3，插入图片语义较高，可以被搜索引擎收录到，背景图片语义低，不能被搜索引擎收录到
4，背景图片非常容易控制，相关的属性比较多......
5，插入的图片有一个bug， 图片下方默认会出一个白边， 这个白边是一个bug， 大约有10px
过渡动画
transition: 要发生变化的属性名 动画时长 缓冲曲线 等待时间
transition-property: 要发生变化的属性名
transition-duration: 动画时长
transition-timing-funciton: 缓冲曲线
transition-delay：等待时间
变型
2D 转换
translate()方法：
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。
值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
rotate（）方法
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
值 rotate(30deg) 把元素顺时针旋转 30 度。
scale() 方法
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
skew() 方法
transform:skew(y轴向x轴靠拢的度数，x轴向y轴靠拢的度数)
3D 转换
rotateX() 方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
注意：如果度数为正值，那么是后仰，如果是负值，是前顷。
rotateY() 旋转
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
注意：如果度数为正值，那么是往X轴正方向旋转，如果是负值，是往X轴负方向旋转。
这些属性，大家知道就行，用到时，再翻看。会不定期添加哦！
