前端面试题准备 - CSS

BFC 是什么？

BFC 是 块级格式化上下文（Block Formatting Context） 的缩写。它定义了一个独立的渲染区域，包含了元素及其子元素的布局规则，决定了这些元素如何与其他元素进行交互，特别是在垂直方向上。

BFC 特点：

独立的布局环境：BFC 内部的元素布局不受外部元素的影响。
垂直方向上的布局规则：BFC 会影响元素如何在垂直方向上与其他元素进行排列。比如，BFC 内部的子元素会垂直排列，而外部的元素不会影响到内部的元素。
清除浮动：浮动元素脱离了正常的文档流，可能导致父容器高度塌陷。通过创建 BFC，父容器会自动“包裹”浮动的子元素，从而解决这个问题。

BFC 的触发条件：

浮动元素 (float: left; 或 float: right;)。
绝对定位的元素 (position: absolute; 或 position: fixed;)。
行内块元素 (display: inline-block;)。
块级元素 设置了 overflow 值为 hidden、auto 或 scroll。
弹性布局容器 (display: flex; 或 display: inline-flex;)。
网格布局容器 (display: grid; 或 display: inline-grid;)。

BFC 的应用：

清除浮动：由于浮动元素会脱离正常文档流并可能导致父容器的高度塌陷，我们可以通过让父元素创建一个 BFC 来解决这个问题。比如，给父元素加上 overflow: hidden; 来触发 BFC。
防止 margin 重叠：正常情况下，垂直相邻的块级元素的 margin 会发生合并，导致它们之间的空间变小。但在 BFC 中，相邻元素的 margin 不会合并。
布局隔离：BFC 可以用来创建布局隔离区域，例如通过在容器上使用 float 或 position 属性，来使容器内的元素独立布局而不受外部影响。

重绘和重排

重绘：重绘是指当页面元素的外观发生变化时，浏览器重新绘制这些元素，但不会影响元素的布局。常见的情况如更改背景色、文本颜色等，不会影响元素的位置和大小。

重排：重排是指当页面元素的布局发生变化时，浏览器需要重新计算元素的几何属性（如宽度、高度、位置等），并更新页面的结构。这比重绘更耗费性能，因为需要重新计算和重新布局整个文档或部分文档。

重排一定导致重绘，重绘不一定导致重排。

引发重绘和重排的原因：

添加或者删除可见的 DOM 元素
元素尺寸位置的改变
浏览器页面初始化
浏览器窗口大小发生改变

减少重绘和重排的方法：

不在布局信息改变时做 DOM 查询
尽量将多个DOM修改合并成一次操作，避免频繁的修改，比如使用类名批量操作元素样式。
使用 documentFragment 批量插入元素，减少对DOM的频繁访问
对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素

CSS 选择器及权重

CSS 选择器是用来定位网页中特定元素的模式，每种选择器都有相应的权重，这决定了在样式冲突时哪个规则会被应用。

选择器权重的6个等级：

!important（无穷大）

1	p { color: red !important; }

内联样式（1，0，0，0）

1	<p style="color: red;">123</p>

ID 选择器（0，1，0，0）

1 2	<p id="p1">123</p> #header { color: blue; }

类选择器、伪类选择器、属性选择器（0，0，1，0）

1
2
3

.box { color: green; } /* 类选择器 */
.box:hover { color: blue; } /* 伪类选择器 */
[type="text"] { color: yellow; } /* 属性选择器 */

元素选择器（0，0，0，1）

1	p { color: blue; }

通配符选择器（0，0，0，0）

1	* { color: red; }

选择器权重计算：

组合多个选择器时，各部分的权重进行累加
权重相同时，后出现的样式覆盖前面的样式

Flexbox 和 Grid 的区别

Flexbox 和 Grid 是 CSS 中的两种布局模型，用于控制元素在容器中的排列方式。

Flexbox：

一维布局模型，只能控制元素在水平或垂直方向上的排列。
适用于需要在一维空间中进行布局的情况，如水平导航栏、垂直列表等。

Grid：

二维布局模型，可以控制元素在水平和垂直方向上的排列。
适用于需要在一个二维空间中进行布局的情况，如网格布局、卡片布局等。

Flexbox 和 Grid 的区别：

布局方向	一维布局（横向或纵向）	二维布局（横向和纵向同时控制）
使用场景	适用于简单的、线性的布局	适用于复杂的、网格状的布局
适用布局类型	排列一行或一列，灵活调整间距和对齐方式	创建复杂的网格布局，精确控制每个单元格
布局方式	自动适应，元素按照主轴和交叉轴对齐	行和列的精确控制，元素可以跨越多个单元格
复杂度	简单，适合于小型布局	复杂，适合于大规模布局和更精细的控制
性能	性能较好，适用于少量元素的动态布局	适用于大规模的复杂布局，但性能相对较低

盒模型

CSS 盒模型是 CSS 中用于描述 HTML 元素的布局和尺寸的模型。它将每个元素视为一个矩形的盒子，包括内容、内边距、边框和外边距。

盒模型的组成部分：

内容区域（content）：元素的实际内容，如文本、图像等。
内边距（padding）：内容区域与边框之间的空间。
边框（border）：围绕内容和内边距的线性框。
外边距（margin）：内容区域与其他元素之间的空间。

水平垂直居中

flexbox

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 设置容器的高度为视口高度 */
}

grid

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
  height: 100vh; /* 设置容器的高度为视口高度 */
}

absolute

.container {
  position: relative;
  height: 100vh; /* 设置容器的高度为视口高度 */
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使用transform进行精确居中 */
}