H5/C3进阶(13)上 -- CSS3的新特性

2.CSS3的新特性

2.1.CSS3的现状

● 新增的CSS3特性有兼容性问题 , ie9+才支持。

● 移动端支持优于 PC端。

● 不断改进中。

● 应用相对广泛。

2.2.CSS3新增选择器

CSS3给我们新增了选择器.可以更加便捷.更加自由的选择目标元素。

1.属性选择器

2.结构伪类选择器

3.伪元素选择器

注意:类选择器、属性选择器、伪类选择器,权重为10。

2.2.1.属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

2.2.2.结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素。常用于根据父级选择器里面的子元素。

结构伪类选择器一般用于选择父级 里面的第几个盒子。

注意：好消息！！！！！！！！！！！

nth-child (n)选择某个父元素的一个或多个特定的子元素

● n可以是数字,关键字和公式

● n如果是数字。就是选择第n个子元素。里面数字从1开始…

● n 可以是关键字: even偶数. odd奇数

● n可以是公式:常见的公式如下。 (如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)

从此

● n可以是公式:常见的公式如下。(如果n是公式,则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)

前三个和后三个的区别：

nth-child 会把所有的盒子都排列序号，执行时首先看 **nth-child（1）**之后，回去看 前面的 E ，看与之是否匹配。

nth-of-type 会把指定的盒子排列序号，执行时首先看 E ，然后再看第几个盒子。

2.2.3.伪元素选择器（重点）

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

当鼠标经过时，里面的伪元素…

注意：

● before和after创建一 个元素,但是属于行内元素 。

● 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素 。

● 语法: element::before {} 。

● before和after必须有 content属性 。

● before 在父元素内容的前面创建元素, after在父元素内容的后面插入元素。

● 伪元素选择器和标签选择器一样，权重为1。

补充： 伪元素清除浮动

1.额外标签法也称为隔墙法,是W3C推荐的做法。

2.父级添加overflow属性。

3.父级添加after伪元素。

4.父级添加双伪元素。

2.3.CSS盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值:即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况:

1.box-sizing: content-box盒子大小为width + padding+ border ( 以前默认的)。

2. box-sizing: border-box盒子大小为width。

如果盒子模型我们改为了box-sizing: border-box，那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)

2.4.CSS3其他特性（了解）

● 图片变模糊。

● 计算盒子宽度 width：calc 函数。

2.4.1.图片变模糊

CSS3滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

语法：

2.4.2.计算盒子宽度 width：calc 函数

calc()此CSS函数让你在声明CSS属性值时执行一些计算。

括号里面可以使用 + - * / 来进行计算。

2.5.CSS3过渡（重点）

过渡( transition)是CSS3中具有颠覆性的特征之一, 我们可以在不使用Flash 动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画:是从一个状态渐渐的过渡到另外一个状态。

可以让我们页面更好看,更动感十足，虽然低版本浏览器不支持( ie9l以下版本)但是不会影响页面布局。

现在经常和:hover一起搭配使用。

过渡的使用口诀:谁做过渡给谁加

语法：

（添加两个变化）

如果想要多个属性变化，属性写all

1.属性: 想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。

2.花费时间: 单位是秒(必须写单位)比如0.5s

3.运动曲线: 默认是ease (可以省略)

4.何时开始: 单位是秒(必须写单位)可以设置延迟触发时间默认是Os ( 可以省略)