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)(只管去,不管回)
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。