Css中的布局样式和过渡变行方法

这篇“CSS中的布局样式和过渡变行方法”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Css中的布局样式和过渡变行方法”文章吧。

1. 定位方式position

static：默认,元素为普通元素,文档流定位,从上到下

relative(相对的):元素的位置是相对于普通的位置定位的 ,位移之前的位置 其他元素用不了,一般不做太大的改动 ,对某个元素位置进行微调 ,只能使用top,left 我感觉他是相对于他之前的位置移动的

fixed(固定的)：相对于浏览器窗口来定位 ,位移之前位置不会被占用, 上下左右都可以使用, 小广告常用手法, 滚动条不断移,他的位置也不变 ,他会脱离文档流,漂浮于文档流上边,他这个上下左右是相对于边的位置,比如:top50px 不是向上移动50px ,而是元素相对于顶部边框距离50px 设置buttom也同样可以使用,而且拉动滚动条也不会变化位置

absolute(绝对的)：元素相对position值不为static的一个祖先元素定 子元素依据祖先元素变化 祖先元素不能为static 依据谁变化,谁不可以为static(默认为static),发生在父子 或 祖先元素与后代元素之间的位移定位

2. 定位布局

top/bottom/left/right

3. z-index

用来设置元素 和 元素 的显示层数,正数 负数 都可以

必须配合position使用

过渡,变形

1. 过渡

过渡:元素由一种样式逐渐变为另一种样式

属性:

transition-delay:设置过渡前的延时

transition-duration:设置过渡用时

transition-property:设置过渡参与的属性

transition-timing-function:过渡速率(linear匀速)

transition:简写形式(property duration timing-function delay)

反向过渡:

hover中设置的,粘贴到div中,就可以了

2. 变形

transfORM: 指定如何变形

transform: scaleX/Y(1.5) 缩放1.5倍

transform: rotate(360deg) 旋转360度 deg代表度数,配合过渡时间 效果很好

transform: skew(X轴角度,Y轴角度) 倾斜的角度

transform: translate(X轴距离,Y轴距离) 移动的距离

以上就是关于“Css中的布局样式和过渡变行方法”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网node.js频道。