课堂笔记3

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

相对定位relative 自恋型

相对定位不脱标（不脱离标准流）

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

注意： 1.元素相对定位后，虽然可以用便偏移量改变位置，但是在文档流中的位置仍保留。

​ 2.每次移动的位置，都是以自己的左上角为基点移动

浮动：多个块级元素一行显示

相对定位：主要价值就是移动位置

绝对定位absolute 拼爹型

绝对定位完全脱标

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

水平居中的算法:

​ 1.left 50% ，父盒子的一半大小

​ 2.再有外边距负的一半值即可

固定定位fixed

它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

固定定位是一种特殊的绝对定位

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

1.默认值是0，取值越大，定位元素越居上

2.取值相同，看书写顺序

3.数字没有单位

4.只有定位才有该属性，浮动，标准流，静态定位都没有该属性

四种定位总结

定位模式	是否脱标（脱离标准流）	是否使用偏移量	移动位置基准
静态static	不脱标，正常模式	不可以	正常
相对定位relative	不脱标，占有位置	可以	相对与自己移动
绝对定位absolute	脱标，不占位置	可以	相对于定位父级移动
固定定位fixed	脱标，不占位置	可以	相对于浏览器移动

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

去除图片底侧空白缝隙

有个很重要特性你要记住： 如果一个元素没有基线，比如图片或者表单等行内块元素，则他的底线会和父级盒子的基线对齐。 这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法就是：

1. 给img vertical-align:middle | top等等。 让图片不要和基线对齐。

2. 给img 添加 display：block; 转换为块级元素就不会存在问题了。

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置，x、y可为负值；

 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
 translateX(x)仅水平方向移动（X轴移动）
 translateY(Y)仅垂直方向移动（Y轴移动）

让定位的盒子水平居中

缩放 scale(x, y)

对元素进行水平或垂直方向的缩放

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

旋转 rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；

transform:rotate(45deg);

​

transform-origin可以调整元素转换变形的原点

transform-origin: 50px 10px ; 

如果是4个角，用left,top，这些值，如果想要精确的位置，就用像素值

倾斜 skew(deg, deg)

transform:skew(30deg,0deg);

3D变形(CSS3) transform

rotateX()

就是沿着 x 立体旋转.

rotateY()

沿着y轴进行旋转

rotateZ()

沿着z轴进行旋转

透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

• 透视原理： 近大远小 。
• 浏览器透视：把近大远小的所有图像，透视在屏幕上。
• perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

translateX(x)

仅水平方向移动（X轴移动）

translateY(y)

仅垂直方向移动（Y轴移动）

translateZ(z)

前后移动，直观的表现就是大小变化

translate3d(x,y,z)

[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。