web前端面试系列: CSS常见面试题

以下是一份涵盖基础与进阶知识的Web前端CSS面试题及参考答案,共20题:


一、基础概念

1. 什么是盒模型(Box Model)?标准盒模型与替代盒模型的区别?

答案
盒模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。

  • 标准盒模型:元素的宽度(width)仅指内容宽度,总宽度 = width + padding + border + margin
  • 替代盒模型box-sizing: border-box):元素的宽度包含内容、内边距和边框,总宽度 = width(已含padding和border) + margin

2. CSS选择器优先级如何计算?

答案
优先级从高到低:

  1. !important
  2. 内联样式(style=""
  3. ID选择器(#id
  4. 类/伪类/属性选择器(.class, :hover, [type="text"]
  5. 元素/伪元素选择器(div, ::before
  6. 通配符/继承样式(*

同级别时,后定义的样式覆盖前者。


二、布局相关

3. 如何实现元素水平垂直居中?

答案

  • Flexbox
    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
  • Grid
    .parent {
      display: grid;
      place-items: center;
    }
    
  • 绝对定位 + 平移
    .child {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    

4. Flexbox中flex: 1的含义是什么?

答案
flex: 1flex-grow: 1flex-shrink: 1flex-basis: 0% 的简写。表示元素会根据容器空间伸缩,占满剩余空间。


5. Grid布局中fr单位的作用?

答案
fr(Fractional Unit)按比例分配容器剩余空间。例如 grid-template-columns: 1fr 2fr; 表示两列宽度比例为1:2。


三、响应式设计

6. 如何实现移动端适配?

答案

  • 使用视口标签:<meta name="viewport" content="width=device-width, initial-scale=1">
  • 媒体查询(@media)根据屏幕尺寸应用不同样式。
  • 使用相对单位(remvw)替代固定单位(px)。

7. 媒体查询(Media Query)的常见应用场景?

答案
根据设备特性(如屏幕宽度、方向、分辨率)调整样式,例如:

@media (max-width: 768px) {
  /* 移动端样式 */
}

四、进阶特性

8. 什么是BFC(块级格式化上下文)?如何触发?

答案
BFC是独立的渲染区域,内部元素布局不影响外部。触发方式:

  • float 不为 none
  • overflow 不为 visible
  • display: inline-block/table-cell/flex
  • position: absolute/fixed

9. CSS动画中transitionanimation的区别?

答案

  • transition:简单过渡效果,需要触发条件(如:hover),定义开始和结束状态。
  • animation:通过@keyframes定义复杂动画,可自动播放、循环、控制中间状态。

10. 如何优化CSS性能?

答案

  • 减少选择器复杂度(如避免嵌套过深)
  • 使用transformopacity触发GPU加速
  • 避免频繁重排(如减少直接修改width
  • 压缩CSS文件,合并重复代码

五、常见问题

11. 如何清除浮动?

答案

  • 父元素添加 overflow: auto/hidden
  • 使用伪元素:
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
    

12. display: nonevisibility: hidden的区别?

答案

  • display: none:元素不占据空间,无法交互,触发重排。
  • visibility: hidden:元素占据空间,无法交互,触发重绘。

六、其他

13. CSS预处理器(如Sass/Less)的优势?

答案

  • 变量、嵌套语法、混合(Mixin)、函数等特性提升代码复用性。
  • 支持模块化开发,便于维护。

14. 伪类(Pseudo-class)与伪元素(Pseudo-element)的区别?

答案

  • 伪类:选择元素的特定状态(如:hover, :nth-child(n))。
  • 伪元素:创建虚拟元素(如::before, ::first-line)。

完整题目列表(共20题)

  1. 盒模型及两种模型的区别
  2. CSS选择器优先级计算
  3. 水平垂直居中实现方案
  4. flex: 1的含义
  5. Grid中fr单位的作用
  6. 移动端适配方法
  7. 媒体查询的应用场景
  8. BFC的概念与触发方式
  9. transitionanimation区别
  10. CSS性能优化方法
  11. 清除浮动的方案
  12. display: nonevisibility: hidden区别
  13. CSS预处理器的优势
  14. 伪类与伪元素的区别
  15. 实现等高列布局的方法
  16. position属性的值及其特点
  17. CSS变量(Custom Properties)的使用
  18. 如何实现1像素边框(Retina屏)?
  19. 解释CSS Sprites技术及其优缺点
  20. CSS模块化的解决方案(如CSS Modules、CSS-in-JS)。

以上问题覆盖了CSS的核心知识点,可根据实际需求扩展或调整难度。

posted @   箫笛  阅读(17)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
历史上的今天:
2022-02-19 Express - 使用路由
2022-02-19 Express - 使用中间件
2022-02-19 Express - 使用express进行web开发
点击右上角即可分享
微信分享提示