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

相关文章
|
13天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
96 44
|
1天前
|
关系型数据库 数据库 数据安全/隐私保护
Python Web开发
Python Web开发
14 6
|
6天前
|
开发框架 前端开发 JavaScript
利用Python和Flask构建轻量级Web应用的实战指南
利用Python和Flask构建轻量级Web应用的实战指南
18 2
|
9天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
21 1
|
14天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
28 2
|
15天前
|
JSON API 数据格式
如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架
本文介绍了如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架,适合小型项目和微服务。文章从环境准备、创建基本Flask应用、定义资源和路由、请求和响应处理、错误处理等方面进行了详细说明,并提供了示例代码。通过这些步骤,读者可以快速上手构建自己的RESTful API。
24 2
|
17天前
|
Kubernetes 网络协议 Python
Python网络编程:从Socket到Web应用
在信息时代,网络编程是软件开发的重要组成部分。Python作为多用途编程语言,提供了从Socket编程到Web应用开发的强大支持。本文将从基础的Socket编程入手,逐步深入到复杂的Web应用开发,涵盖Flask、Django等框架的应用,以及异步Web编程和微服务架构。通过本文,读者将全面了解Python在网络编程领域的应用。
17 1
|
17天前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
Python Web框架比较:Django vs Flask vs Pyramid
27 1
|
25天前
|
JSON 搜索推荐 API
Python的web框架有哪些?小项目比较推荐哪个?
【10月更文挑战第15天】Python的web框架有哪些?小项目比较推荐哪个?
44 1
|
28天前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
Python Web框架比较:Django vs Flask vs Pyramid
23 4