面试 CSS 框架八股文十问十答第一期

面试 CSS 框架八股文十问十答第一期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）CSS选择器及其优先级

CSS选择器用于选择页面上的元素，它们可以根据元素的标签名、类名、ID等属性进行选择。选择器的优先级决定了当多个规则同时匹配一个元素时，哪一个规则会被应用。优先级从高到低分为四个级别：

• 内联样式（Inline Styles） ：使用style属性直接在HTML元素上定义的样式，具有最高优先级。
• ID选择器 ：通过元素的ID属性选择元素（例如，#myElement），比类选择器具有更高的优先级。
• 类选择器、属性选择器、伪类选择器：通过类名、属性或伪类选择元素。
• 元素选择器、伪元素选择器：通过元素名或伪元素选择元素。

2）CSS中可继承与不可继承属性有哪些

• 可继承属性 ：部分样式属性的值会被子元素继承。例如，font-family、color、line-height等都是可继承的属性。子元素会继承父元素的这些样式值，除非子元素被明确设置了相应的样式。
• 不可继承属性 ：有些样式属性的值不会被子元素继承，需要子元素自行设置。例如，border、padding、margin等都是不可继承的属性。

3）display的属性值及其作用

display属性用于定义元素的显示类型，常用的取值有：

• block：元素会被显示为块级元素，独占一行，宽度自动填满父元素。
• inline：元素会被显示为行内元素，不会独占一行，宽度根据内容自动调整。
• inline-block：元素会被显示为行内块级元素，同行显示，但可以设置宽高等属性。
• none：元素会被隐藏，不占用空间。
• flex：定义一个弹性容器，子元素可以通过设置弹性属性进行伸缩。
• grid：定义一个网格容器，子元素可以按照网格布局进行排列。

4）display的block、inline和inline-block的区别

• block：元素会被显示为块级元素，独占一行，宽度自动填满父元素，可以设置宽高、内外边距等属性。
• inline：元素会被显示为行内元素，不独占一行，宽度根据内容自动调整，不能设置宽高、上下边距。
• inline-block：元素会被显示为行内块级元素，同行显示，可以设置宽高、内外边距等属性。

5）隐藏元素的方法有哪些

• display: none;：将元素完全隐藏，不占用页面空间。

  .hidden-element {
    display: none;
  }

• visibility: hidden;：将元素隐藏，但仍然占用页面空间。

  .hidden-element {
    visibility: hidden;
  }

• opacity: 0;：将元素设为完全透明，但仍然占用页面空间。

  .hidden-element {
    opacity: 0;
  }

• position: absolute; left: -9999px;：将元素移出可视区域，但仍然占用页面空间。

  .hidden-element {
    position: absolute;
    left: -9999px;
  }

选择隐藏的方法取决于需求，例如，如果希望元素在布局中不占用空间，可以使用display: none;。如果希望元素占用空间但不可见，可以使用其他方法。

6）link和@import的区别

• link是HTML中的标签，用于引入外部样式表，通过rel属性指定样式表的关系，可以同时引入多个样式表。link标签会在页面加载时同时加载，可以影响页面的渲染速度。
• @import是CSS中的语法规则，用于引入外部样式表，通过在样式表中使用@import语句来引入其他样式表。@import语句只能在样式表中使用，而不能在HTML中使用。@import会在页面加载完毕后再加载，对页面的渲染速度没有直接影响。

7）transition和animation的区别

• Transition：用于控制元素从一种样式逐渐变为另一种样式的过程。它需要指定过渡的属性、持续时间、过渡效果的速度曲线等。
• Animation：更灵活，可以定义更复杂的动画效果。可以控制动画的每一帧，包括起始状态、结束状态和中间状态，可以定义关键帧。

8）display:none与visibility:hidden的区别

• display: none;：完全从文档流中移除元素，不占据任何空间，元素及其子元素都不可见，并且不会触发重排和重绘。
• visibility: hidden;：元素在页面中隐藏，但仍然占据着它在文档流中的空间，元素不可见但仍保留在文档中，会触发重排和重绘。

9）伪元素和伪类的区别和作用？

• 伪类（Pseudo-classes） ：是用于向某些选择器添加特殊的效果的关键词，它们不是真正意义上的元素，而是元素的特殊状态。常见的伪类有:hover、:active、:focus等，用于根据用户的行为来改变元素的样式。
• 伪元素（Pseudo-elements） ：是用于向某些选择器添加特殊效果的关键词，它们允许你为元素的特定部分设置样式。常见的伪元素有::before、::after，用于在元素的内容前面或后面插入生成的内容。

10）对requestAnimationframe的理解

requestAnimationFrame 是浏览器提供的一个 API，用于优化 JavaScript 动画的性能。它告诉浏览器希望执行动画，并请求浏览器在下次重绘之前调用指定的函数来更新动画。

与传统的定时器（如 setTimeout 和 setInterval）相比，requestAnimationFrame 更加智能和高效，它能够自动调整动画的帧速率以匹配浏览器的刷新率，从而提供更流畅的动画效果，并且在页面不可见时自动停止，节省了资源。

使用 requestAnimationFrame，开发者可以编写更加流畅、更高性能的 JavaScript 动画。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐