部分CSS-复习

vertical-align

惯性回弹

样式作用于标签上。

.elem {
    transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
}

button

• 去掉 button 的边框

button {
    width: 150rpx;
    height: 52rpx;
    &:after {
        border: 0;
    }
}

object-fit

1、对图片进行剪切，保留原始比例。
2、指定元素的内容应该如何去适应指定容器的高度与宽度。
3、一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例对剪切、缩放或者直接进行拉伸等。

• fill：默认不保证保持原有等比例，内容拉伸填充整个内容容器。
• contain：保持原有尺寸比例。内容被缩放。
• cover：保持原有尺寸比例。单部分内容可能被剪切。
• none：保留原有元素内容的长度和宽度，也就是说内容不会被重置。
• scale-down：保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于他们两个之间谁得到的对象尺寸会更小一些。
• initial：设置为默认值。
• inherit：从该元素的父元素继承属性。

transform

1、应用与元素的2D或3D转换。
2、允许将元素进行旋转、缩放、移动、倾斜等。

常用属性

• rotateY(angle)：沿着Y轴等3D旋转。
• rotateX(angle)：沿着X轴等3D旋转。

filter

1、定义类元素(通常是 img )等可视效果。
2、修改所有图片等颜色为黑白（100%灰度）。

常用属性

• blur(px)：给图像设置高斯模糊。radius 值设定高斯函数等标准差，或者是屏幕哈桑以多少像素融在一起，所以值越大与模糊。如果没有设定值，则默认是0；这个参数可设置 css 长度值，但不接受百分比值。

animation

动画属性

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

// animation: scroll 100000ms linear 0s infinite;
// name
// duration 动画指定需要多少秒或毫秒完成
// timing-function 指定动画将如何完成一个周期: linear 匀速
// delay 设置动画在启动前的延迟间隔: 0s开始
// iteration-count 定义动画的播放次数: infinite 无限次
// direction 指定是否应该轮流反向播放动画: normal 正常播放
// fill-modeiteration 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式: forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
// play-state 指定动画是否正在运行或已暂停: running 指定正在运行的动画
animation: scroll 100000ms linear 0s infinite normal forwards running;

transition

过渡

伪元素

• :before：在元素/类的内容之前插入新内容。一般在伪元素中使用 content 属性设置内容。可以当作普通元素进行属性设置。
• :after：在元素/类的内容之后插入新内容。一般在伪元素中使用 content 属性设置内容。可以当作普通元素进行属性设置。

伪类

• p:nth-child(n)：选中 p 元素的父元素下的第 n 个子元素，并且是当前元素类型才生效。
• p:nth-of-type(n)：选中 p 元素的父元素下的第 n+1 个子元素，并且规定是当前元素类型。
• ul li:first-child：ul 的第一个子元素。依据顺序。
• ul li:last-child：ul 的最后一个子元素。依据类型。

background

background:color image image-position tile-method; 颜色，图片地址，图片位置(x,y)，平铺方式。

多行省略

overflow: hidden; //一定要写  超过控制行数后隐藏文本
text-overflow: ellipsis; //超出第一行省略号
display: -webkit-box; //一定要写
-webkit-line-clamp: 1; //控制行数
-webkit-box-orient: vertical; //一定要写

text-decoration

设置文本修饰

使用css设置背景图

width: 100%;
height: 100%;
background-image: url(https://s.3img.com/jt/ap.png?ExD);
background-size: 100% 100%;
background-repeat: no-repeat;

将图片设置成灰色

.gray {
	-webkit-filter: grayscale(50%);
	-moz-filter: grayscale(50%);
	-ms-filter: grayscale(50%);
	-o-filter: grayscale(50%);
	filter: grayscale(50%);
	filter: rgba(0, 0, 0, 0.5);
}

多行省略定义函数

// 多行超长省略号
@mixin moreline-ellipsis($line: 2, $width: 100%) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
    overflow: hidden;
    word-break: break-all;
}

// 1行省略
@include moreline-ellipsis(1);

背景设置模糊，但文字清晰度不变

background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(50px); // 模糊50px
-webkit-backdrop-filter: blur(50px);

切换导航时，请求接口时，页脚会出现又消失，就会闪一下

// 页面添加最小高度
min-height: 800px;

滚动到顶部

// 设置页面滚动高度
export const setPageScorllTop = (top = 0) => {
    // 获取具有特定类名的元素
    const element = document.querySelector('.index-page__main-container')
    // 设置该元素滚动到最顶部
    element.scrollTop = top
}