day25- CSS3的新特性

本来加在上一章的后面，但是被卡掉了，就不再次打字编写了。

现阶段主要学习：新增选择器和盒子模型以及其它特性

一：CSS3 新增选择器

 

可以更加便捷，更加自由的选择目标元素

1. 属性选择器

 

注意：类选择器、属性选择器、伪类选择器，权重为 10。

 

2. 结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，

常用于根据父级选择器里面的子元素

 

:nth-child(n)

     n 可以是数字，关键字和公式

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

     n 可以是关键字：even 偶数，odd 奇数

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

 

nth-child与nth-of-type（n）的区别

如：section div:nth-child(1) ｛｝

nth-child会把所有的孩子都排列序号，执行时首先看:nth-child(1) 之后再回去看前面的div，如果没有div的话就没有选中的孩子，就不执行了。

section div:nth-of-type（1）｛｝

而nth-of-type会把指定元素的盒子排列序号，执行时先找到div（指定的元素），然后再看:nth-of-type(1)的第几个孩子。

 

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

可以利用css创建新的标签，而不需要HTML标签，从而简化HTML的结构。（双冒号！）

::after 在父元素里面的后面插入内容

::before 在父元素里面的前面插入内容

注：都是创建一个元素，但是属于行内元素

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

语法：element::before｛｝

before 和after 必须有content属性

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

鼠标经过伪元素语法：

.tudou:hover::before ｛｝

(中间不能有空格)

特：伪元素清除浮动（已理解代码）

二：CSS3盒子模型

通过box-sizing来指定盒子模型，有两个值，即可指定为content-box，border-box

可以分成两种情况

1. box-sizing：content-box盒子大小为width+padding+border(以前默认的）
2. box-sizing：border-box  盒子大小为width

以后在style中先写

*｛

margin：0；

padding：0；

box-sizing：border-box；

｝

三：css3其他特性（了解）

1，图片变模糊

css3滤镜filter：

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

filter：函数（）；

例如：filter:blur(5px);   blur模糊处理，数值越大越模糊。

2，CSS3 calc函数

calc（）此函数让你在声明css属性值时执行一些计算。

width：calc（100%-80px）；

括号里可以使用➕➖ * / 来计算。

四：css新特性（重点）

  1。css3过渡（重点）

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

过渡动画：从一个状态渐渐的过渡到另外一个状态

可以让页面更好看，更动感十足，低版本浏览器（IE9以下版本）不支持，但不会影响页面布局

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

语法：

transition：要过渡的属性 花费时间 运动曲线 何时开始；

1.  属性：想要变化的css属性，宽度高度背景颜色内外边距都可以，还可以all
2. 花费时间：单位为秒s（必须写单位）
3. 运动曲线：默认ease（可以省略）
4. 何时开始：单位为s（必写单位）可以设置延迟触发时间 默认为0s（可以省略）

使用口诀：谁做过渡给谁加

如果想写多个属性，利用，分割

如：transition：width .5s, height .5s;

也可以直接写all，都变化

  2，过渡练习（进度条的制作）

五：广义的H5 

狭义：HTML5结构标签本身，css3相关样式

广义的HTML5指HTML5本身+CSS3+JavaScript