专栏首页李才哥css应知应会 第七集
原创

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)(只管去,不管回)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css应知应会 第三集

    background-image:repeating-linear-gradient();

    李才哥
  • 浅谈JavaScript 数据属性和访问器属性

    创建自定义对象通常有两种方法,第一种就是创建一个Object的实例,然后再为其添加属性和方法,例如:

    李才哥
  • css应知应会 第四集

    3、当父元素中显示不下所有的已浮动子元素的话,那么最后一个将换行,依次类推。但有可能会被卡住

    李才哥
  • JavaScript之面向对象的概念,对象属性和对象属性的特性简介

      一、大家都知道,面向对象语言有一个标志,那就是他们都有类的概念,通过类我们可以创建任意多个具有相同属性和方法的对象。但ECMAScript(指定JavaSc...

    郑小超.
  • Workbook工作簿对象属性

    Activeworkbook.name表示当前活动工作簿的name属性,即当前excel文件的名称为vba.xlsm。

    无言之月
  • SpringMVC Controller单例和多例

    SpringMVC Controller单例和多例 对于SpringMVC Controller单例和多例,下面举了个例子说明下. 第一次:类是多例,一个普通属...

    Java帮帮
  • 达观数据前端分享:理解 JavaScript 中的对象的属性

    在达观数据的前端工作中,对象的属性是经常接触和使用的,正好最近重温了一下《JavaScript 高级程序设计》,把书中理解对象属性的部分整理一下与大家分享。 ...

    达观数据
  • 【49期】面试官:SpringMVC的控制器是单例的吗?

    blog.csdn.net/qq_27026603/article/details/67953879

    良月柒
  • 前端基础-CSS属性选择器

    cwl_java

扫码关注云+社区

领取腾讯云代金券