Web前端学习整理(九)

定位

用于控制元素在网页中的位置,通过定位属性可以改变元素在文档流的文职,实现更加精确的布局效果,常用的有:static|relative|absolute|fixed

---

定位属性

static:默认定位,元素按照正常的文档流来进行布局,没有特殊的定位效果

relative:相对定位使元素相对于其正常的位置进行定位,不会影响其他元素的布局

absolute:绝对定位使元素相对于其最近的非static定位的父元素进行相关定位,绝对定位会从正常的文档流脱离,不占据布局空间

fixed:固定定位使元素相对于浏览器窗口进行定位,即使页面滚动,元素也会固定在指定的位置

设置定位之后即可使用left|top|right|bottom来进行设置,默认以left和top为准

---

层级关系

定位元素之间,如果出现了覆盖问题,越到后面的元素优先级越高,可以使用z-index来调整元素的优先级

---

元素居中

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

---

过渡

过渡和动画用于在css中实现元素属性的平滑变化和动态效果

transition

通过指定过渡的第一帧和最后一帧可以使用transition来自动生成中间的动画帧

transition: 过渡属性 过渡时长 速度曲线 延迟时长

需要注意,过渡属性默认值为all,即全部的属性都会被添加过渡

---

动画

css中通过animation设定相关动画,但在使用动画之前,需要设置相关的动画效果

通过@keyframes来设置动画关键帧,

并通过animation:名称   时间 曲线 延时  执行次数  播放方向  循序; 在相关元素中设置动画效果