热门搜索:
您现在的位置是：首页 > 文章详情

Python全栈 Web（定位布局、定位方式）

日期：2018-09-05点击：476



定位布局：
属性：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轴旋转
旋转原点会影响转换效果
元素如果涉及旋转操作 会连带坐标轴一起旋转,影响后面的位移

原文链接：https://yq.aliyun.com/articles/636736
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章