CSS定位机制

                                                     css定位机制和css动画变换
css定位机制
定位属性position(相生相克)
1  static:静态定位
2  relative:相对定位(相对于自己原来的位置定位)
3. absolute:绝对定位(float)具有强大的破坏性,父容器管不住
4. fixed:固定定位(相对于浏览器定位不是相对于文档定位)
css其他定位属性:
1 z-index(配合absolute)对象的层叠顺序,使用一个证书来定义堆叠的层次整数值越大。。
2 top
3 right
4 left
5 bottom
css相对定位position取值为relative
css的相对定位仍然会占用原来的位置
css绝对定位position取值为absolute
css绝对定位时从文档流中彻底删除
【相对定位】
* 1.使用position:relative;设置元素为相对定位的元素;
* 2.定位机制
*相对于自己原来文档流中的位置定位,当不指定top等定位值时不会改变元素位置                *相对定位元素仍会占据原有文档流中的位置而不会释放
3使用top、left、right、bottom、调整位置,当left和right同时存在是,left生效,当top和bottom同时存在时,top生效。
[绝对定位]
* 1.使用position:absolute;设置元素为绝对定位元素;
* 2.定位机制:
*  · 相对于第一个非static元素有定位的祖先元素(即使用了relative、absolute、fixed定位的祖先元素)
* ·如果所有祖先元素均未定位,则相对于浏览器左上角定位;
*  ·使用absolute的元素,会从文档流中完全删除,原有空间释放不再占有;
*  ·可以通过设置relative锁住;
[固定定位]
* position: fixed;是一种特殊的绝对定位,父容器无法使用relative锁住;
* 定位机制:永远相对于浏览器定位;
[z-index属性]:
*作用: 设置定位元素的z轴层叠顺序,
* 要求:1、 必须是定位元素才能用(relative、absolute、fixed)
*      2、使用z-index需要考虑父容器的约束:
*           ·如果父容器为index:auto;则子容器的z-index不受父容器的约束;
*           ·如果父容器的z-index进行了设置,则子容器的层叠将以父容器的z-index为准(在同一父容器的不同子元素,能可以通过自己的z-index调整层叠关系)
*     3、 z-index默认auto & z-index:0的区别:
*     z-index:auto为默认值,与z-index:0处于同一平面;
*     z-index:auto,不会约束子元素的z-index层次,而z-index:0会约束子元素与父元素在同一平面
* 4 z-index相同( 处于同一平面的定位元素)的层叠关系,后来者居上;
绝对定位元素水平居中的设置方式:
1.left:50%;
2.设置margin-left为-width/2:margin-left: -50px;
[负边距]
1.实现块级元素在会计元素中水平垂直居中
2.设置子容器为定位元素;
top: 50%;  margin-top: -25px;
left: 50%;  margin-left: -25px;
 css 动画变换
1.声明一个动画(关键帧)
@keyframes name{
from{}
to{}
}
注意事项:阶段写法:
1.每个阶段用百分比表示:从0%到100%
2.起止必须设置即从0%到100%或者from和to
2.在css选择其中使用animation动画属性,调用声明好的关键帧;
【animation缩写顺序】
动画名称,持续时间必须设置
animation可以同设置多个动画,动画时间
Animation-name 动画名称(@keyframes 名称)
Animation-duration 动画持续时间
Animtaion-timing-function动画速度曲线 常选ease
Animtaion-delay 动画延迟时间
Animation-iteration-count 播放次数,默认为1,无限次Infinite 
Animation-direction 设置对象动画在循环中是否反向运动 ( Alternate 逆向播放)
* animation-fill-mode 设置对象动画时间之外的状态(forwards: 停留在动画结束状态 backwards:停留在动画开始状态)
>>> 注意animation-name和animation-duration必须设置
>>> animation可以同时设置多个动画 动画之间用,分隔
animation:frame1 .3s,frame2 .5s……
transform定义变换:
常用变换:    translate平移;
scale缩放;
rotate定义旋转;
transform可同时进行多个变换,多个变换之间用空格分隔;
例如:transform:scale(1.8,3.0)translateY(0px) rotate()
translate-origion:定义变形起点:
可选值:left/center/right    top/bottom/center  或者直接写X,Y轴坐标点。
例如transform:rotate(180deg)
transform-origin:right bottom;
表示从左下角旋转180度
transition属性:参与过度的的属性:可以单独指定某个css属性,也可以all,none
过渡开始到过渡完成的时间,.3 .5 ;
过度的样式函数 常选ease
过渡开始的延迟时间,可以省略;
transition属性可以同时定义多个过渡效果,用逗号分隔
例如:transition:color .3 ease,border .5s linear;
加在hover上,当鼠标离开时会瞬间停止变化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368497.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Gradle的简单Spring MVC Web应用程序

除了我们现在将使用Spring MVC而不是原始servlet之外,该文章将与我们以前的文章Simple Gradle Web Application相似。 使用Gradle运行基本的Spring MVC应用程序确实很容易。 您可以在Github上下载本教程的源代码。 先决条件 安装Gradle 我们的基本项目结构将是&am…

tps波动很大的原因_花生价格小幅上涨,要突破6元大关?粮贩:还有很大距离...

花生是一种重要的油料作物,虽然并不是全国都种植,但在黄淮、长江流域,西北和东北等地区,均广泛种植,近期花生价格一直是农民朋友的关注点,从今年花生价格来看,自从花生上市后,价格起…

python—内置函数-字符串,eval,isinstance

eval() 功能:将字符串str当成有效的表达式来求值并返回计算结果。 语法: eval(source[, globals[, locals]]) -> value 参数: source:一个Python表达式或函数compile()返回的代码对象 globals:可选。必须是dictiona…

html css 基础(标签选择,分页,行和块元素)

&#xff08;1&#xff09;html标签选择 1、<a></a> 的功能有连接&#xff0c;下载&#xff0c;锚点 2、<span></span> 用来区分字体样式&#xff0c;<strong></strong>和<em></em>用来强调某段文字 3、如果是描述性的某段…

正确退出activity_如何退出Activity

如何退出Activity&#xff1f;如何安全退出已调用多个Activity的Application&#xff1f;对于单一Activity的应用来说&#xff0c;退出很简单&#xff0c;直接finish()即可。当然&#xff0c;也可以用killProcess()和System.exit()这样的方法。但是&#xff0c;对于多Activity的…

win主机ping不通linux的IP

1.虚拟机的中的linux系统设置成桥接模式 2.点击虚拟机的编辑选择虚拟网络编辑器 3.点击更改设置 4点击还原默认设置即可 转载于:https://www.cnblogs.com/yvanBk/p/9156972.html

使用LDAP保护Java EE6中的Web应用程序

在上一篇文章中&#xff0c;我们解释了如何在通过传输层安全性&#xff08;TLS&#xff09;/安全套接字层&#xff08;SSL&#xff09;传输数据时保护数据。 现在&#xff0c;让我们尝试了解如何为使用LDAP服务器进行身份验证的基于JEE 6的Web应用程序应用安全机制。 目的&…

围城---一段不错的观后感

世上有多少方鸿渐&#xff0c;年轻的时候骄傲自诩不凡&#xff0c;在最好的时段被大家包容吹捧&#xff0c;但迟早社会会揭开你的面具&#xff0c;发现下面的你软弱无能&#xff0c;假的文凭&#xff0c;一般的家世&#xff0c;不中用的傲气&#xff0c;你看不上爱耍小聪明的苏…

了解动态代理:Spring AOP基础

为什么选择AOP&#xff1a; 要了解AOP&#xff08;面向方面​​的编程&#xff09;&#xff0c;我们需要了解软件开发中的“横切关注点”。 在每个项目中&#xff0c;都有一定数量的代码在多个类&#xff0c;多个模块中重复执行&#xff0c;例如几乎所有类和所有模块都需要记录…

设计模式(二十二)------23种设计模式(14):解释器模式

使用频率&#xff1a;★☆☆☆☆ 一、什么是解释器模式 定义一些语法规则&#xff0c;然后定义一个解析器去解析该语法&#xff1b; 所谓解释器模式就是定义语言的文法&#xff0c;并且建立一个解释器来解释该语言中的句子。 在这里我们将语言理解成使用规定格式和语法的代码。…

7 win 卸载node_node怎么卸载?Windows卸载node方法

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;很多开发的朋友都在电脑上安装了node&#xff0c;那么如何卸载呢&#xff1f;很多用户可能不是很清楚&#xff0c;并且要卸载干净无残留&#xff0c;下面一起来看看小编分享的方法吧。Node卸载步骤如下&am…

使用jclouds库在Amazon S3上上传

在Java世界中&#xff0c;有几种将内容上载到S3存储桶的好方法–在本文中&#xff0c;我们将研究jclouds库为此提供的功能。 要使用jclouds –特别是本文中讨论的API&#xff0c;应将这种简单的Maven依赖项添加到项目的pom中&#xff1a; <dependency><groupId>or…

【HTML】前端性能优化之CDN和WPO的比较

CDN通过将资源存储在更接近用户的位置&#xff0c;缩短到服务器的往返行程&#xff0c;加快页面加载时间来解决性能问题。WPO解决方案&#xff0c;如Radware的FastView&#xff0c;则在前端进行性能提升处理&#xff0c;使页面更有效地呈现在浏览器中。 “我已经使用了内容交付…

python自动化测试-D1-学习笔记之二

Jmeter 一、Jmeter连接数据库 1、打开Jmeter&#xff0c;在Jmeter—测试计划中添加mysql的jar包&#xff0c;见如下截图&#xff1a; 2、添加好jar包后&#xff0c;添加jdbc&#xff0c;并进行设置&#xff0c;如下图 3、添加JDBC Request&#xff0c;然后在JDBC Request中操作…

Android View 的滑动

一、View 的简介 View是所有可视化控件的基类&#xff0c;我们平时接触的所有的控件&#xff0c;比如说TextView,Button 等等都继承于View。View是Android 在视觉上的呈现&#xff0c;是界面层控件的一种抽象&#xff0c;可以是单个控件也可以是一组控件。 二、坐标系 1、Andro…

ActiveMQ消息优先级:工作原理

关于ActiveMQ的消息优先级支持 &#xff0c; 邮件列表上通常会不断出现一些问题&#xff0c;以及有关观察到的行为和“真正支持什么”的好问题&#xff1f; 我希望可以帮助您了解幕后情况以及可以支持的优先级。 详细信息可能会有些麻烦。 如果您对这些细节不感兴趣&#xff0c…

flask 检测post是否为空_使用Flask搭建一个校园论坛-4

在上一节中完成了注册功能的前期准备工作&#xff0c;在这一节内容中将完成用户注册、登录功能。1.知识预览在本届中将学习到以下内容的知识如何使用wtform来渲染表单如果使用flask-mail来发送邮件2.用户注册在前端中form表单是用的比较多的东西&#xff0c;我们可以使用wtform…

SQL Table 自动生成Net底层-生成数据操作Repository

生成接口类 public static string DataTableToBaseIService(string tableName, string nameSpace, string className){var table SqlTableHelper.GetSQLTableInfo(tableName);StringBuilder reval new StringBuilder();reval.AppendFormat(" using System; using…

CSS3扁平化Loading动画特效

效果预览&#xff1a;http://hovertree.com/texiao/css3/42/ 代码如下&#xff1a; <!doctype html><html><head><meta charset"utf-8"><title>css3旋转加载效果_何问起</title><style>body {background: #263238;backgro…

自定义Spring命名空间使JAXB更容易

首先&#xff0c;让我大声说出来&#xff1a; Spring不再是XML繁重的了 。 事实上&#xff0c;如今&#xff0c;您可以使用大量注释&#xff0c; Java配置和Spring Boot来编写几乎没有XML或根本没有XML的Spring应用程序。 认真地停止谈论Spring和XML&#xff0c;这已经成为过去…