1.关于背景图片以及路径裁剪
.header {
height: 95vh;
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)), url("../img/hero.jpg");
background-size: cover;
background-position: top;
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}
2.通过css完成text的英文大小写切换
text-transform: uppercase;
3.修改文字之间的间隔间距
letter-spacing: 35px;
4.animation
animation: moveInLeft;
animation-duration: 2s;
/*animation-timing-function: ease-in; 动画运行方式 */
/*animation-delay: 3s;*/
/*animation-iteration-count: 3; 动画可以发生的次数 */
@keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
80% {
transform: translateX(10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
5.解决动画结束后会有一个小小向上移动的效果（只知道用这个可以消除影响）
backface-visibility: hidden;
6.动画设置
animation-fill-mode: backwards;
7.flex-direction：colunm 使用惨剧
<script setup lang="ts">
import {ref} from "vue";
const isExpend=ref(false)
const clickButtonHandle=()=>{ isExpend.value=!isExpend.value }
</script>
<template>
<div :class="[isExpend===true?'expend':'']" style="display: flex;flex-direction: column;height: 200px;width: 200px;background-color: yellow;transition: height 2s" >
<!-- 图表 -->
<div style="background-color: black">
<div style="height: 100%;width: 100%;background-color: blue">
<span>123</span>
</div>
<div style="height: 100%;width: 100%;background-color: red">
<span>123</span>
</div>
</div>
</div>
<div> <button @click="clickButtonHandle">点击</button>
</div>
</template>
<style scoped lang="scss">
.expend { height: 0 !important; }
</style>
外层 div 高度为 0 时
- 当外层
div高度为0时，内部div元素的高度为100%是相对于其父元素计算的。然而，如果父元素高度为0，内部div理论上应该也是0。 - 但是，浏览器在处理
flex布局时，可能会根据内容进行布局调整，而不是完全遵循height: 100%的规则。
flex-direction: column
- 当使用
flex-direction: column时，子元素会根据其内容进行布局调整，即使父元素高度为0。 - 浏览器可能会忽略
height: 0的情况，保持子元素的内容可见性。
flex-direction: row
- 当使用
flex-direction: row时，子元素会按照水平方向进行排列，并且高度会严格按照父元素的高度进行继承。 - 在这种情况下，如果父元素高度为
0，子元素的高度也会是0。
8.在calc中使用sass变量要用#{}包裹
width: calc((100% - #{$gutter-horizontal}) / 2);
9.perspective 属性应用于包含需要 3D 转换的子元素的父元素。通过定义父元素的透视距离，所有子元素的 3D 转换都会遵循这个透视效果。
perspective: 150rem;
-moz-perspective: 150rem;
10.background-blend-mode
background-blend-mode: screen;
background-image: url("../../img/nat-5.jpg"), linear-gradient(to right bottom, $color-secondary-light, $color-secondary-dark),;
11.-webkit-box-decoration-break: clone; /* 使用 -webkit- 前缀 */
box-decoration-break 属性有两个主要值：
- slice：这是默认值。装饰效果（如背景、边框）将在元素的所有片段之间平滑地延续，就像它们是一个连续的盒子一样。
- clone：装饰效果将在每个片段的起点和终点重新开始。每个片段将被视为一个独立的盒子，分别应用装饰效果。
默认情况下，当行内元素跨越多行时，其背景、边框等样式会在每行的开始和结束处被裁剪，这可能导致视觉效果的不连续。然而，使用box-decoration-break属性，可以改变这种默认行为，确保在跨行、跨列或跨页时，元素的样式能够保持连续性和一致性。
12.figure标签的作用？？
<figure></figure>
13.浮动布局需要复习
14.shape-outside
-webkit-shape-outside
-webkit-shape-outside 是一个 CSS 属性，用于指定围绕一个浮动元素的内容流动的形状。这种形状可以是一个路径、一个图像的透明部分或基本几何形状。该属性主要用于增强视觉效果，使得文本和其他内容能够更自然地环绕图像或自定义形状。
使用场景
- 创建图文混排效果：在网页设计中，常用
shape-outside和float来创建更具吸引力和灵活性的图文混排效果。 - 增强视觉效果：通过定义复杂的形状，可以使网页设计更加独特和吸引人。
15.clip-path也可以做自定义形状的裁剪
clip-path
区别总结
-
实现方式不同：
clip-path是通过裁剪元素实现的。border-radius是通过调整元素的圆角边框实现的。
-
应用范围不同：
clip-path更加灵活，可以创建复杂的形状裁剪。border-radius主要用于创建简单的圆形或圆角矩形。
-
影响区域不同：
clip-path会隐藏元素的非裁剪部分，只显示裁剪区域。border-radius只是调整边角的显示效果，不隐藏任何部分。
选择使用
- 如果只是将一个正方形变成圆形，
border-radius: 50%;更简单直接。 - 如果需要创建更复杂的形状或裁剪效果，
clip-path是更好的选择。
16.transform 里面的属性在不同的地方定义不会自动叠加，不会生效
transform
& > * {
transform: skewX(12deg);
}
&__shape {
transform: translateX(-3rem) ;
}
这里的skewX就不会生效
17.大多数浏览器要求视频必须被静音（muted）才能自动播放
这是因为现代浏览器对自动播放视频有严格的限制，以避免自动播放视频给用户带来不良体验。大多数浏览器要求视频必须被静音（muted）才能自动播放。这个限制是为了避免视频在加载页面时未经用户允许就播放声音，打扰用户
18.object-fit
object-fit: cover; 是一个非常有用的 CSS 属性，特别是在处理图像和视频时。它可以控制如何缩放和裁剪元素的内容，以适应其容器，同时保持内容的宽高比
19.background-size和object-fit的区别
object-fit: cover; 和 background-size: cover; 都用于调整元素内容的显示方式，但它们适用于不同的 HTML 元素，并有各自的特性和用途。下面是这两者的区别和使用场景。
object-fit: cover;
适用元素
- 适用于
<img>、<video>、<picture>等媒体元素。
功能
- 控制媒体元素（如图像和视频）如何填充其容器。
object-fit: cover;使媒体元素覆盖整个容器，同时保持其宽高比。可能会裁剪元素的一部分，以确保元素填满整个容器。
background-size: cover;
适用元素
- 适用于背景图像（设置在
background-image属性上）的元素，如<div>、<section>等。
功能
- 控制背景图像如何填充其背景容器。
background-size: cover;使背景图像完全覆盖其容器，同时保持图像的宽高比。背景图像可能会被裁剪，以确保它覆盖整个容器。
20.背景渐进色的用法
background-image:linear-gradient(105deg,rgba($color-white,.9) 0%,rgba($color-white,.9) 50%,transparent 50%), url("../../img/nat-10.jpg");
21.原生input的相关伪类
&__input
&::-webkit-input-placeholder
&:focus:invalid
&:focus
&__input:placeholder-shown
&__radio-input:checked ~ &__radio-label &__radio- button::after {
opacity: 1;
}
22.opacity 和 visibility的区别
opacity: 0;
- 透明度：设置元素完全透明，但仍然占据页面上的空间。
- 交互性：元素仍然可以被点击或接受其他用户交互，因为它实际上还是存在的，只是看不见。
- 布局影响：元素仍然占据其原始位置，并影响周围布局。
visibility: hidden;
- 可见性：完全隐藏元素，使其不可见。
- 交互性：元素不会接受任何用户交互，因为它被隐藏了。
- 布局影响：元素仍然占据其原始位置，并影响周围布局。
23.原生raiod需要定义一样的name这样才会实现单选的功能
24.在 card.scss 文件中使用 background-image: url("../img/"); 能够正确加载图片，是因为 Sass 在编译时会处理路径问题。Sass 会将路径相对于 main.scss 的位置进行解析，因此你只需确保路径的相对关系是正确的。
25.兄弟选择器有联动效果，其他都没有
兄弟选择器可以用于实现元素之间的联动效果。通过使用兄弟选择器，可以根据一个元素的状态或存在，来改变其兄弟元素的样式。这种方式特别适用于交互式设计，例如在复选框选中状态下改变旁边元素的样式等。
普通兄弟选择器 (~)
相邻兄弟选择器 (+)
26. 新接触到的css
column-count: 2;
column-gap: 4rem;
column-rule: 1px solid $color-grey-light-2;
column-count 和 column-gap 是 CSS 多列布局（Multi-column Layout）中的两个属性，用于创建多列布局并控制列之间的间距。这些属性在设计响应式布局时非常有用，特别是在需要将内容分成多个列的情况下。
27.hyphens在单词断层的时候可以有连字符
hyphens: auto;
