1、定位
组成:(1)定位模式
定位模式用于指定一个元素在文档中的定位方式
开启定位
选择器{
position:定位模式
}
静态定位
div{
position: static;
}
特点:静态定位 按照标准流特性摆放位置,它没有边偏移。
相对定位
div{
position: relative;
}
1.元素开启相对定位以后,如果不设置偏移量元素不会发生任何变化
2.相对定位会提升元素的层级。
3.相对定位不会使元素脱离文档流。
4.相对定位不会改变元素的性质块还是块,行内还是行内。
参照位置:相对定位是参照于元素本身在文档流中的位置进行定位的。坐标参考系是以自己的位置(x,y)作为原点(0,0)。
绝对定位
div{
position: absolute;
}
1.开启绝对定位后,如果不设置偏移量元素的位置不会发生变化。
2.开启绝对定位后,元素会从文档流中脱离。
3.绝对定位会改变元素的性值,行内变成块,块的高度被内容撑开的。
4.绝对定位会使元素提升一个层级。
参照位置:绝对定位是相对于元素最近的已定位的祖先元素,如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(也就是body)
固定定位
div{
position: fixed;
}
1.固定定位也是一种绝对定位,所以固定定位的大部分特点都和绝对定位一样。
2.固定定位不占有原先位置,脱离标准流。
3.固定定位的元素不会随网页的滚动条滚动。
参照位置:以浏览器的可视窗口为参照点移动元素。
粘滞定位
div{
position: sticky;
}
1.粘滞定位和相对定位的特点基本一致。
2.粘性定位占用原有的位置
3.不同的是粘滞定位在元素到达某一个位置时就将其固定。
(2)偏移量
偏移量
偏移量则决定了该元素的最终位置
top:定位元素和定位位置上边的距离
bottom:定位元素和定位位置下面的边距
left:定位元素和定位位置左侧距离
right:定位元素和定位位置右侧距离
2、过渡
过渡
语法规则
选择器{
transition:property duration timing-function delay
}
tansition属性实现简单的动画效果
duration:定义过渡效果花费的时间
time值:以秒或毫秒计,默认是0,意味着没有任何效果
property:规定应用过渡的CSS属性的名称
none:没有属性会获得过渡效果
all:默认值,所有属性获得过渡效果
property:定义 应用过渡效果的CSS属性名称列表
timing-function:规定过渡效果的时间曲线
linear:规定以相同速度开始至结束的过渡效果
ease:规定慢速开始,然后变快,然后慢速结束的过渡效果
ease-in:规定以慢速开始的过渡效果
ease-out:规定以慢速结束的过渡效果
ease-in-out:规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值
delay:规定开始之前需要等待的时间
time值:以秒或毫秒计,默认是0
transition属性是一个复合属性,主要包含property、duration、timing-function、delay等子属性
3、变形
变形
语法规则
选择器{
transform:none | transiform-functions
}
rotate(angel):旋转元素(Angel是度数值,代表旋转角度)
skew(x-angel,y-angel):倾斜元素
skewX(angel):沿着X轴倾斜
skewY:沿着Y轴倾斜
scale(x,y):缩放元素,改变元素的高度和宽度
scaleX:改变元素的宽度
scaleY:改变元素的高度
translate(x,y):移动元素对象,基于x和y坐标重新定位元素
translateX(x):沿着x轴移动元素
translateY(y):沿着Y轴移动元素
tansform-functions:用于设置变形函数,可以是一个或多个变形函数列表
4、动画
关键帧语法规则
@keyframes animationname{
keyframes-selector{css-style}
}
animation属性,用于设置动画的名称、时间、时间曲线等属性,它是一个复合属性。
选择器{
animation:name duration timing-function
delay iteration-count
}
animation-name:规定@keyframes动画的名称
keyframe name:规定需要绑定到选择器的keyframe的名称
none:规定无动画效果(可用于覆盖来自级联的动画)
animation-duration:规定动画完成一个周期所花费的时间
time值:以秒或者毫秒计算,默认是0
animation-timing-function:规定过渡效果的时间曲线
linear:规定以相同速度开始至结束的过渡效果
ease:规定慢速开始,然后变快,然后慢速结束的过渡效果。
ease-in:规定以慢速开始的过渡效果
ease-out:规定以慢速结束的过渡效果
ease-in-out:规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值
animation-delay:规定开始之前需要等待的时间
time值:以秒或毫秒计,默认是0
animation-iteration-count:规定动画播放的次数
n:定义动画播放次数的数值,默认为1
infinite:规定动画应该为无限次播放
animationname是当前动画的名称
keyframes-selector:是关键帧选择器
css-style:当前关键帧的动画状态