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

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

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

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

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

1）CSS 优化和提高性能的方法有哪些？

CSS 优化和提高性能的方法包括：

• 合并和压缩CSS文件：将多个CSS文件合并成一个，并对CSS代码进行压缩，减少文件大小和网络请求次数。
• 使用CSS Sprites：将多个小图标或图片合并到一个大图中，通过CSS控制显示其中某一部分，减少HTTP请求和提高页面加载速度。
• 避免使用过多的嵌套和选择器：过多的嵌套和复杂的选择器会增加渲染时间和样式计算的复杂度，尽量保持选择器简洁。
• 使用合适的单位和数值：避免使用不必要的单位和过大的数值，使用相对单位（如em、rem）可以更好地适应不同屏幕尺寸。
• 使用CSS动画和过渡：使用CSS动画和过渡代替JavaScript动画，可以利用硬件加速，提高性能和流畅度。
• 避免使用昂贵的CSS属性：一些CSS属性（如box-shadow、border-radius等）对性能有较大影响，尽量避免在大量元素上使用。
• 使用媒体查询和响应式布局：根据设备的不同特性，使用媒体查询和响应式布局调整样式，提供更好的用户体验。

2）CSS预处理器/后处理器是什么？为什么要使用它们？

CSS预处理器和后处理器是一种用于增强CSS的工具，它们通过引入变量、嵌套、混合、函数等功能，提供了更强大、灵活和可维护的CSS编写方式。

• CSS预处理器：如Sass、Less、Stylus等，它们使用一种类似编程语言的语法，可以定义变量、嵌套规则、混合等，然后编译为标准的CSS文件。
• CSS后处理器：如PostCSS，它不像预处理器那样引入新的语法，而是通过插件机制对现有的CSS进行处理和优化，可以自动添加前缀、压缩代码、转换新特性等。

使用CSS预处理器/后处理器的好处包括：

• 提高开发效率：通过使用变量、嵌套和混合等功能，可以减少重复的代码，提高开发效率。
• 增强可维护性：使用预处理器/后处理器可以使CSS代码更加模块化和可维护，便于团队协作和代码重用。
• 提供更强大的功能：预处理器/后处理器提供了许多有用的功能，如条件语句、循环、函数等，可以实现更复杂的逻辑和效果。
• 兼容性处理：后处理器可以自动添加浏览器前缀，处理不同浏览器的兼容性问题。

3）::before 和 :after 的双冒号和单冒号有什么区别？

在CSS中，::before 和 ::after 是用于创建伪元素的伪类选择器。双冒号 :: 是用于表示伪元素的语法，而单冒号 : 是用于表示伪类的语法。

在实际使用中，双冒号 ::before 和 ::after 是推荐的写法，符合最新的CSS规范。然而，为了向后兼容，单冒号 :before 和 :after 也是有效的写法，但不推荐使用。

4）display:inline-block 什么时候会显示间隙？

使用 display: inline-block; 的元素在默认情况下会显示间隙。这是因为它们被视为行内元素，会根据字体大小和基线对齐。

这个间隙的出现是由于元素之间的空白字符（如空格、换行符等）被视为文字中的空白字符，导致它们之间有一个空隙。

解决这个问题的常见方法是：

• 移除空白字符：可以通过在HTML中删除元素之间的空白字符，或者将元素写在一行中，以消除间隙。
• 设置父元素的 font-size: 0;：可以通过将父元素的字体大小设置为0，来消除间隙。然后在子元素中重新设置字体大小。
• 使用负 margin：可以通过给元素添加负 margin 来消除间隙。例如，margin-right: -4px;。

5）单行、多行文本溢出隐藏

在CSS中，可以使用 text-overflow 属性来控制文本的溢出隐藏。

• 单行文本溢出隐藏：对于单行文本，可以使用 white-space: nowrap; 来防止文本换行，然后使用 overflow: hidden; 和 text-overflow: ellipsis; 来将溢出的文本显示为省略号。

.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
1
2
3
4
5

• 多行文本溢出隐藏：对于多行文本，可以使用 display: -webkit-box; 和 -webkit-line-clamp 来控制文本的行数，然后使用 overflow: hidden; 来隐藏溢出的文本。

.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
1
2
3
4
5
6

请注意，多行文本溢出隐藏的方法使用了WebKit浏览器的私有属性，因此在其他浏览器中可能不起作用。可以使用JavaScript来实现跨浏览器的多行文本溢出隐藏。

6）Sass、Less 是什么？为什么要使用他们？

Sass和Less都是CSS预处理器，它们提供了一种更强大、灵活和可维护的CSS编写方式。

• Sass：Sass是一种成熟的CSS预处理器，它使用类似于编程语言的语法，支持变量、嵌套规则、混合、函数等功能。Sass有两种语法格式：Sass（使用缩进）和SCSS（使用花括号和分号），可以根据个人喜好选择使用。
• Less：Less是另一种流行的CSS预处理器，它也提供了类似于编程语言的语法，支持变量、嵌套规则、混合等功能。Less的语法与CSS更为接近，可以更容易地学习和使用。

使用Sass和Less的好处包括：

• 提高开发效率：通过使用变量、嵌套和混合等功能，可以减少重复的代码，提高开发效率。
• 增强可维护性：使用预处理器可以使CSS代码更加模块化和可维护，便于团队协作和代码重用。
• 提供更强大的功能：预处理器提供了许多有用的功能，如条件语句、循环、函数等，可以实现更复杂的逻辑和效果。
• 兼容性处理：预处理器可以自动添加浏览器前缀，处理不同浏览器的兼容性问题。

7）对媒体查询的理解？

媒体查询是CSS3中的一个功能，用于根据设备的特性（如屏幕宽度、设备类型等）应用不同的样式。

通过使用媒体查询，可以根据不同的条件来适应不同的设备和屏幕尺寸，提供更好的用户体验。常见的媒体查询条件包括：

• 屏幕宽度：可以使用 min-width 和 max-width 来指定最小和最大的屏幕宽度。
• 设备类型：可以使用 screen、print、speech 等媒体类型来选择不同的样式。
• 设备方向：可以使用 orientation 来指定设备的方向，如横向或纵向。

媒体查询的语法如下：

@media (条件) {
  /* 样式规则 */
}
1
2
3

例如，以下媒体查询将在屏幕宽度小于等于768px时应用样式：

@media (max-width: 768px) {
  /* 样式规则 */
}
1
2
3

8）对 CSS 工程化的理解

CSS工程化是指将CSS的开发和管理过程进行规范化和自动化，以提高开发效率和代码质量。

在CSS工程化中，常见的做法和工具包括：

• 模块化：将CSS代码划分为多个模块，每个模块负责管理特定的样式，便于团队协作和代码重用。
• 组件化：将CSS样式与HTML结构和JavaScript行为进行关联，形成可重用的组件，提高代码的可维护性和复用性。
• 构建工具：使用构建工具（如Webpack、Gulp等）进行CSS文件的合并、压缩、自动添加前缀等处理，以及自动化工作流的配置。
• 代码规范：制定CSS的代码规范和命名规则，提高代码的可读性和一致性，减少错误和冲突。
• 版本控制：使用版本控制系统（如Git）对CSS代码进行管理，便于团队协作、版本回滚和代码审查。
• 性能优化：通过合并和压缩CSS文件、使用CSS Sprites、避免过多嵌套和选择器等优化方法，提高页面加载速度和性能。

通过CSS工程化的实践，可以提高CSS的开发效率、代码质量和可维护性，适应大型项目和团队协作的需求。

9）如何判断元素是否到达可视区域

判断元素是否到达可视区域的常见方法是通过JavaScript来计算元素的位置和可视区域的大小，并比较它们的关系。

以下是一种简单的方法：

1. 获取元素的位置和尺寸信息，可以使用 getBoundingClientRect() 方法来获取元素的边界框信息。

const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
1
2

1. 获取可视区域的大小信息，可以使用 window.innerWidth 和 window.innerHeight 来获取窗口的宽度和高度。

const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
1
2

1. 判断元素是否在可视区域内，可以比较元素的位置和可视区域的位置关系。

const isElementInViewport = rect.top < viewportHeight && rect.bottom > 0 && rect.left < viewportWidth && rect.right > 0;
1

如果 isElementInViewport 的值为 true，则表示元素在可视区域内；如果为 false，则表示元素不在可视区域内。

10）z-index属性在什么情况下会失效

z-index 属性用于控制元素的层叠顺序，即元素在垂直方向上的显示顺序。较高的 z-index 值会使元素在层叠顺序中处于较上层的位置。

然而，z-index 属性在以下情况下可能会失效：

1. 未定位元素：z-index 属性只对定位元素（如 position: absolute; 或 position: relative;）有效。对于未定位的元素，z-index 属性不会起作用。
2. 父元素的 z-index 值：如果父元素的 z-index 值比子元素的 z-index 值更低，那么子元素的 z-index 值将会失效。
3. 兄弟元素之间的 z-index 值：如果两个兄弟元素都具有 z-index 值，并且它们的父元素的 z-index 值相同，那么它们的 z-index 值将会根据它们在HTML文档中的顺序决定层叠顺序。
4. 根元素之间的 z-index 值：根元素（html）的 z-index 值默认为 auto，如果多个根元素都具有 z-index 值，那么它们的层叠顺序将根据它们在HTML文档中的顺序决定。

需要注意的是，z-index 属性只对具有 position 属性的元素有效，并且在同一个层叠上下文中才会生效。如果元素不在同一个层叠上下文中，那么它们的 z-index 值将无法比较，也无法确定层叠顺序。

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

已 300 + Star！

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