CSS面试题汇总

在前端开发领域，CSS 是一项不可或缺的技术。无论是页面布局、样式设计还是动画效果，CSS 都扮演着重要的角色。因此，在前端面试中，CSS 相关的知识点往往是面试官重点考察的内容。为了帮助大家更好地准备面试，本文汇总了一些常见的 CSS 面试题，并提供了详细的解答和分析。

一、基础概念

（一）BFC 是什么？它的触发条件有哪些？

BFC（Block Formatting Context） 是块级格式化上下文，它是一个独立的布局环境，内部的元素布局与外部互不影响。触发 BFC 的方式有很多，常见的有：

设置浮动（float 不为 none）
overflow 设置为 auto、scroll 或 hidden
position 设置为 absolute 或 fixed

应用场景：

解决浮动元素导致父元素高度坍塌的问题
解决非浮动元素被浮动元素覆盖的问题
解决外边距垂直方向重合的问题

（二）CSS 中的盒模型有哪些？它们的区别是什么？

CSS 中有两种盒模型：W3C 盒模型 和 IE 盒模型。

W3C 盒模型 ：元素的总宽度 = width + padding + border + margin
IE 盒模型 ：元素的总宽度 = width（width 包括 padding 和 border）

在现代浏览器中，默认使用 W3C 盒模型。如果需要使用 IE 盒模型，可以通过设置 box-sizing: border-box 来实现。

（三）CSS 中的 `display` 属性有哪些值？它们的作用是什么？

display 属性用于控制元素的显示类型，常见的值有：

none：元素不显示，且不占据空间
block：块级元素，独占一行
inline：行内元素，不独占一行
inline-block：行内块级元素，可以设置宽高，但不独占一行
flex：弹性布局
grid：网格布局

二、布局与样式

（一）如何实现一个元素的水平垂直居中？

水平垂直居中有多种实现方式，主要分为两类：定宽高和不定宽高。

定宽高：

使用定位 + margin：

css 复制代码

element {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -250px;
  width: 500px;
  height: 500px;
}

使用定位 + transform：

css 复制代码

element {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
}

不定宽高：

使用定位 + transform：

css 复制代码

element {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

（二）如何实现多行文本溢出省略效果？

CSS 实现方式：

单行：

css 复制代码

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行：

css 复制代码

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 行数 */
overflow: hidden;

兼容性解决方案：

css 复制代码

p {
  position: relative;
  line-height: 20px;
  max-height: 40px;
  overflow: hidden;
}
p::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 40px;
  background: -webkit-linear-gradient(left, transparent, #fff 55%);
  background: -o-linear-gradient(right, transparent, #fff 55%);
  background: -moz-linear-gradient(right, transparent, #fff 55%);
  background: linear-gradient(to right, transparent, #fff 55%);
}

（三）如何实现一个自适应的正方形？

方法一：利用 vw 单位：

css 复制代码

.square {
  width: 10vw;
  height: 10vw;
  background: red;
}

方法二：利用 padding-bottom：

css 复制代码

.square {
  width: 10%;
  padding-bottom: 10%;
  height: 0;
  background: red;
}

三、性能优化

（一）如何避免重绘和重排？

集中改变样式：通过改变类的方式集中改变样式，减少重绘和重排的次数。
javascript 复制代码
```
const theme = isDark ? 'dark' : 'light';
ele.setAttribute('className', theme);
```

使用 DocumentFragment ：通过 DocumentFragment 批量操作 DOM，减少重排次数。

javascript 复制代码

var fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
  let node = document.createElement("p");
  node.innerHTML = i;
  fragment.appendChild(node);
}
document.body.appendChild(fragment);

提升为合成层 ：使用 will-change 属性将元素提升为合成层，减少重绘和重排的性能开销。
css 复制代码
```
#target {
  will-change: transform;
}
```

（二）如何优化图片加载？

使用懒加载：对于页面中的图片，采用懒加载的方式，只有当图片进入可视区域时才加载。
使用雪碧图：将多个小图标合并到一张图片中，减少 HTTP 请求次数。
选择合适的图片格式：根据图片的特点选择合适的格式，如 JPEG、PNG、WebP 等。

四、高级特性

（一）CSS 动画的实现方式有哪些？

transition：用于实现简单的过渡动画。

css 复制代码

element {
  transition: all 0.5s ease;
}
element:hover {
  transform: scale(1.2);
}

animation：用于实现复杂的动画效果。

css 复制代码

@keyframes example {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
element {
  animation: example 2s infinite;
}

（二）如何使用 CSS 实现一个三角形？

利用 border 属性可以实现一个三角形：

css 复制代码

div {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: red;
}

五、面试题实战

（一）`@import` 和 `<link>` 的区别

从属关系：
- @import 是 CSS 提供的语法规则，只能加载 CSS 文件。
- <link> 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS 等。
加载顺序：
- <link> 标签引入的 CSS 文件会并行下载，不阻塞页面渲染。
- @import 引入的 CSS 文件会串行下载，可能阻塞页面渲染。
兼容性：
- <link> 标签在所有浏览器中都支持。
- @import 在 IE5+ 中支持。
DOM 可控性：
- <link> 标签可以通过 JavaScript 动态修改。
- @import 无法通过 JavaScript 控制。

（二）如何实现一个三栏布局？

方法一：使用 flex：

html 复制代码

<div class="container">
  <div class="left">left</div>
  <div class="main">main</div>
  <div class="right">right</div>
</div>

css 复制代码

.container {
  display: flex;
}
.left {
  flex-basis: 200px;
  background: green;
}
.main {
  flex: 1;
  background: red;
}
.right {
  flex-basis: 200px;
  background: green;
}

方法二：使用 position 和 margin：

html 复制代码

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="main">main</div>
</div>

css 复制代码

.left, .right {
  position: absolute;
  top: 0;
  background: red;
}
.left {
  left: 0;
  width: 200px;
}
.right {
  right: 0;
  width: 200px;
}
.main {
  margin: 0 200px;
  background: green;
}

（三）如何实现一个响应式布局？

使用媒体查询：

css 复制代码

@media screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

使用流式布局：

css 复制代码

.container {
  width: 100%;
  padding: 0 15px;
}

结合栅格系统：

css 复制代码

.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex: 1;
  padding: 15px;
}

CSS面试题汇总

一、基础概念

（一）BFC 是什么？它的触发条件有哪些？

（二）CSS 中的盒模型有哪些？它们的区别是什么？

（三）CSS 中的 display 属性有哪些值？它们的作用是什么？

二、布局与样式

（一）如何实现一个元素的水平垂直居中？

（二）如何实现多行文本溢出省略效果？

（三）如何实现一个自适应的正方形？

三、性能优化

（一）如何避免重绘和重排？

（二）如何优化图片加载？

四、高级特性

（一）CSS 动画的实现方式有哪些？

（二）如何使用 CSS 实现一个三角形？

五、面试题实战

（一）@import 和 <link> 的区别

（二）如何实现一个三栏布局？

（三）如何实现一个响应式布局？

（三）CSS 中的 `display` 属性有哪些值？它们的作用是什么？

（一）`@import` 和 `<link>` 的区别