面试 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;：将元素隐藏，但仍然占用页面空间。
css.hidden-element { visibility: hidden; } -
opacity: 0;：将元素设为完全透明，但仍然占用页面空间。
css.hidden-element { opacity: 0; } -
position: absolute; left: -9999px;：将元素移出可视区域，但仍然占用页面空间。
css.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！
⭐点赞⭐收藏⭐不迷路！⭐