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轴旋转

旋转原点会影响转换效果

元素如果涉及旋转操作会连带坐标轴一起旋转,影响后面的位移