CSS知识点（4）

1.CSS3新增的结构伪类选择器nth-child和nth-of-type的区别：

        nth-child会把所有的孩子都排上序号，先看nth-child，再看前面的标签，而nth-of-type只是将所指定的孩子排上序号，先看前面的标签，再看nth-of-type。

2.CSS3盒子模型：

        为了防止盒子的padding和border撑大了盒子，影响盒子的宽度，所以添加了样式box-sizing:border-box;    默认情况下，box-sizing的值为content-box。

3.图片模糊处理：

        添加样式filter:blur(10px);

4.CSS3宽度calc函数：

        如：width:calc(100% - 98px); 

        注：减号两边一定要有空格

5.CSS3过渡效果：

1）transition: 变化的属性 花费的时间  运动曲线 何时开始

      如：transition: width 1s ease 1s;

2）如果有多个属性变化 ，则中间用逗号分开

3）如果所有属性都变化 ，则transition:all .5s;

谁过渡就加谁身上

6.1）2D转换之位移 transform:translate(X,Y);  其中X表示x轴移动的位置，Y表示y轴上移动的位置

        translate对行内元素无效

2）2D转换之旋转 transform:rotate(360deg);

        在默认情况下，dom元素都是以中心进行旋转的，但也可以通过transform-origin自定义旋转的位置

3）2D转换之修改规模 transform:scale(2,1); 代表宽度扩大2倍，高不变，以元素的中心点进行修改盒子的规模，里面的数字不加单位，表示倍数。