CSS相关面试题

本文最后更新于 2024-12-05，文章内容可能已经过时。

CSS中的盒模型

在HTML中所有的元素都可以看作一个盒子模型!
盒子模型分为标准盒模型(内容盒模型) 和 IE盒模型(边框盒模型)!

标准盒模型(content-box) : 左右内(padding)边距 + 左右边框(border) + 内容(content)宽高
IE盒模型(border-box) : content( padding + border )

控制盒模型的方式: box-sizing: content-box / border-box;
默认为content-box 标准盒模型!

就是定一个盒子宽高为 100px, 内外边距为 5px,边框为1px

标准盒模型展示形式为 内容(content)宽高为100px + 左右内边距 + 左右边框大小! 最后结果会显示超出 100px 像素的盒模型!

IE盒模型展示形式为 (边框 + 内边距)内容(content)宽高 = 100px像素盒模型!

CSS选择器优先级

CSS中有三个特性: 继承 层级 优先级 ！
CSS优先级就是为元素设置多个样式的时候，之间权重的优先高低 !

其选择器优先级为下: !important > 行内选择器(在标签内写的样式) > id > 类/伪类/标签 > 全局选择器(*)

CSS中隐藏元素有哪些方法

设置display: none

设置元素高度(height)为 0
设置元素透明度(opacity)为0
设置元素可见度visibility为 hidden
设置缩放transform: scale(0)
设置溢出隐藏overflow: hidden
设置元素为定位元素position，超出屏幕可见范围!

CSS中的`px`和`rem`区别是什么

px 和 rem 都是css中的单位描述，px 是像素单位， rem是相对单位!

px像素(固定)单位: 为计算机显示器分辨率像素固定大小!
rem相对单位: 当 html根节点设置 font字体大小时，rem单位会随着字体大小变化而变化!

重绘和重排的区别是什么

重绘（`Repaint`）

定义：当元素的外观改变，但不影响其在文档流中的位置时，浏览器需要重新绘制该元素，这个过程称为重绘。
触发条件：改变元素的背景颜色、文字颜色、边框颜色、可见性（如 visibility）等属性，通常会触发重绘。
性能影响：重绘通常只影响单个元素，因此性能开销相对较小。但是，如果页面上有大量元素需要重绘，累积的性能开销也可能变得显著。

重排（`Reflow`）

定义：当元素的布局或几何属性发生变化时，例如改变元素的尺寸、位置或页面布局发生变化时，浏览器需要重新计算元素的位置和几何结构，这个过程称为重排。
触发条件：添加、删除、修改 DOM 元素，改变元素的尺寸（如宽度、高度、边距、填充等），改变窗口大小，滚动页面等，都可能触发重排。
性能影响：重排比重绘的性能开销更大，因为它涉及到整个文档的重新计算布局，可能影响到页面上所有元素的位置和尺寸。因此，重排对性能的影响通常比重绘大得多。

优化建议

为了优化性能，应尽量减少重排和重绘的次数：

减少DOM操作：尽量减少对DOM的直接操作，可以使用文档片段（DocumentFragment）或批量操作DOM。
使用类控制样式变化：通过添加或移除CSS类来改变样式，而不是直接修改样式属性，这样可以减少重排和重绘的次数。
避免使用表格布局：表格布局的重排成本较高，应尽量使用Flexbox或Grid布局。
使用硬件加速：在可能的情况下，使用CSS3的硬件加速特性（如 transform 和 opacity）可以减少重排的性能影响。

让元素居中的方式有哪几种

水平居中: margin: 0 auto;
文本居中: text-align: center;
定位居中: position: absolute; 配合 transform: tranlate(-50%, -50%)
使用flex
使用grid
使用flex + margin: auto;
使用定位(四个方向为0) + margin: auto;

定位+transform

.paren-box {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f00;
}

.child-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: #0f0;
}

定位+margin

.paren-box {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f00;
}

.child-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: #0f0;
}

CSS中有哪些继承和非继承的属性

在CSS中，只要跟字体列表表格相关的属性，都会被继承!

如字体 字体大小 字体颜色 字体粗细 字体样式 字体格式 行高 等!

如列表 列表样式

如表格 合并方式 边框间距 表格标题的位置

鼠标样式

继承的属性(font)

主要根字体有关的属性，大多都可继承，字体大小颜色字体行高字体样式字体间距首行缩进等...

color：文本颜色。
font-family：字体系列。
font-size：字体大小。
font-weight：字体粗细。
font-style：字体样式（如斜体）。
line-height：行高。
letter-spacing：字母间距。
word-spacing：单词间距。
text-align：文本对齐方式。
text-indent：首行缩进。
text-transform：文本转换（如大写、小写）。
white-space：空白符处理。
visibility：元素的可见性。
opacity：元素的透明度。
cursor：鼠标指针样式。

还有些列表样式相关 例如: list-style!

非继承属性

主要设置盒子元素相关属性，如宽度高度背景内外边距边框阴影浮动定位等...

width：元素的宽度。
height：元素的高度。
margin：元素的外边距。
padding：元素的内边距。
border：元素的边框。
background：元素的背景。
position：定位方式。
top、right、bottom、left：定位偏移。
float：浮动属性。
clear：清除浮动。
display：元素的显示类型。
z-index：元素的堆叠顺序。
overflow：溢出内容的处理方式。

有没有用过预处理器

在 css 样式编写中，是没有逻辑表达式这种概念的，这就会导致在书写时会产生大量重复的 css 样式 !
预编译器，对css语法编写做了增强写法，像其它开发语言一样，可以进行逻辑判断，混入，函数，遍历等逻辑功能!
常用的预处理器包含: scss less~