CSS定位机制

2018-06-24 01:06:24来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 
                                                     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上,当鼠标离开时会瞬间停止变化。
 
 
 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:一些常用的meta标签

下一篇:rgba兼容性处理