定位、transitions、动画、媒体查询

最新推荐文章于 2025-05-25 21:45:57 发布

pcコンメンット

最新推荐文章于 2025-05-25 21:45:57 发布

阅读量191

点赞数

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/m0_65214572/article/details/126034197

版权

定位布局

-静态定位

默认定位方式。

position:static;

-相对定位

相对于标准流中的位置来移动

position:relative;

用top,right,bottom,left来控制

- 相对定位注意点

相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
在相对定位中同一个方向上的定位属性只能使用一个
由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

- 相对定位应用场景

用于对元素进行微调
配合后面学习的绝对定位来使用

-绝对定位

position:absolute;

-固定定位

position:fixed;

脱离标准流的, 不会占用标准流中的空间；脱离标准流的, 不会占用标准流中的空间

-粘滞定位

position: sticky;

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

-z-index

专门用于控制定位流元素的覆盖关系。默认为0，大的覆盖小的。

flex弹性布局

flex布局属性

容器属性

flex-flow
flex-direction
flex-wrap
justify-content
align-items
align-content

元素属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

flex弹性盒模型

display:flex;设置弹性容器

每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
每根轴都有起点和终点，这对于元素的对齐非常重要。
弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。
弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

主轴

flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。我们可以通过flex-direction改变主轴方向。

flex-direction属性

取值：row(默认) | row-reverse(横向排列·反向) | column(纵向) | column-reverse(纵向排列·反向)

弹性元素永远沿主轴排列，那么如果主轴排不下，通过设置flex-wrap属性可使得主轴上的元素不换行、换行、反向换行。

flex-wrap属性

取值：nowrap(默认) | wrap(自动换行) | wrap-reverse(自动换行·第二行在上)

flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

justify-content属性（横向排布）

justify-content: center; /* 水平居中 */

align-items: center; /* 垂直居中 */

align-items属性

取值：flex-start(紧贴容器顶部) | flex-end(紧贴容器底部) | center(在交叉轴中心位置排列) | baseline(项目以第一行文字的基线为参照进行排列) | stretch(默认)

align-content属性（纵向排布）

order属性

取值：默认为，数值越小，项目排列越靠前

flex-grow属性

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也不会放大。设置1会占满剩余空间，倍数占位。

flex-shrink属性

取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

flex-basis属性

取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性。

flex属性

取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

align-self属性

用于让个别项目拥有与其它项目不同的对齐方式

CSS过渡-Transitions

-过渡三要素

1.1必须要有属性发生变化 1.2必须告诉系统哪个属性需要执行过渡效果 1.3必须告诉系统过渡效果持续时长

-过渡触发

:hover | :active | :focus | @media | :click

-transition-property 规定应用过渡的 CSS 属性的名称

none 没有属性会获得过渡效果。 all 所有属性都将获得过渡效果。 property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔

-transition-duration 定义过渡效果花费的时间。默认是 0

linear 规定以相同速度开始至结束的过渡效果,ease 规定慢速开始。然后变快，然后慢速结束的过渡效果。ease-in 规定以慢速开始的过渡效果。ease-out 规定以慢速结束的过渡效果。 ease-in-out 规定以慢速开始和结束的过渡效果。cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

-transition-delay 规定过渡效果何时开始。默认是 0

time 指定秒或毫秒数之前要等待切换效果开始

transition 是 transition-property， transition-duration，transition-timing-function， transition-delay的速写形式，分别表示过渡属性，持续时间，时间曲线，过渡延迟

Animation动画

过渡与动画之间的异同

不同点过渡必须人为的触发才会执行动画动画不需要人为的触发就可以执行动画

相同点过渡和动画都是用来给元素添加动画的过渡和动画都是系统新增的一些属性过渡和动画都需要满足三要素才会有动画效果

animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画

animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度

linear 匀速 ease 低速->高速->低速 ease-in 低速开始 ease-out 低速结束 ease-in-out 低速开始和结束 cubic-bezier(n,n,n,n)设置速度，值为0-1

animation-delay 设置动画在启动前的延迟间隔。

time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0

animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次

n 一个数字，定义应该播放多少次动画 infinite 无限次执行

animation-direction 指定是否应该轮流反向播放动画。

normal 默认的取值, 执行完一次之后回到起点继续执行下一次 alternate 往返动画, 执行完一次之后往回执行下一次 reverse 反向执行

animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

none: 不做任何改变 forwards: 让元素结束状态保持动画最后一帧的样式 backwards: 让元素等待状态的时候显示动画第一帧的样式 both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

animation-play-state 告诉系统当前动画是否需要暂停

running: 执行动画 paused: 暂停动画

动画模块连写格式

animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);

关键帧： @keyframes animiationName{ keyframes-selector{ css-style; } }