position相关知识
-
CSS 中 position 的 containing block这是 CSS-the complete guide 的学习笔记Position: fixed这种情况,containing block 是 viewport。Position: absolutecontaining block 是离当前对象最近的并且 position 不是 static 的 ancestor。如果当前对象设置某属性的值是百分比,则相对的是 containing block 的(content + padding)。Position: static 和 relativecontaining block 是最近的 ancestor(必须是 block element),如果当前对象设置某属性的值是百分比,则相对的是 containing block 的(content)。作者:saronic链接:https://www.jianshu.com/p/809a545e4f2c
-
position定位position属性用来规定元素的定位类型。属性值描述absolute生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。fixed生成绝对定位元素,相对于浏览器窗口进行定位relative生成相对定位元素,相对于其它正常位置进行定位static默认值,没有定位,元素出现在正常的流中inherit规定应该从父元素继承position属性的值注意绝对定位或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位会相对于它在流中的默认位置偏移。static情况下,忽略top,bottom,left,right,z-index声明。应用场景absolute相对于父级元素右对齐h2.pos_abs{position:absolute;right:0px;top:150px}fixedDialog浮层.dislike-bg{ display: none; position: fixe
-
详解CSS position属性原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性,本文将从最基础的知识讲起,谈谈关于positon属性的一些理论与应用。 基础知识 postion属性
-
《css定位 position》课程手记概述 这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三种布局:标准流,浮动,定位 两大元素:块级元素(div,h1-6,table,ol,ul,li,p),内联元素(a,span,img,input) position可选参数 static(标准流中正常排列) relative(相对定位) absolute(绝对定位) fixed(脱离正常的文档流,登录弹窗,内联广告,不受制于父元素) inherit(继承父元素的position
position相关课程
-
oeasy教你玩转css禅意花园 本课程使用css设计领域最经典的例子禅意花园来学习css实战,36个设计让您彻底了解css的方方面面。从设计入手到精通界面,是成为优秀网页设计师的快速路径。
讲师:Oeasy 初级 47891人正在学习
position相关教程
- 1.2 网页中的 position position,英文较好的同学们或许早已明白,它的中文译为位置。在网页设计中,它是很多元素都有的一个属性,那么这个属性有哪些可能的值?这一点我们要有个基本的认知:static首先,我们来了解它的默认值 static。static 是静态的,静止的意思。所有支持 position 属性的 HTML 元素在一上来的属性值都是这个值 static。它是一个默认值,在网页设计中可不是说这个元素的位置是静止的,而是说明这个元素是没有定位的。 元素会按照它不设置任何定位的时候的模样展示。具体的模样在这里不做详细说明,后面我们会有更深入的课程讲解。absolute其次,我们来看几个position属性常见的取值。第一个是 absolute ,它的意思是绝对定位,当一个元素的 position 属性的值为 absolute 的时候,意味着它是一个采用绝对定位的元素。 也就是我们本节1.1 中描述的第二种定位方式。大多数情况下,这种设置下元素的位置是通过上,下,左,右属性进行的定位的。fixed第二个常见的值就是 fixed ,当元素的 position 属性被赋予 fixed 的值后,元素和 absolute 一样,也是一个绝对定位的元素。定位方式也完全一致,即通过上下左右来实现自己的定位。但同学们肯定会有疑问:那么 absolute 和 fixed 两种设置有什么区别呢。这里就要重点提一下:二者的区别是在定位的时候参照的东西不同。 absolute 定位的方式是相对于 static 定位以外的第一个父元素进行定位的。而 fixed 指的是相对于浏览器窗口进行的定位。但同学们仍旧不要忘了它们都是绝对定位的方式。relative第三个常见的值就是 relative ,这个是我们第一个见到的相对定位取值吧,也就是 1.1 中描述的第一种定位方式。这种定位的方式呢,往往是相对于正常位置去定位,也会用到上下左右来辅助定位。好了,以上的介绍呢就是我们在这个小节中关于 position 定位的介绍。由于多数是给大家总结干货,就少了些详细的内容,大家如果想今后学习更详细的内容,请大家去相关标准的官网去下载相应的文档,那里面会有最全面,最标准的介绍。同时在这里,老师也要提醒大家,官方文档固然官方,但毕竟学习的出,远大于学习的入,大家做出来的样式才算大家所学,文档上的知识没有必要逼迫自己填鸭式全部记住,也不可能记住。把文档当工具,才是学习这一门学问的正常现象。
- 1. 定义条形雪碧图动画 /* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(无限) */ animation: loading .6s step-end infinite;}/* 定义动画:动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标,第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标:-130 y坐标:0 */ 20% { background-position: -260px 0 } /* x坐标:-260 y坐标:0 */ 30% { background-position: -390px 0 } /* x坐标:-390 y坐标:0 */ 40% { background-position: -520px 0 } /* x坐标:-520 y坐标:0 */ 50% { background-position: 0 -130px } /* x坐标:0 y坐标:-130 */ 60% { background-position: -130px -130px } /* x坐标:-130 y坐标:-130 */ 70% { background-position: -260px -130px } /* x坐标:-260 y坐标:-130 */ 80% { background-position: -390px -130px } /* x坐标:-390 y坐标:-130 */ 90% { background-position: -520px -130px } /* x坐标:-520 y坐标:-130 */ to { background-position: 0 } /* 最后一帧不显示,可以随便写 */}/* 定义动画:动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}咦?条形图只需要定义两行?一个from一个to???是的,这就是为什么推荐制作雪碧图的时候做成一行的原因。你只需要定义一开始的时候图像在原点,然后最后的时候图像有多宽,你就写负多少:这个图是2600像素,所以to里面的background-position就是 -2600px。数了一下这张雪碧图里面一共有 12 个元素,所以 steps() 括号里面要写12。div 盒子的宽高应该正好和雪碧图里面的一个元素的宽高相对应:用雪碧图的 宽 2600 除以 12 等于 216.666… 无限循环。咱们取一个近似值,就 216px 吧。所以宽高设置为 216 * 300,怎么设置呢?要让加载动画结束之后(也就是定义加载动画的最后一帧)div 就变成这个宽高。/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(无限) */ animation: loading .6s step-end infinite;}/* 定义动画:动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标,第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标:-130 y坐标:0 */ 20% { background-position: -260px 0 } /* x坐标:-260 y坐标:0 */ 30% { background-position: -390px 0 } /* x坐标:-390 y坐标:0 */ 40% { background-position: -520px 0 } /* x坐标:-520 y坐标:0 */ 50% { background-position: 0 -130px } /* x坐标:0 y坐标:-130 */ 60% { background-position: -130px -130px } /* x坐标:-130 y坐标:-130 */ 70% { background-position: -260px -130px } /* x坐标:-260 y坐标:-130 */ 80% { background-position: -390px -130px } /* x坐标:-390 y坐标:-130 */ 90% { background-position: -520px -130px } /* x坐标:-520 y坐标:-130 */ /* 修改最后一帧,以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 216px; height: 300px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); }}/* 定义动画:动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}
- 3. 调节雪碧图尺寸 不过感觉最后这个跳动的卡通小人还是有点大,像素颗粒感明显,所以我们绝定缩小一下加载动画最后一帧给定的宽高:/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(3次) 填充模式(双向) */ animation: loading .6s step-end 3 both, /* 动画可以定义多个,每个动画用逗号分隔。*/ /* 第二个动画的动画名(animate) 时长(0.8秒) 运行方式(step-end) 延时(1.8秒) 动画次数(无限) */ animate .8s steps(12) 1.8s infinite;}/* 定义动画:动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标,第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标:-130 y坐标:0 */ 20% { background-position: -260px 0 } /* x坐标:-260 y坐标:0 */ 30% { background-position: -390px 0 } /* x坐标:-390 y坐标:0 */ 40% { background-position: -520px 0 } /* x坐标:-520 y坐标:0 */ 50% { background-position: 0 -130px } /* x坐标:0 y坐标:-130 */ 60% { background-position: -130px -130px } /* x坐标:-130 y坐标:-130 */ 70% { background-position: -260px -130px } /* x坐标:-260 y坐标:-130 */ 80% { background-position: -390px -130px } /* x坐标:-390 y坐标:-130 */ 90% { background-position: -520px -130px } /* x坐标:-520 y坐标:-130 */ /* 修改最后一帧,以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 108px; height: 150px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); }}/* 定义动画:动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}注意:宽高一定要按比例缩小,不能宽缩小三分之一,高缩小一半。要宽和高都同时缩小一半才能保持住比例。运行结果:看起来怎么和咱们预想中的效果不太一样呢?因为盒子缩小了一半,但是雪碧图却并没有缩小,那么大家还记得之前的章节中我们讲过的如果雪碧图尺寸不吻合时怎么办吗?对没错!(大概率是不记得了)就是background-size: cover;/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(3次) 填充模式(双向) */ animation: loading .6s step-end 3 both, /* 动画可以定义多个,每个动画用逗号分隔。*/ /* 第二个动画的动画名(animate) 时长(0.8秒) 运行方式(step-end) 延时(1.8秒) 动画次数(无限) */ animate .8s steps(12) 1.8s infinite;}/* 定义动画:动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标,第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标:-130 y坐标:0 */ 20% { background-position: -260px 0 } /* x坐标:-260 y坐标:0 */ 30% { background-position: -390px 0 } /* x坐标:-390 y坐标:0 */ 40% { background-position: -520px 0 } /* x坐标:-520 y坐标:0 */ 50% { background-position: 0 -130px } /* x坐标:0 y坐标:-130 */ 60% { background-position: -130px -130px } /* x坐标:-130 y坐标:-130 */ 70% { background-position: -260px -130px } /* x坐标:-260 y坐标:-130 */ 80% { background-position: -390px -130px } /* x坐标:-390 y坐标:-130 */ 90% { background-position: -520px -130px } /* x坐标:-520 y坐标:-130 */ /* 修改最后一帧,以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 108px; height: 150px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); /* 雪碧图的最短边(这里是高)刚好能够覆盖住盒子 */ background-size: cover; }}/* 定义动画:动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}运行结果:
- 3.3 适配器的编写 适配这一块主要就是对四个回调接口的实现,其实在第 2 小节的描述中已经展示了各个方法的实现方式。package com.emercy.myapplication;import android.view.View;import android.view.ViewGroup;import androidx.annotation.NonNull;import androidx.viewpager.widget.PagerAdapter;import java.util.List;public class MyAdapter extends PagerAdapter { private final List<View> mView; public MyAdapter(List<View> view) { mView = view; } @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { container.addView(mView.get(position)); return mView.get(position); } @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView(mView.get(position)); } @Override public int getCount() { return mView.size(); } @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return view == object; }}
- 1. 调用动画 定义好了就可以去调用了,来看一下怎么调用:/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(无限) */ animation: loading .6s step-end infinite;}/* 定义动画:动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标,第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标:-130 y坐标:0 */ 20% { background-position: -260px 0 } /* x坐标:-260 y坐标:0 */ 30% { background-position: -390px 0 } /* x坐标:-390 y坐标:0 */ 40% { background-position: -520px 0 } /* x坐标:-520 y坐标:0 */ 50% { background-position: 0 -130px } /* x坐标:0 y坐标:-130 */ 60% { background-position: -130px -130px } /* x坐标:-130 y坐标:-130 */ 70% { background-position: -260px -130px } /* x坐标:-260 y坐标:-130 */ 80% { background-position: -390px -130px } /* x坐标:-390 y坐标:-130 */ 90% { background-position: -520px -130px } /* x坐标:-520 y坐标:-130 */ to { background-position: 0 } /* 最后一帧不显示,可以随便写 */}为了能够让同学们在浏览器里直接看结果,我们这里写了一个可运行的案例:910运行结果: ![图片描述](//img1.sycdn.imooc.com//wiki/5eda04590a708f6c01650135.jpg) 可以看到效果就已经很完美的呈现出来了,那么接下来我们再来添加一下条形雪碧图,看看条形雪碧图的用法有何不同。
- 4. 重新调整速度 尺寸的问题是解决了,怎么速度又不对了?原来是因为雪碧图缩小了一半,所以现在的宽只有 1300 px了。可是我们定义的动画是 -2600 px,于是乎动画在相同的时间移动了 2 倍的距离,看起来就会导致速度加快。解决办法也很简单,把定义的动画距离也同比例缩小:/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(3次) 填充模式(双向) */ animation: loading .6s step-end 3 both, /* 动画可以定义多个,每个动画用逗号分隔。*/ /* 第二个动画的动画名(animate) 时长(0.8秒) 运行方式(step-end) 延时(1.8秒) 动画次数(无限) */ animate .8s steps(12) 1.8s infinite;}/* 定义动画:动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标,第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标:-130 y坐标:0 */ 20% { background-position: -260px 0 } /* x坐标:-260 y坐标:0 */ 30% { background-position: -390px 0 } /* x坐标:-390 y坐标:0 */ 40% { background-position: -520px 0 } /* x坐标:-520 y坐标:0 */ 50% { background-position: 0 -130px } /* x坐标:0 y坐标:-130 */ 60% { background-position: -130px -130px } /* x坐标:-130 y坐标:-130 */ 70% { background-position: -260px -130px } /* x坐标:-260 y坐标:-130 */ 80% { background-position: -390px -130px } /* x坐标:-390 y坐标:-130 */ 90% { background-position: -520px -130px } /* x坐标:-520 y坐标:-130 */ /* 修改最后一帧,以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 108px; height: 150px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); /* 雪碧图的最短边(这里是高)刚好能够覆盖住盒子 */ background-size: cover; }}/* 定义动画:动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -1300px }}运行结果:911
position相关搜索
-
pack
package
package文件
padding
pages
page对象
panda
panel
panel控件
param
parameter
parcel
parent
parentnode
parents
parse
parse error
parseint
partition
pascal