CSS面试常问知识点

一.盒模型

了解盒模型的概念，包括内容区域、内边距、边框和外边距，并掌握如何通过 CSS 属性来调整盒模型的大小和样式。

两种盒模型以及区别

在CSS中，有两种盒模型：标准盒模型（content-box）和IE盒模型（border-box）。它们在计算元素的尺寸和布局时有一些差异。

1. 标准盒模型（content-box）：
   • 总宽度 = 内容宽度（width） + 左右边框宽度（border） + 左右内边距（padding）
   • 总高度 = 内容高度（height） + 上下边框高度（border） + 上下内边距（padding）
   • 盒子尺寸不包括边框和内边距的部分
   • 默认的盒模型
2. IE盒模型（border-box）：
   • 总宽度 = 内容宽度（width），边框和内边距都包含在内
   • 总高度 = 内容高度（height），边框和内边距都包含在内
   • 盒子尺寸包括了边框和内边距的部分
   • 在IE浏览器中的怪异盒模型，通过设置box-sizing: border-box;来使用

主要区别：

• 盒子尺寸计算方式不同：标准盒模型不包括边框和内边距在内，而IE盒模型包括边框和内边距在内。
• 盒子大小设置方式不同：在标准盒模型中，通过设置width和height来设置内容区域的尺寸，而在IE盒模型中，通过设置width和height来设置整个盒子的尺寸。
• 盒子模型的兼容性：标准盒模型是CSS规范定义的，而IE盒模型是IE浏览器独有的模型，在处理盒子尺寸时可能会导致兼容性问题。

更多可以参考：CSS盒模型详解

二.用 CSS 实现一个三角形

要用 CSS 实现一个三角形，可以借助 CSS 的边框和尺寸属性来创建一个没有内容区域的块元素，然后通过设置边框的颜色和宽度来形成三角形的样式。

示例：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

在这个示例中，.triangle 是一个没有内容区域的块级元素。通过设置 width: 0; 和 height: 0;，让元素没有实际的尺寸。
接下来，通过设置 border 属性来创建三角形的形状。border-left 和 border-right 设置透明的边框，使两侧的边框不可见，border-bottom 设置实际的边框宽度和颜色，形成三角形的底边。
你可以根据需要调整 border 的宽度和颜色，以及元素的宽度和高度，来创建不同尺寸和样式的三角形。

三.比较 opacity: 0、visibility: hidden、display: none

opacity: 0;, visibility: hidden; 和 display: none; 是CSS中用于隐藏元素的常用属性。它们在实现隐藏效果上有一些区别：

1. opacity: 0;:
   • 元素仍然占据页面布局空间，即保留了原始的盒模型大小和位置。
   • 元素在视觉上完全透明，即不可见，但仍然可以交互（例如点击、悬停）。
   • 子元素也会继承透明属性。
2. visibility: hidden;:
   • 元素仍然占据页面布局空间，即保留了原始的盒模型大小和位置。
   • 元素在视觉上不可见，但仍然会影响布局。
   • 元素不可见，但仍然可以接收事件（例如点击、悬停）。
   • 子元素也会继承隐藏属性。
3. display: none;:
   • 元素不再占据页面布局空间，即不保留原始的盒模型大小和位置。
   • 元素在视觉上完全不可见，不会影响布局。
   • 元素不可见，也无法接收事件。
   • 子元素也会被隐藏，不会继承该样式。

如果只是需要让元素在视觉上隐藏，但仍然保留布局空间和交互能力，可以使用 opacity: 0; 或 visibility: hidden;。
如果希望完全从页面布局中移除元素，并且不可见且不可交互，可以使用 display: none;。
需要根据具体的需求选择合适的隐藏方式。

四.flex 布局

• Flex布局（也称为弹性布局）是一种用于在容器中进行灵活的、自适应的元素布局的CSS模块。它提供了一组属性，用于定义容器和容器内的元素之间的关系，实现了更直观、简洁和灵活的布局方式。
• Flex布局的核心概念是容器和项目。容器是被设置为display: flex;或display: inline-flex;的元素，它成为了一个Flex容器。容器内的直接子元素称为项目（flex items）。
• 使用Flex布局可以简化复杂的布局需求，减少使用浮动、定位和清除浮动等传统布局方法的繁琐性。它适用于各种类型的布局，包括导航菜单、栅格系统、居中对齐、等高列布局等。

1. 容器属性（Flex container properties）：
   • display: 设置为flex或inline-flex，用于创建一个Flex容器。
   • flex-direction: 定义主轴的方向（水平或垂直）。
   • flex-wrap: 定义项目是否换行。
   • justify-content: 定义项目在主轴上的对齐方式。
   • align-items: 定义项目在交叉轴上的对齐方式。
   • align-content: 定义多行项目在交叉轴上的对齐方式。
2. 项目属性（Flex item properties）：
   • flex-grow: 定义项目的放大比例。
   • flex-shrink: 定义项目的缩小比例。
   • flex-basis: 定义项目在主轴上的初始大小。
   • flex: 简写形式，包括flex-grow、flex-shrink和flex-basis。
   • order: 定义项目的排列顺序。
   • align-self: 定义单个项目在交叉轴上的对齐方式。

Flex布局的特点包括：

• 自适应：容器会根据可用空间自动调整项目的大小和位置。
  灵活性：通过调整容器和项目的属性，可以实现各种布局需求。
  响应式：可以通过媒体查询等技术在不同屏幕尺寸下改变布局。

五.BFC、IFC、GFC 和 FFC

BFC、IFC、GFC 和 FFC 是 CSS 中的布局概念，它们分别代表块级格式化上下文（BFC）、内联格式化上下文（IFC）、网格格式化上下文（GFC）和自适应格式化上下文（FFC）。这些概念帮助我们理解和控制元素在页面布局中的行为。

块级格式化上下文（BFC）：

• BFC 是页面上的一个独立的渲染区域，具有一定的布局规则。
• BFC 中的元素在垂直方向上按照一定规则进行布局，不会重叠。
• BFC 中的元素可以包含浮动元素，并且不会被浮动元素覆盖。
• BFC 具有边界折叠特性，可以解决外边距合并的问题。
• 创建 BFC 的方法包括根元素、浮动元素、绝对定位元素、设置 overflow 为除了 visible 之外的值等。

内联格式化上下文（IFC）：

• IFC 是一种内联元素的布局规则。
• IFC 中的元素在水平方向上按照一定规则进行布局，不会超出父容器。
• IFC 中的元素会垂直对齐，默认对齐基线（baseline）。
• IFC 中的元素可以通过设置 vertical-align 属性进行垂直对齐调整。

网格格式化上下文（GFC）：

• GFC 是 CSS 网格布局的一种布局模型。
• GFC 可以通过使用 display: grid 和相关属性来创建网格布局。
• GFC 可以定义多行多列的网格布局，灵活控制元素在网格中的位置和尺寸。
• GFC 提供了强大的网格布局功能，适用于复杂的页面布局需求。

自适应格式化上下文（FFC）：

• FFC 是一种自适应布局的概念。
• FFC 可以通过使用 display: flex 和相关属性来创建弹性布局。
• FFC 中的元素可以按照一定的比例和规则自动伸缩和布局。
• FFC 提供了简单而灵活的布局方式，适用于构建响应式和自适应的界面。

六.重绘与重排

在Web开发中，重排（reflow）和重绘（repaint）是浏览器进行页面布局和渲染的过程。它们的触发可以由多种操作引起，包括修改DOM、改变样式、改变窗口大小等。

如何触发重排和重绘

以下是一些常见的操作，可能会触发重排和重绘：

1. 修改DOM结构：
   • 添加、删除、替换DOM元素。
   • 修改元素的文本内容。
2. 改变元素样式：
   • 修改元素的尺寸、位置、边距、填充等样式属性。
   • 修改元素的背景色、字体颜色等样式属性。
   • 修改元素的可见性。
     • 通过display: none隐藏一个DOM节点-触发重排和重绘
     • 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
3. 改变窗口大小：
   • 当窗口大小改变时，页面的布局需要重新计算，可能导致重排和重绘。
4. 操作表单元素：
   • 输入框的输入、复选框的选中状态改变等。

如何尽量减少重排和重绘的次数

重排和重绘的开销是比较高的，尤其在大型页面或复杂布局下。因此，合理的优化策略和代码设计是提升性能的关键。

要尽量减少重排和重绘的次数，可以采取以下一些策略：

• 使用CSS3动画或过渡效果，利用GPU加速，避免频繁的重排和重绘。
• 避免使用不必要的复杂CSS选择器，选择器的匹配过程会耗费性能。
• 批量修改样式属性，可以使用class来一次性修改多个样式，而不是逐个修改。
• 避免频繁访问布局相关的属性，比如offsetTop、offsetLeft等，会强制浏览器进行重排。
• 使用文档片段（DocumentFragment）进行DOM操作，然后一次性插入文档中，减少重排次数。
• 对于需要频繁修改的DOM元素，可以使用绝对定位（position: absolute）脱离文档流，避免对其他元素的影响。

重绘与重排的区别

重绘（Repaint）是根据元素的样式属性重新绘制元素的外观，不涉及页面布局的改变。
重排（Reflow）是指浏览器为了计算并确定元素的位置和大小而进行的布局过程，涉及到整个文档树的重新布局。

区别总结

• 重绘是重新绘制元素的外观，不会改变布局，而重排是重新计算并确定元素的位置和大小，会改变布局。
• 重绘的开销相对较小，因为只涉及像素的绘制，而重排的开销较大，因为涉及到整个文档树的重新布局。
• 重绘通常发生在外观样式属性发生变化的情况下，而重排通常发生在DOM结构变化或尺寸属性变化的情况下。

七.vw、vh 是什么

vw和vh是CSS3中引入的相对单位，用于相对于视口（viewport）的宽度和高度进行尺寸的定义。

• vw表示视口宽度的百分比，1vw等于视口宽度的1%。
• vh表示视口高度的百分比，1vh等于视口高度的1%。

这两个单位可以用于响应式设计，根据视口的大小来自适应地调整元素的尺寸。它们在移动设备上特别有用，可以根据不同的屏幕尺寸自动调整元素的大小和布局。例如，可以使用50vw表示元素的宽度为视口宽度的50%。

注意，vw和vh单位的兼容性较好，但在某些旧版本的浏览器中可能存在兼容性问题，需要进行兼容性处理。

八.清除浮动的方法

清除浮动是为了解决在父元素中包含浮动元素时可能出现的高度塌陷或布局错乱的问题

1. 万能清除法 ::after 伪元素清浮动（现在主流方法，推荐使用）

   // 使用`空的clearfix`元素：可以在浮动元素后面添加一个空的div元素，并为其应用清除浮动的样式
   .clearfix::after {
     content: "";
     display: table;
     clear: both;
   }
   

2. 给父级添加overflow: hidden;样式

   // 创建一个新的块级格式上下文，从而包含浮动元素。
   .parent-element {
     overflow: hidden;
   }