夜灵的Html笔记Day12——CSS Hack、CSS3转化

1、CSS Hack
1、作用
做IE浏览器的兼容性
2、IE浏览器中的3种模式
1、混杂模式
没有标准的模式
2、准标准模式
即支持标准，同时又向前兼容非标准代码
3、标准模式
只支持W3C的标准规范，不支持非标准代码

不同的模式主要是对 CSS(框模型) 以 JS解析会有不同的解析效果
3、CSS Hack
根据不同的IE浏览器版本,去执行不同的CSS代码
原理：使用CSS属性的优先级来实现CSSHack
4、CSS Hack的实现方式
1、CSS 类内部Hack
通过 属性和值的前缀或后缀来实现浏览器版本的识别


- ：识别 IE6
+ ：识别 IE6，7
\0: 识别 IE8，9，10
\9\0 : 识别 IE9，10
2、选择器Hack
在 浏览器前加前缀来实现不同的浏览器版本的识别
* : 识别IE6
*+ 前缀： 识别IE7
ex:
*div{
background-color:pink;
}
3、HTML头部引用Hack(掌握)
原理：使用 IE的条件注释来完成浏览器版本的判断
语法：
<!--[if 条件 IE 版本]>
满足浏览器版本时要执行的操作
<![endif]-->


    ***:
       版本：6-10，如果省略版本的号的话，则判断是否为IE
<!--[if IE 8]>
只在IE8中要执行的操作
<![endif]-->
条件：
1、gt
判断当前浏览器版本是否大于指定版本
2、gte
判断当前浏览器版本是否大于等于指定版本
3、lt
判断当前浏览器版本是否小于指定版本
4、lte
判断当前浏览器版本是否小于等于指定版本
5、!
非，(取反，不是)
判断当前浏览器版本是否不等于指定版本
6、不写
判断浏览器是否为IE或IE的指定版本


pm:


1、CSS3-转换
1、什么是转换
改变元素在页面中的位置，大小，角度或形状的一种方式
在CSS3中，允许对元素进行 2D转换 和 3D转换
2D转换：只允许在 x轴 和 y轴上进行转换操作
3D转换：在2D基础上，增加对 z轴 的转换效果
2、转换属性
1、转换
语法：transform: translate scale rotate skewX
取值：
1、none
2、由 一组转换函数 组成
一个 或 多个转换函数,如果是多个转换函数，中间用 "空格" 分开
2、转换的原点
语法：transform-origin
     默认情况：转换原点在元素正中间位置处
取值：
数值 ：以元素左上角为(0,0)点进行计算的
百分比：以元素左上角为(0%,0%)点进行计算
关键字：top/right/bottom/left/center
取值时，多个值之间，用 空格 隔开


取值数量：
2个值：表示原点在 x轴 和 y轴的位置
3个值：表示原点在x，y，z轴上的位置
3、转换-2D转换
1、位移:改变元素在页面中的位置
语法：transform
函数：
1、translate(x)
元素在x轴上的位移距离
x取值为正，向右移动
x取值为负，向左移动
2、translate(x,y)
元素在x轴和y轴上的位移距离
y取值为正，向下移动
y取值为负，向上移动
3、translateX(x)
4、translateY(y)
2、缩放:改变元素在页面上的大小
语法：transform
函数：
1、scale(value)
x轴和y轴将同时进行缩放
value取值：
1 ：原始大小
大于1 ：放大
0~1 ：缩小
2、scale(x,y)
3、scaleX(x)
4、scaleY(y)
3、旋转:改变元素在页面上的角度
语法：transform
函数：
rotate(ndeg)
n取值为正，顺时针旋转
n取值为负，逆时针旋转
注意：
1、元素旋转后，坐标轴也跟着旋转
2、转换原点会影响旋转的效果




        4、倾斜:改变元素在页面中的形状
语法：transform
函数：
1、skewX(xdeg)
向着x轴(横向)的方向产生倾斜,其本质是改变y轴的倾斜角度
x 取值为正，y轴逆时针倾斜
x 取值为负，y轴顺时针倾斜
2、skewY(ydeg)
向着y轴(纵向)的方向产生倾斜,其本质是改变x轴的倾斜角度
y 取值为正，x轴顺时针倾斜
y 取值为负，x轴逆时针倾斜
3、skew(x)
4、skew(x,y)
4、转换-3D转换
1、什么是3D转换
允许元素在 x，y，z轴上进行转换
2、属性
透视距离
语法：perspective
取值：数值


   作用：模拟人眼到3D转换物体之间的距离
   兼容性：-webkit-perspective
   ***：该属性要加在 3D转换元素的 父元素上。
3、3D旋转
允许让元素在 x，y，z轴上分别实现旋转效果
语法：transform
函数：
rotateX(xdeg)
以 x 轴为中心轴，旋转元素
rotateY(ydeg)
以 y 轴为中心轴，旋转元素
rotateZ(zdeg)
以 z 轴为中心轴，旋转元素
rotate3D(x,y,z,ndeg)
x,y,z 如果取值为1，则该轴参与旋转，取值为0则不参与旋转
rotate3D(1,0,0,45deg)
rotate3D(1,1,0,45deg)
rotate3D(1,1,1,45deg) 不等于 rotatex(45deg) rotatey(45deg) rotatez(45deg)
4、3D位移
语法：transform
函数：
translateZ(z)


语法：transform-style
     作用：如何显示子元素的3D位置
取值：
1、flat
默认值，不保留其子元素的3D位置
(子元素不能以3D位置摆放)
2、preserve-3d
保留其子元素的3D位置
(允许让子元素以3D方式摆放位置)