CSS（定位的属性&堆叠顺序&兄弟选择器&多列&转换&2d倾斜&3D转化1.3）

CSS（定位的属性&堆叠顺序）
1、定位的属性
position:relative(相对定位)/absolute(绝对定位)/fixed(固定定位)
1)相对定位：
pisition:relative;
元素扔保持其原有形状，元素定位前所占的位置仍保留，元素框会相对于其原来的位置偏移到某个距离
使用定位，除了要position属性外，还需要top、bottom、left、right，取值为尺寸单位。注意top和bottom、left和right的冲突关系;
相对定位，参照对象是自己原来的位置，比如left:10px; 元素会向右移动10个像素

2)绝对定位
将元素从普通文档流中完全移除，不占空间，使用偏移属性来固定元素的位置，绝对定位参照是最近的拥有position属性的祖先元素；如果元素的所有祖先元素均为设置position属性，那么他的位置会相对与它最初的包含框，比如body
语法：
position:absolute;
left/right/top/bottom进行偏移量的设置

3)固定定位
将元素固定页面的某个位置，元素从普通流中移除，不占空间，当用户滑动页面时，元素框不会跟着移动
语法：
position:fixed;
left/right/top/bottom设置偏移位置
2、堆叠顺序
一旦修改了元素的定位方式，则元素可能会发生堆叠，可以使用z-index属性来控制元素框的堆叠顺序
语法：
z-index:取值为整数，也可以为负数
取值越大表示其离用户最近，也就是最容易被看到，如果设置为负值，则表示离用户更远
注意此元素需要在被定位的元素中使用
1、兄弟选择器
两个同级别的元素，称为兄弟元素(有同一个父元素)
1）相邻兄弟选择器
用于匹配指定元素的相邻兄弟元素，只会给+后面的元素添加样式
语法：
选择1+选择器2{
}
注意：只会考虑后面的相邻兄弟元素
2）通用兄弟选择器
匹配元素后面的所有兄弟元素，使用~进行连接
语法：
选择器1~选择器2{
}

2、多列
1）分割列
将元素分割成多列显示内容
语法：column-count：正整数;
2）设置列间隔
column-gap:尺寸属性;
设置列之间的间隔

3、转换
1）概念
转换就是元素改变形状、尺寸和位置的一种效果，页脚变形，可以向元素添加2d或者3d转换，从而对元素进行旋转、缩放、移动和倾斜；
2D转换是元素在x轴和y轴平面上发生变化；3D转换指元素还可以在Z轴进行变化
2）转换属性
transform属性用于向元素添加2D或3D转换样式
语法：
transform:none/转换函数;
转换函数取值可以为多个，函数之间用空格隔开
转换函数的分类
3）2D位移
translate()方法用于将元素从当前位置移动到指定位置
语法：
transform:translate(value);元素沿x轴移动
transform:translate(x,y);元素沿x轴和y轴移动，取值为尺寸单位;
transform:translateX(value);沿X轴
transform:translateY(value);沿Y轴
4）2D旋转
rotate()方法用于旋转元素，根据原点按照顺时针给定的角度进行旋转，允许为负值，表示逆时针
语法:
transform:rotate(deg);
5）2D缩放
scale()方法用于改变元素的尺寸，，根据给定的缩放尺寸
语法
transform:scale(value);x轴缩放，第二个参数默认与第一个相等
transform:scale(value,value);x轴和y轴
注意，当scale的取值小于1时，表示缩小，大于1时表示放大
transform:scaleX();
transform:scaleY();
6）转换原点
transform-origin属性用来指定元素的转换原点位置，默认情况下转换的原点为元素的中心点
语法:
transform-origin:vlaue;x/y/z轴的点
transform-origin:value value;表示x轴和y轴（2D转换）
transform-origin:x y z；三个轴的坐标点
元素的左上角为（0,0）

1、2d倾斜
skew()方法用于让元素倾斜，围绕x轴和y轴，按照一定角度的倾斜，可能会改变元素的形状；
语法：
transform:skew(x,y);取值为角度
transform:skewX();
transform:skewY();

2、3D转换
相当于在2d的环境增加了一个Z轴，注意3D转换中增加一个perspective属性，该属性用于定义3D元素的距离，以像素记。其子元素会获得透视效果，而不是元素本身，只影响3D转换元素，注意浏览器的兼容性
-ms-perspective:IE
-moz- 火狐
-webkit- 谷歌、Safari
-o- 欧朋
1）3D位移
可以改变元素在Z轴的位置
语法：
transform:translate(x,y,z);
或
transform:translateZ(z);
2）3D旋转
语法：
transform:rotateX(deg);
transform:rotateY(deg);
transform:rotateZ(deg);
3）3d缩放
语法:
transform:scaleZ(z);
transform:sacle3d(x,y,z);
注意，scaleZ和scale3d函数单独使用时没有效果，需要配合其他变形函数一起使用