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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。