面试 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;
}
- 多行文本溢出隐藏：对于多行文本，可以使用
display: -webkit-box;和-webkit-line-clamp来控制文本的行数，然后使用overflow: hidden;来隐藏溢出的文本。
.multi-line {
display: -webkit-box;
-webkit-line-clamp: 3; /* 控制显示的行数 */
-webkit-box-orient: vertical;
overflow: hidden;
}
请注意，多行文本溢出隐藏的方法使用了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 (条件) {
/* 样式规则 */
}
例如，以下媒体查询将在屏幕宽度小于等于768px时应用样式：
@media (max-width: 768px) {
/* 样式规则 */
}
8）对 CSS 工程化的理解
CSS工程化是指将CSS的开发和管理过程进行规范化和自动化，以提高开发效率和代码质量。
在CSS工程化中，常见的做法和工具包括：
- 模块化：将CSS代码划分为多个模块，每个模块负责管理特定的样式，便于团队协作和代码重用。
- 组件化：将CSS样式与HTML结构和JavaScript行为进行关联，形成可重用的组件，提高代码的可维护性和复用性。
- 构建工具：使用构建工具（如Webpack、Gulp等）进行CSS文件的合并、压缩、自动添加前缀等处理，以及自动化工作流的配置。
- 代码规范：制定CSS的代码规范和命名规则，提高代码的可读性和一致性，减少错误和冲突。
- 版本控制：使用版本控制系统（如Git）对CSS代码进行管理，便于团队协作、版本回滚和代码审查。
- 性能优化：通过合并和压缩CSS文件、使用CSS Sprites、避免过多嵌套和选择器等优化方法，提高页面加载速度和性能。
通过CSS工程化的实践，可以提高CSS的开发效率、代码质量和可维护性，适应大型项目和团队协作的需求。
9）如何判断元素是否到达可视区域
判断元素是否到达可视区域的常见方法是通过JavaScript来计算元素的位置和可视区域的大小，并比较它们的关系。
以下是一种简单的方法：
- 获取元素的位置和尺寸信息，可以使用
getBoundingClientRect()方法来获取元素的边界框信息。
const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
- 获取可视区域的大小信息，可以使用
window.innerWidth和window.innerHeight来获取窗口的宽度和高度。
const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
- 判断元素是否在可视区域内，可以比较元素的位置和可视区域的位置关系。
const isElementInViewport = rect.top < viewportHeight && rect.bottom > 0 && rect.left < viewportWidth && rect.right > 0;
如果 isElementInViewport 的值为 true，则表示元素在可视区域内；如果为 false，则表示元素不在可视区域内。
10）z-index属性在什么情况下会失效
z-index 属性用于控制元素的层叠顺序，即元素在垂直方向上的显示顺序。较高的 z-index 值会使元素在层叠顺序中处于较上层的位置。
然而，z-index 属性在以下情况下可能会失效：
- 未定位元素：
z-index属性只对定位元素（如position: absolute;或position: relative;）有效。对于未定位的元素，z-index属性不会起作用。 - 父元素的
z-index值：如果父元素的z-index值比子元素的z-index值更低，那么子元素的z-index值将会失效。 - 兄弟元素之间的
z-index值：如果两个兄弟元素都具有z-index值，并且它们的父元素的z-index值相同，那么它们的z-index值将会根据它们在HTML文档中的顺序决定层叠顺序。 - 根元素之间的
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！
⭐点赞⭐收藏⭐不迷路！⭐