css应知应会 第七集

1、CSS Hack

1、作用

CSS Hack 主要针对 IE浏览器的兼容性处理

实现方式：

相同属相，在不同浏览器中要设置不同的值

2、IE浏览器的运行模式

1、混杂模式

无标准可言

不需要写 <!doctype>

2、准标准模式

支持标准代码，同时向前兼容非标准代码

3、标准模式

只支持标准代码，不支持非标准

3、CSSHack的实现方式

原理：使用优先级来实现兼容性

方式：

1、CSS 类内部Hack

通过在CSS属性名称前加前缀，或在CSS属性值后加后缀，去实现浏览器的判断

2、选择器Hack

在选择器名称前，增加不同浏览器能够识别的前缀

* ：IE6

*+：IE7

... ...

3、HTML头部引用Hack

使用 IE 中的条件注释来判断浏览器的类型，从而实现不同的代码

语法：

<!--[if 条件 IE 版本号]>

满足条件要执行的代码

不满足条件的话则当注释处理

<![endif]-->

版本号：6-10

条件：

1、gt -- (greater than)

判断当前浏览器的版本是否大于指定版本

<!--[if gt IE 6]>

该段内容只能在IE6以上的浏览器中执行

<![endif]-->

2、gte -- (greater than and equals)

判断当前浏览器的版本是否大于等于指定版本

3、lt

判断当前浏览器的版本是否小于指定版本

4、lte

判断当前浏览器的版本是否小于等于指定版本

5、!

判断当前浏览器是否为非指定版本的

6、省略条件

判断是否为IE的指定版本浏览器

或

判断是否为IE浏览器(省略版本号)

2、转换

1、什么是转换

改变元素在页面中的 位置，尺寸，形状以及角度的一种方式

在CSS中支持以下两种转换效果

1、2D转换 ：仅在 x轴 和 y轴上发生转换效果

2、3D转换 ：在2D基础上增加z轴转换效果

2、属性

1、转换属性

属性：transform

取值：

1、none

默认值

2、一组转换函数

不同的效果会有不同的转换函数

如果指定多个转换函数的话，中间用 空格 分开

2、转换原点

属性：transform-origin

取值：

两个值：原点在x轴 和 y轴上的位置

三个值：原点在x，y，z轴上的位置

可取值为数值/百分比/关键字

3、2D转换

1、位移

1、什么是位移

改变元素在页面中的位置

2、语法

属性：transform

取值(函数)：

1、translate(x)

表示在x轴上的位移距离

x取值为正，元素向右移动

x取值为负，元素向左移动

2、translate(x,y)

表示在x轴和y轴的位移距离

x取值 同上

y取值为正，元素向下移动

y取值为负，元素向上移动

3、translateX(x)

等同于 translate(x)

4、translateY(y)

表示只在y轴上的位移距离

2、缩放

1、什么是缩放

改变元素的尺寸

2、语法

属性：transform

函数：

1、scale(value)

元素在x轴 和 y轴的缩放倍数

value取值：

1、默认值为1

2、大于1的数值 ：放大

3、0~1之间的小数：缩小

4、负数 ：物极必反

2、scale(x,y)

分别指定在x轴和y轴的缩放倍数

3、scaleX(x)

4、scaleY(y)

3、旋转

1、什么是旋转

改变元素在页面上的角度

2、语法

属性：transform

取值：rotate(ndeg)

n 取值为正，则按顺时针旋转

n 取值为负，则按逆时针旋转

注意：

1、转换原点会影响转换效果

2、元素的坐标轴会一同跟着旋转

先位移再旋转 还是 先旋转再位移 ，效果时不同的

4、倾斜

1、什么是倾斜

改变元素在页面中的形状

由举行变为平行四边形

2、语法

属性：transform

取值：

1、skewX(xdeg)

向着x轴的方向产生一定的倾斜角度

实际上是改变y轴的倾斜角度来满足x轴的倾斜

x取值为正，y轴，逆时针倾斜

x取值为负，y轴，顺时针倾斜

2、skewY(ydeg)

向着y轴的方向产生一定的倾斜角度

实际上是改变x轴的倾斜角度来满足y轴的倾斜

y取值为正，x轴，顺时针倾斜

y取值为负，x轴，逆时针倾斜

3、skew(xdeg)

等同于 skewX()

4、skew(xdeg,ydeg)

4、3D转换

1、什么是3D转换

允许使元素在x轴，y轴 和 z轴进行的转换效果

2、属性

属性：perspective

取值：以 px 为单位的数值

数值越大，相当于离3D转换的物体越远

数值越小，相当于离3D转换的物体越近

注意：该属性要加在 3D转换元素的 父元素上

兼容性：

perspective:500px;

-webkit-perspective:500px;

3、3D转换

1、旋转

允许元素在x轴，y轴，和z轴上做旋转操作

语法：

1、属性

transform

2、取值

rotateX(xdeg)

rotateY(ydeg)

rotateZ(zdeg)

rotate3D(x,y,z,ndeg) : 指定3个轴同时旋转的角度。x,y,z取值为1的时候，说明该轴要参与旋转，取值为0，该轴则不参与旋转

ex

rotate3d(1,0,0,45deg)

rotate3d(1,1,0,45deg)

rotate3d(1,1,1,45deg)

2、位移

1、属性

属性：transform-style

作用：如何呈现子元素的位置

取值：

1、flat

默认值，不保留其子元素的3D位置

2、preserve-3d

保留其子元素的3D位置

2、语法

属性：transform

取值：

translateX(x)

translateY(y)

translateZ(z)

translate3D(x,y,z)

3、过渡

1、什么是过渡

使得CSS属性值在一段时间平缓变化的一个效果

2、过渡的语法

1、指定过渡属性(必须的)

属性：transition-property

作用：指定哪个属性值在变化时使用过渡的效果

取值：

1、具体属性值

2、all

ex:

1、transition-property:background;

2、transition-property:width;

允许设置过渡效果的属性：

1、颜色属性

2、取值为数值的属性

3、转换属性

4、渐变属性

5、visibility 属性

6、阴影属性

2、指定过渡时间(必须的)

属性：transition-duration

取值：以 s 或 ms 为单位的数值

1000ms=1s

注意：该属性值默认为0，表示没有过渡效果

3、指定过渡速度时间曲线函数(速率)

属性：transition-timing-function

取值：

1、ease

默认值，慢速开始，快速变快，慢速结束

2、linea

匀速

3、ease-in

慢速开始，加速结束

4、ease-out

快速开始，慢速结束

5、ease-in-out

慢速开始和结束，先加速再减速

4、指定过渡延迟时间

用户激发操作时，等待多长时间后再开始显示效果

属性：transition-delay

取值：以s或ms为单位的数值

5、过渡的简写模式 - 过渡属性

属性：transition

取值：property duration timing-function delay;

3、过渡属性编写在哪???

位置1：可以将过渡属性编写在元素声明的样式中(管去管回)

位置2：可以讲过渡属性编写在激发操作中(如：hover)(只管去，不管回)