Python全栈 Web（定位布局、定位方式）
定位布局：
属性：position
取值：
static 默认值 按照文档流布局
relative 相对定位
absolute 绝对定位
fixed 固定定位
只有元素的position属性设置为非默认属性 才算是已经定位的元素
偏移属性：
top right bottom left
用来配合已经定位的元素实现位置移动
取值：px
top：以元素的上边界为基准移动元素
right：以元素的右边界为基准移动元素
bottom：以元素的低边界为基准移动元素
left：以元素的上左界为基准移动元素
定位方式：
相对定位：
属性：position：relative；
元素采用相对定位时会参照它在文档中原本的位置进行偏移
绝对定位：
属性：position：absolute；
特点：
1.绝对定位的元素，会脱离文档流不占位
2.绝对定位元素会参照离他最近的已经定位的祖先元素进行偏移
3.如果没有已经定位的祖先元素 元素会参照body(浏览器窗口左上角)进行偏移
注意：
所有元素只要脱流就可以设置宽高大小
通常使用“父相子绝”的方式页面布局 限制其他元素的布局方式
浮动和绝对定位点都可以实现元素脱流，采用浮动+外边距调整元素的位置
等价于绝对定位+偏移属性 浮动更常见于外围结构标签，做网页整体布局时
使用，绝对定位更常见于内部元素的调整
浮动和相对定位可以共存 设置相对定位只是为了辅助内部子元素+的定位布局
堆叠次序的调整：
已经定位的元素堆叠在一起是的排列顺序
语法：
属性：z-index
取值：整数 数值越大越靠上
注意：
如果我们元素z-index属性值相同，后来者居上
父子元素都设置z-index 永远都是子元素在上
不受影响
z-index属性只能用在已经定位的元素上
固定定位：
可以使元素的位置固定在浏览器窗口的某个位置
不会随网页内容的滚动而滚动
语法：
属性：position
取值:fixed
配合偏移属性实现元素位置的固定
注意：
固定定位的元素永远是参照浏览器的窗口定位的
固定定位的元素都会变成块元素
显示方式：
1.决定元素以何种样式显示在网页中
属性：display
取值：
none
设置元素隐藏 隐藏后不占位
block
设置元素显示 或 将元素转换为块元素
inline
转换为行内元素
inline-block
转换为行内块元素
显示效果：
属性：visibility
取值：
visible
默认值 表示显示
hidden
元素隐藏 仍然在文档中占位
元素透明度：
属性：opacity
设置元素透明度
取值：0~1
0：透明 1：不透明
元素设置opacity属性 所有的内容都会实现透明效果
子元素会继承父元素的透明效果
如果父子元素都设置了opacity 子元素最终的效果是在父元素半透明的基础上
在进行半透明 子元素最终效果=父元素opacity*本身opacity
设置垂直对齐方式：
属性：vertical-align
取值：top middle bottom
可以用在行内元素上 但更常见于为行内快元素设置vertical-align
调整行内快元素左右内容与它的对齐方式
光标显示：
改变鼠标悬停在元素上时的显示外观
属性：cursor
取值：
default
默认
pointer 显示为小手形状
text
显示为 I
crosshair 显示为 +
列表属性：
列表本身是块级元素，自带外边距，电邮项目符号
属性：
属性：list-style-type
设置项目符号
取值：
none
取消项目符号
disc
实心原点
circle
空心原点
square
实心方块
...
设置项目符号为图片：
属性：list-style-image
取值：
url(“图片路径”)
设置项目符号的位置：
属性：list-style-position
取值：inside outside
设置项目符号出现在内容框的外部还是内部
**简写属性：
list-style：none；
常用来取消列表的项目符号
转换属性：
主要是用来改变元素在页面中的位置、尺寸、角度
属性：transform
取值：
转换函数
多个函数之间用空格隔开
转换原点：
转换原点实际上就是元素转换操作的基准点
属性：transform-origin
取值：x y；
表示以元素左上角为原点进行选取旋转原点的坐标
可以使用像素值、百分比、方位值
top center bottom
left center right
默认以元素的中心点为原点
转换函数：
平移变换：
改变元素在网页中的位置
属性：transform
取值：translate(x, y)
x表示元素在水平方向上平移的距离
y表示元素在垂直方向上平移的距离
可以填写正值或负值
其他情况：
translateX(value)
指水平方向位移
translateY(value)
指垂直方向位移
translate(value)
等价于translateX
缩放变换：
改变元素在页面中的大小
属性：transform
取值：scale(value)
value为无单位的素值 表示缩放比例
默认值是1 正常比例显示
value > 1 会等比放大
0 < value < 1 等比缩小
value < 0 元素会等比反转
其他情况：
scaleX(v)
横向缩放
scaleY(v)
垂直缩放
旋转变换：
元素旋转一定的角度显示
属性：transform
取值：rotate(ndeg)
表示元素按照指定的角度旋转
正值：顺时针 负值：逆时针
3D变换：
rotateX(ndeg)沿X轴旋转
rotateY(ndeg)沿Y轴旋转
rotateZ(ndeg)沿Z轴旋转
旋转原点会影响转换效果
元素如果涉及旋转操作 会连带坐标轴一起旋转,影响后面的位移
