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：

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

  • 使用定位 + transform：

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

• 不定宽高：

  • 使用定位 + transform：

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

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

• CSS 实现方式：

  • 单行：

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

  • 多行：

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

• 兼容性解决方案：

  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 单位：

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

• 方法二：利用 padding-bottom：

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

三、性能优化

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

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

  const theme = isDark ? 'dark' : 'light';
  ele.setAttribute('className', theme);
  

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

  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 属性将元素提升为合成层，减少重绘和重排的性能开销。

  #target {will-change: transform;
  }
  

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

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

四、高级特性

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

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

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

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

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

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

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

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：

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

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

• 方法二：使用 position 和 margin：

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

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

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

• 使用媒体查询：

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

• 使用流式布局：

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

• 结合栅格系统：

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