web-6：css元素定位 转换

一.定位布局

可以设置元素在网页中的显示位置。
属性： position
取值：

position: static (静态的，此为默认设置)
position: relative (相对定位)
position: absolute(绝对定位)
position: fixed(固定定位)

注意：
只有元素设置position为relative/ absolute/ fixed,才称元素是已定位元素。

---

二.定位详解。

相对定位

属性： position: relative;

特点：
元素一旦相对定位，就可以参照它在文档中的原始位置进行偏移。
偏移后，元素仍然在文档中占位(保留它的原始位置)。

偏移属性：
top / right / bottom / left
取像素值，设置元素偏移距离。

top :设置元素距离顶部的偏移量，正值表示元素下移。
left :设置元素距左的偏移量，正值表示元素右移。
bottom :设置元素距底部的偏移量，正值表示元素上移。
right :设置元素距右的偏移量，正值表示元素左移。

示例：01-relative.html

---

绝对定位

属性： position: absolute;

特点：
1.元素设置绝对定位，会参照一个‘离他最近的、已经定位的’祖先元素进行偏移，如果没有已经定位的祖先元素，则会参照浏览器窗口的原点进行偏移。
2.元素设置绝对定位后会脱离文档流，使父元素高度为0。

使用时注意：
1.一般采用父元素相对定位，子元素绝对定位，来实现元素的偏移。
2.绝对定位的偏移属性是根据元素的参照物进行偏移。
3.绝对定位的元素脱离文档流，可以设置宽高。

示例：01-absolute.html

---

元素的堆叠次序

即，元素出现相互重叠时的显示次序。

属性： z-index
取值： 无单位的数值，默认为0,数值越大越靠上显示。

示例：04-z-index.html

---

固定定位

属性： position: fixed;

特点：
元素设置固定定位，会参照浏览器窗口进行偏移。

示例：05-fixed.html

---

三.元素显示效果

设置元素的显示与隐藏：

属性： visibilly
取值：

visibilly: visible (默认可见)
visibilly: hidden (元素隐藏，但是仍然占位！)

示例：06-visible.html

---

转换元素类型：

属性： display
取值：

display: inline; 让以’行内元素’显示
display: block; 让’块元素’显示
display: inline-block; 让元素以’行内块元素’显示
display: none; 让元素隐藏，在文档中不占位

示例：06-visible.html

元素透明度设置：

第一种设置方式：
1.grba(r,g,b,a)

第二种设置方式：
属性： opacity
取值： 0~1 (0为透明，1为不透明)
使用：

1. opacity属性会使包含元素自身和其后代元素在内的所有显示效果都半透明。
   rgba() 只针对当前元素的指定属性实现半透明，文本的半透明，文本的半透明效果会被子元素继承。
2. 子元素与父元素同时设置opacity半透明，子元素中的半透明效果是两个透明度值相乘(在父元素半透明的基础上再次半透明。)

鼠标形状改变：

默认情况下，鼠标悬停在普通文本上显示为’I’，悬停在超链接内容上，显示为手指形状，停留在其他元素显示为箭头。

属性： cursor
取值：

1.cursor： default; (默认，普通箭头)
2.cursor： pointe; (鼠标显示手指形状)
3.cursor： text; (显示’I’形状)

示例：08-cursor.html

---

行内块元素的垂直对齐方式:

行内块元素默认按照文本的基线对齐，会出现元素排列不齐的情况。
属性： vertical-align
取值： top / middle / bottom
使用：
为行内块元素设置verticla-align,调整左右元素跟它的对齐方式。
例：

img,input{
    vertical-align:bottom;
}

---

列表相关的属性:

list-style-type

设置项目符号的类型
取值：
squre / cirle / disc / none

list-style-image

使用图片自定义项目符号
取值：
list-style-image: url( );

list-style-position

设置项目符号的位置 ，默认显示在内容框的左侧。
取值：
list-style-position: outside;
项目符号显示在内容框外部。
list-style-position: inside;
项目符号显示在内容框内部。

简写属性

list-style: type/url position;
取消项目符号 : list-style:none;

---

四.元素的转换效果

元素的转换效果主要是指元素可以发生平移，缩放，旋转变换。

属性：transform
取值： 转换函数
注意： 多个转换函数之间使用空格隔开。

---

元素的转换基准点：

默认情况下，元素以中心点作为转换的基准点。

调整基准点：
属性： transform-origin
取值： x y
可以使用像素值，百分比或方位值，表示基准点的位置。

左上角： transform-origin： 0px 0px;    
右下角： transform-origin： 100% 100%;`  
右上角： transform-origin： 100% 0;`  
        transform-origin： right top;

---

平移属性：

作用：改变元素在文档中的位置
使用：
属性： transform
取值：

transform: translate(x,y);
x,y 分别表示元素在x轴和y轴上的平移距离，取像素值，可正可负，区分平移方向。

transform: translate(x);
一个值，表示延x轴平移，y同理。

transform: translateX(value);
指定延x轴平移

transform: translateY(value);
指定延y轴平移

---

缩放变换：

改变元素的显示尺寸(放大或缩小)
属性: transform
取值： scale(value)
value为无单位的数值，表示缩放比例。

value > 1, 表示元素放大

0 < value < 1, 表示元素缩小。

value< 1 , 数值仍然表示缩放比，负号表示元素会被翻转。

其他取值：

scaleX(v) 沿 X 轴缩放
scaleY(v) 沿 Y 轴缩放

---

旋转变换：

可以设置元素旋转一定角度显示。
属性： transform
取值： rotate(deg) 取角度值，以deg为单位

使用：

rotate() 表示平面旋转
正值表示顺时针旋转， 负值表示逆时针旋转。

3D旋转

rotateX(deg) 沿 X 轴旋转
rotateY(deg) 沿 Y 轴旋转

---

转换函数的组合使用：

transform: translate( ) scale( ) rotate( );
注意：
元素旋转会连带坐标轴一起转。