在前端开发领域，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：

使用定位 + transform：

不定宽高：

使用定位 + transform：

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

CSS 实现方式：

单行：

多行：

兼容性解决方案：

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

方法一：利用 vw 单位：

方法二：利用 padding-bottom：

三、性能优化

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

集中改变样式：通过改变类的方式集中改变样式，减少重绘和重排的次数。

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

提升为合成层：使用 will-change 属性将元素提升为合成层，减少重绘和重排的性能开销。

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

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

四、高级特性

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

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

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

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

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

五、面试题实战

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

从属关系：

• @import 是 CSS 提供的语法规则，只能加载 CSS 文件。
• <link> 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS 等。

加载顺序：

• <link> 标签引入的 CSS 文件会并行下载，不阻塞页面渲染。
• @import 引入的 CSS 文件会串行下载，可能阻塞页面渲染。

兼容性：

• <link> 标签在所有浏览器中都支持。
• @import 在 IE5+ 中支持。

DOM 可控性：

• <link> 标签可以通过 JavaScript 动态修改。
• @import 无法通过 JavaScript 控制。

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

方法一：使用 flex：

方法二：使用 position 和 margin：

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

使用媒体查询：

使用流式布局：

结合栅格系统：