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

相关文章
|
1月前
|
JavaScript 前端开发 Python
【python自动化】Playwright基础教程(三)定位操作
【python自动化】Playwright基础教程(三)定位操作
48 0
|
9天前
|
JavaScript 前端开发 Docker
全栈开发实战:结合Python、Vue和Docker进行部署
【4月更文挑战第10天】本文介绍了如何使用Python、Vue.js和Docker进行全栈开发和部署。Python搭配Flask创建后端API,Vue.js构建前端界面,Docker负责应用的容器化部署。通过编写Dockerfile,将Python应用构建成Docker镜像并运行,前端部分使用Vue CLI创建项目并与后端交互。最后,通过Nginx和另一个Dockerfile部署前端应用。这种组合提升了开发效率,保证了应用的可维护性和扩展性,适合不同规模的企业使用。
|
15天前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox与Grid布局的深度对比
【4月更文挑战第4天】 在现代前端开发中,构建灵活且响应式的用户界面是至关重要的。随着移动设备浏览量的增加,能够适应不同屏幕尺寸和分辨率的布局技术变得必不可少。Flexbox和Grid是CSS提供的两种强大的布局机制,它们各自以独特的方式解决了响应式设计的挑战。本文将深入探讨Flexbox和Grid的核心概念、使用场景和性能考量,为开发者提供在面对不同布局需求时做出明智选择的依据。
|
26天前
|
架构师 前端开发
web全栈架构师第16期教程
互联网时代已进入后半场,行业环境发生了显著变化。互联网人,尤其是技术人员,如何在加速更迭的技术浪潮中持续充电,提升自身价值,是当下必须面对的挑战。课程涉及了现下前端实际开发时所需要的各块内容,并深度对标 阿里 P6+级别所具备的知识储备及开发技能,奠定源码阅读基础和全栈开发能力。
19 3
web全栈架构师第16期教程
|
27天前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
36 3
Web前端全栈HTML5通向大神之路
|
27天前
|
Python
老男孩&路飞学城Python全栈
老男孩&路飞学城的Python全栈开发重点班由ALEX老师主讲,核心教学内容,100多天课程,近100G资料,含基础到实战。一线技术专家亲授,以案例教学引导学生逐步进入项目实战。
20 1
老男孩&路飞学城Python全栈
|
1月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox与Grid布局的深度解析
【2月更文挑战第28天】 在现代前端开发中,打造灵活且适应不同屏幕尺寸的用户界面是至关重要的。随着移动设备的普及,响应式设计已经成为网页制作不可或缺的一部分。本文将深入探讨两种强大的CSS布局模块——Flexbox和Grid,它们如何简化布局创建过程,并赋予设计师更大的灵活性去构建动态和流畅的响应式界面。通过对这两种技术的比较、使用场景分析以及代码示例,读者将能够更好地理解何时以及如何使用这些工具来提升前端项目的质量和效率。
16 0
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox布局的全面指南
【2月更文挑战第28天】 在当今多变的设备屏幕尺寸和分辨率中,创建一个能够适应不同视口的响应式Web界面至关重要。本文深入探讨了CSS Flexbox布局模块,它是一种设计灵活且强大的方式来创建复杂的响应式布局。我们将透过概念解析、关键属性讲解以及实际案例分析,帮助前端开发者掌握Flexbox的核心原理和应用技巧,以实现流畅的页面布局调整和优化用户体验。
|
1月前
|
前端开发 测试技术 开发者
构建响应式Web界面:Flexbox布局的力量
【2月更文挑战第24天】在现代Web开发中,创建能够适应不同屏幕尺寸的响应式界面已成为一项标准实践。Flexbox,一个CSS模块,因其灵活性和强大功能在前端开发者中广受欢迎。本文将深入探讨Flexbox的核心概念、常见用例以及如何利用它来构建美观、灵活且易于维护的响应式布局。通过实例演示,读者将学会如何有效地应用Flexbox技术,提升前端项目的质量和用户体验。

热门文章

最新文章