每日一篇——23秋招CSS面经（3）

何小幸
81 阅读6分钟

每日一篇——23秋招CSS面经（3）

⭐选择器

基本选择器：id class 标签 层次选择器：后代、子代、兄弟、通用 结构选择器：第一个、最后一个、奇数偶数个、伪类、伪元素 属性选择器：属性

⭐animation有哪些属性

CSS 的 animation 属性用于为元素添加动画效果。以下是 animation 属性的一些常用子属性：

1、animation-name: 定义动画的名称。

.animation {
  animation-name: myAnimation;
}

@keyframes myAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

2、animation-duration: 定义动画的持续时间。

.animation {
  animation-name: myAnimation;
  animation-duration: 2s;
}

3、animation-timing-function: 定义动画的时间函数（即动画进度的加速度）。

.animation {
  animation-name: myAnimation;
  animation-timing-function: ease-in-out;
}

4、animation-delay: 定义动画开始之前的延迟时间。

.animation {
  animation-name: myAnimation;
  animation-delay: 1s;
}

5、animation-iteration-count: 定义动画的播放次数，infinite为永不停止。

.animation {
  animation-name: myAnimation;
  animation-iteration-count: 3;
}

6、animation-direction`: 定义动画的播放方向。

.animation {
  animation-name: myAnimation;
  animation-direction: reverse;
}

7、animation-fill-mode: 定义动画在播放之前和之后如何应用样式。

  1. none：默认值，动画不会对元素应用任何样式。在非活动时间段，元素将恢复到初始样式。
  2. forwards：在动画结束后，元素将保持动画结束状态。也就是说，元素将保持在最后一帧的状态。
  3. backwards：在动画开始前，元素将立即应用动画的第一帧样式。这意味着动画开始前的状态会提前被应用。
  4. both：结合了 forwards 和 backwards，在动画开始前和结束后都会应用样式。
.animation {
  animation-name: myAnimation;
  animation-fill-mode: forwards;
}

8、animation-play-state: 定义动画的播放状态。

.animation {
  animation-name: myAnimation;
  animation-play-state: paused;
}

这些是 animation 属性的一些常用子属性，它们可以用来控制动画的各个方面，从而创建出丰富多样的动画效果。使用这些属性可以自定义动画的外观、持续时间、延迟等。要实现动画效果，还需要定义动画的关键帧（@keyframes）规则，包含动画在不同百分比时的样式。

在 CSS 中，可以使用 @keyframes 规则来定义动画的关键帧（即动画的不同阶段）。@keyframes 规则定义了动画的每个关键帧以及相应的样式。

下面是一个使用 @keyframes 定义动画关键帧的示例：

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(200px);
  }
}

在这个例子中，我们创建了一个名为 slide 的动画。通过 @keyframes 规则，我们定义了三个关键帧：0%、50% 和 100%。

  • 在 0% 关键帧，元素的 transform 属性设置为 translateX(0)，即初始状态。
  • 在 50% 关键帧，元素的 transform 属性设置为 translateX(100px)，表示动画进行到一半时的状态。
  • 在 100% 关键帧，元素的 transform 属性设置为 translateX(200px)，表示动画结束时的状态。

你可以在关键帧中定义任意数量的状态，并根据需要设置不同的样式属性。使用百分比来表示关键帧的时间点，动画会根据关键帧之间的插值进行平滑过渡。

定义完关键帧后，你可以使用 animation-name 属性将动画应用到具体的元素上，如下所示：

.element {
  animation-name: slide;
  animation-duration: 2s;
}

通过将 animation-name 设置为关键帧名称，你可以将定义好的动画应用于元素，并设置动画的持续时间（在此示例中为 2 秒）。

请注意，在实际使用中，除了设置关键帧的样式，你还可以使用其他属性调整动画的速度、延迟、重复次数等。根据具体需求，你可以进一步完善动画效果。

⭐说说transition

CSS 的 transition 属性用于在元素发生状态变化时，平滑地过渡（或动画）到新的样式。它允许你控制一个或多个 CSS 属性的变化过程，使得元素的变化更加柔和和可控。

transition 属性由以下几个子属性组成：

1、transition-property：指定要过渡的 CSS 属性名称，可以是单个属性，也可以是多个属性。 当 transition 属性只设置了 transition-duration 值时，没有指定 transition-property 值，默认情况下所有可过渡的 CSS 属性都会应用过渡效果。

.element {
  transition-property: width;
}

2、transition-duration：指定过渡的持续时间，以秒（s）或毫秒（ms）为单位。

.element {
  transition-duration: 0.5s;
}

3、transition-timing-function：指定过渡的时间函数，用于控制过渡的速度曲线。常见的值包括 ease（默认值）、linear、ease-in、ease-out 和 ease-in-out，也可以使用贝塞尔曲线来定义自定义的速度曲线。

.element {
  transition-timing-function: ease-in-out;
}

4、transition-delay：指定过渡开始之前的延迟时间，以秒（s）或毫秒（ms）为单位。

.element {
  transition-delay: 0.2s;
}

通过使用这些子属性，你可以控制元素的过渡效果，从而实现例如悬停时颜色渐变、尺寸变化、透明度渐变等效果。

例如，下面的代码演示了一个当鼠标悬停在元素上时，背景颜色发生渐变过渡的效果：

.element {
  background-color: blue;
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.element:hover for(let [key, value] of map) {
        if(largeStr.indexOf(key)!==-1) {
            
        }
    }
  background-color: red;
}

以上代码将使元素的背景颜色在悬停时从蓝色平滑地过渡到红色，过渡时间为 0.5 秒，速度曲线为先加速后减速。这只是 transition 属性的一个简单示例，你可以根据需要调整和组合这些子属性来实现更复杂的过渡效果。

⭐外边距塌陷解决方案

外边距塌陷是指在垂直方向上，两个相邻元素的外边距（margin）合并成一个外边距的现象。以下是几种常见的外边距塌陷情况及其解决方案：

  1. 父子元素外边距塌陷：
    • 情况：父元素的上边距与第一个子元素的上边距合并，导致外边距塌陷。
    • 解决方案：给父元素添加 overflow: hidden; 或 float: left/right; 属性，为父元素创建新的块级格式化上下文（BFC），从而阻止外边距的合并。
  2. 相邻兄弟元素外边距塌陷：
    • 情况：两个相邻的兄弟元素，上一个元素的下边距与下一个元素的上边距合并，导致外边距塌陷。
    • 解决方案：给其中一个元素添加 padding-top 或 border-top 属性，或者在两个元素之间插入空元素（例如 <div></div>）。
  3. 空元素与外边距塌陷：
    • 情况：一个没有内容的空元素或没有上边框/上内边距的元素，上边距与其下面的元素的上边距合并，导致外边距塌陷。
    • 解决方案：给空元素添加 padding-top 或 border-top 属性，或者为其添加 display: inline-block; 属性。
  4. 内部包含块的外边距塌陷：
    • 情况：一个元素的内部包含块（例如 <div>）中的第一个子元素的上边距与外部元素的上边距合并，导致外边距塌陷。
    • 解决方案：为外部元素添加 overflow: hidden; 或 float: left/right; 属性，将其变为 BFC，阻止外边距合并。

这些解决方案的原理都是通过改变元素的布局特性来创建新的块级格式化上下文（BFC），从而阻止外边距的合并。BFC 可以独立地控制元素的布局行为，使得外边距不再发生塌陷。

avatar
文章
阅读
粉丝