CSS重点面试题

css中的面试题都是根据以下六个问题进行延伸扩展的

rem的理解

"rem" 是一种用于网页设计和开发中的相对长度单位，它是指相对于根元素（即HTML文档中的标签）的字体大小的倍数。具体地说，1rem 等于根元素的字体大小（通常默认为16像素）。

使用 rem 单位可以使得网页在不同设备上自适应，并且能够根据用户设置的浏览器字体大小进行调整。这对于创建响应式设计和提供更好的可访问性非常有用。

例如，如果根元素的字体大小为16像素，那么一个元素的宽度设置为2rem，就表示该元素的宽度为32像素（2乘以根元素的字体大小）。

需要注意的是，rem 单位只会相对于根元素的字体大小进行计算，而不受其他元素的影响。因此，在使用 rem 单位时，需要仔细考虑应用的位置和上下文，以确保所需的效果达到预期。

扩展问题： rem和em的区别、如何实现自适应、怎么使用rem

bfc的理解

BFC 是 Formatting Context（格式化上下文）的一种，它是 CSS 中用来决定块级盒子如何布局的一种机制。BFC 决定了盒子如何在页面上定位以及相互之间的影响。

BFC 的主要特点包括：

盒子垂直方向的边距重叠会被解决。在同一个 BFC 中，两个相邻盒子的上下边距会发生重叠，而在不同 BFC 中，它们的边距不会发生重叠。
BFC 可以包含浮动的元素。这意味着，如果一个元素创建了 BFC，它将包含其内部的浮动元素，而不会导致高度塌陷等问题。
BFC 在页面布局中占据一定的空间，不会与浮动元素重叠。

创建 BFC 的方式包括：

根元素或包含根元素的元素
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（display: inline-block）
表格单元格（元素的 display 值为 table-cell、table-caption、inline-table、table-row、table-cell）
表格标题（元素的 display 值为 table-caption）
overflow 值不为 visible 的元素

扩展问题： 如何实现bfc、bfc的作用、bfc的应用场景、创建自适应的两栏布局、创建两栏布局、margin重叠问题以及规则、什么是浮动、如何清除浮动、浮动解决的问题

回流(重排)和重绘

回流（也称为重排）和重绘是与网页性能和渲染相关的两个重要概念。

回流（Reflow）是指当 DOM 结构中的元素发生改变，影响了其在页面中的布局时，浏览器需要重新计算元素的几何属性（例如位置、大小）并重新布局整个页面。这个过程会涉及到对所有受影响元素的计算和页面的重新渲染，非常消耗性能。

重绘（Repaint）是指当元素的样式发生改变，但不影响其在页面中的布局时，浏览器只需要重新绘制（重新填充像素）受影响的部分，而无需进行布局计算。相比于回流，重绘的性能开销较小。

回流和重绘都是浏览器的内部操作，当它们频繁发生时，会导致网页的性能下降。因此，在编写网页代码时，应尽量减少回流和重绘的次数。

以下是一些常见导致回流和重绘的操作：

修改元素的尺寸、位置、边距等样式属性
添加或移除 DOM 元素
修改元素的字体、颜色等样式属性
操作表格布局
获取某些属性（例如 offsetTop、offsetLeft、scrollTop 等）

为了优化性能，可以采取以下措施：

避免频繁修改样式属性，最好一次性进行批量修改或使用 CSS 类来进行样式的切换。
对于需要多次操作的 DOM 元素，可以将其脱离文档流进行处理，例如使用绝对定位或创建文档片段。
避免过度嵌套和复杂的布局结构，优化页面的层级关系。
当需要获取元素的尺寸等属性时，尽量在一次回流中完成，避免多次读取。

通过减少不必要的回流和重绘，可以提高网页的性能和用户体验。

扩展问题： 什么时候触发回流和重绘、opacity会触发回流吗

flex布局

Flex布局是CSS3中引入的一种用于页面布局的模型，它能够更加有效地对容器中的项目进行排列、对齐和分配空间。Flex布局适用于各种屏幕尺寸和设备类型，提供了更灵活的布局方式。

在Flex布局中，通过设置容器的display属性为flex或inline-flex来启用Flex布局。容器内的项目（即子元素）根据flex容器的主轴和交叉轴进行排列。

以下是Flex布局的一些重要概念：

主轴和交叉轴：flex容器有一个主轴和一个交叉轴。主轴的方向由flex-direction属性决定，默认为水平方向。交叉轴则垂直于主轴。
项目的排列：通过设置justify-content属性可以控制项目在主轴上的排列方式，而align-items属性则控制项目在交叉轴上的对齐方式。
项目的排序：使用order属性可以改变项目的默认排列顺序。
项目的伸缩：通过flex属性来指定项目的伸缩比例，以实现灵活的空间分配。

以下是一个简单的Flex布局示例：

css 复制代码

.container {
  display: flex;
  justify-content: space-between; /* 在主轴上均匀分布项目 */
  align-items: center; /* 在交叉轴上居中对齐项目 */
}

.item {
  flex: 1; /* 项目的伸缩比例为1，占据剩余空间 */
}

Flex布局的优点包括：

更加灵活：通过设置不同的属性和数值，可以实现各种复杂的页面布局。
响应式设计：适应不同尺寸的屏幕和设备，提供良好的用户体验。
简化布局代码：相比传统的布局方式，Flex布局能够减少需要编写的代码量。

扩展问题： 具体说一下什么场景用flex

动画相关

CSS动画是通过CSS样式来创建的动态效果，它可以让网页元素在不同状态之间产生平滑的过渡或者连续的动画效果。CSS动画相比JavaScript动画有着更好的性能表现，并且使用起来更为简单。

以下是一些常见的CSS动画相关的属性和技巧：

@keyframes规则：@keyframes规则用于创建动画序列，定义了动画的关键帧（起始状态、中间状态和结束状态）。通过指定关键帧的样式属性值，可以创建各种复杂的动画效果。

css 复制代码

@keyframes slidein {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slidein 2s ease-in-out; /* 应用名为slidein的动画，持续2秒，缓动效果 */
}

transition属性：transition属性用于在状态变化时实现平滑过渡效果。通过指定要过渡的属性、过渡持续时间和过渡效果，可以在元素状态改变时产生平滑的过渡效果。

css 复制代码

.element {
  width: 100px;
  transition: width 0.3s ease-in-out; /* 当width属性改变时，产生0.3秒的平滑过渡效果 */
}

.element:hover {
  width: 200px;
}

动画属性（animation）：通过animation属性可以将@keyframes定义的动画序列应用到元素上，并指定动画的持续时间、重复次数、延迟等参数。

css 复制代码

.element {
  animation-name: mymove; /* 引用名为mymove的动画序列 */
  animation-duration: 3s; /* 动画持续3秒 */
  animation-iteration-count: infinite; /* 无限循环播放动画 */
  animation-timing-function: ease-in-out; /* 缓动效果 */
}

@keyframes mymove {
  from {left: 0;}
  to {left: 200px;}
}

CSS预处理器：使用像Sass、Less这样的CSS预处理器可以帮助简化并优化CSS动画的编写，提供了更多强大的功能，例如嵌套规则、变量、函数等，使得动画的管理和维护更加便捷。

css预编译器有哪些？有什么区别？

CSS预处理器是一种用于简化和优化CSS代码的工具，它通过提供类似编程语言的语法和功能来增强CSS的表现力和可维护性。常见的CSS预处理器包括Less、Sass和Stylus等。

下面简要介绍一下这三种CSS预处理器的特点和区别：

Less

Less是一种基于CSS的扩展语言，提供了一系列的函数和混合（Mixin）等功能，可以帮助开发者更加方便地管理和维护CSS代码。Less的文件后缀名为.less，可以通过编译器将Less代码转换成普通的CSS代码。

Sass

Sass是一种比Less更加强大的CSS预处理器，它支持变量、嵌套规则、Mixin、继承等高级功能，可以极大地提高CSS代码的表现力和可维护性。Sass有两种语法格式：一种是SCSS（Sassy CSS）格式，类似于CSS语法，另一种是缩进格式，类似于Python语法。

Stylus

Stylus是一种基于Node.js的CSS预处理器，它的语法非常灵活，支持嵌套、Mixin、循环、条件判断等高级功能。Stylus的文件后缀名为.styl，可以通过编译器将Stylus代码转换成普通的CSS代码。

除了语法和功能上的区别，这些CSS预处理器在使用上也有一些差异。例如，Sass和Stylus都提供了CLI工具和插件库，可以方便地集成到构建工具中；而Less则需要单独安装编译器并手动编译。此外，Sass和Stylus都提供了比较完善的文档和社区支持，更适合作为大型项目的CSS预处理器。

扩展问题： 都如何实现抽离共同样式