目录
一、CSS3的现状
- 新增大的CSS特性有兼容性问题,ie9+ 才支持
- 移动端支持优于 PC 端,不断改进中,应用相对广泛
- 现阶段主要学习:新增选择器和盒子模型以及其他特性
二、新增的属性选择器
三、新增的结构伪类选择器
nth-child(n) :会把所有盒子都排列序号,执行时首先看第几个,之后看类型,作用是选择某个父元素的一个或多个特定的子元素
- n 可以是数字:就是选择第n 个子元素,里面数字从1开始
- n 可以是关键字:even 偶数。odd 奇数
- n 可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
- 2n --偶数
- 2n+1 --奇数
- 5n --5的倍数
- n+5 --从第五个开始(包括第五个)到最后
- -n+5 --前五个(包括第五个)
nth-of-type(n) :会先把指定盒子排列序号,执行的时候首先看指定的类型,之后看第几个
四、新增的伪元素选择器
五、新增的CSS3盒子模型
六、新增的CSS3属性过渡
如果想要写多个属性,则用逗号隔开,如果想要全部属性都变化,属性写 all 即可
七、新增的CSS其他特性--了解
CSS滤镜 filter:filter 属性将模糊或颜色偏移等图形效果应用于元素
语法:filter: 函数();
例如:filter: blur(5px); ---blur模糊处理 数值越大越模糊
CSS 函数 calc:calc 函数让我们在声明CSS属性值时执行一些计算
语法:width: calc(100% - 80px); (括号里面可以使用 + - * / 来进行计算)
---100%表示和父盒子一样大小
---100%-80px 表示永远比父盒子少80px
八、CSS3 2D转换
2D 移动 translate :2D 移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位
语法:
- transform: translate(x,y); (x,y轴都移动)
- transform: translateX(n); (只移动x轴)
- transform: translateY(n); (只移动y轴)
重点:
- 定义2D 转换中的移动,沿着X和Y轴移动元素
- translate 最大的优点:不会影响到其他元素的位置
- translate 中的百分比单位是相对于自身高宽元素的 translate: (50%,50%);
- 对行内标签没有效果
2D 旋转 rotate :2D 旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
语法:transform: rotate(度数);
重点:
- rotate 里面跟度数,单位是deg,例:rotate(45deg);
- 角度为正时顺时针,负时为逆时针
- 默认旋转的中心点是元素的中心点
- 2D 转换中心点,语法:transform-origin: x y;
- 注意后面的参数x和y用空格隔开
- x y 默认转换的中心点是元素的中心点(50% 50%)
- 还可以给x y设置像素px 或者方位名词(top bottom left right center)
2D 转换 scale :缩放,即可以放大和缩小,只要给元素添加上了这个属性就能控制它放大还是缩小
语法:transform: scale(x,y);
注意:
- 注意其中的x和y用逗号分隔,里面的数字不跟单位
- transform: scale(1,1); ---宽和高都放大了一倍,相当于没有放大
- transform: scale(2,2); ---宽和高都放大了两倍
- transform: scale(2); ---只写了一个参数,第二个参数则第一个参数一样,相当于 scale(2,2)
- transform: scale(0.5,0.5); ---数字小于1就是缩小
- scale 缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
2D 转换综合写法:
- 同时使用多个转换,其格式为:transform: translate() rotate() scale()...等
- 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性时,记得要将位移放到最前