博客站

以下是一份全面的CSS面试题整理，涵盖了基础、进阶和高级知识点，适合不同层次的开发者准备面试。

CSS 基础

1. 什么是 CSS？它的作用是什么？
2. CSS 的三种引入方式是什么？它们的优先级如何？
   • 内联样式
   • 内部样式表
   • 外部样式表
3. CSS 选择器有哪些类型？
   • 元素选择器
   • 类选择器
   • ID 选择器
   • 属性选择器
   • 伪类选择器（如 :hover）
   • 伪元素选择器（如 ::before）
   • 组合选择器（如 div > p）
4. CSS 的优先级是如何计算的？
   • 优先级规则：!important > 内联样式 > ID 选择器 > 类选择器 > 元素选择器
5. 如何隐藏一个元素？
   • display: none;
   • visibility: hidden;
   • opacity: 0;
6. 什么是盒模型？标准盒模型和怪异盒模型的区别是什么？
   • 标准盒模型：width 和 height 只包含内容区域
   • 怪异盒模型：width 和 height 包含内容、内边距和边框
   • 通过 box-sizing 属性切换：content-box（标准）和 border-box（怪异）
7. 如何实现水平居中和垂直居中？
   • 水平居中：
     • 文本：text-align: center;
     • 块级元素：margin: 0 auto;
   • 垂直居中：
     • Flexbox：display: flex; align-items: center; justify-content: center;
     • Grid：display: grid; place-items: center;
     • 绝对定位：top: 50%; left: 50%; transform: translate(-50%, -50%);
8. 什么是浮动（float）？如何清除浮动？
   • 浮动用于实现文字环绕效果
   • 清除浮动方法：
     • 使用 clear: both;
     • 父元素使用 overflow: hidden;
     • 使用伪元素清除浮动：

       .clearfix::after {
           content: "";
           display: block;
           clear: both;
       }
       

CSS 进阶

1. 什么是 BFC（块级格式化上下文）？如何创建 BFC？
   • BFC 是一个独立的渲染区域，内部元素不会影响外部元素
   • 创建 BFC 的方法：
     • float 不为 none
     • position 为 absolute 或 fixed
     • display 为 inline-block、table-cell、flex 等
     • overflow 不为 visible
2. Flexbox 布局有哪些常用属性？
   • 容器属性：
     • display: flex;
     • flex-direction
     • justify-content
     • align-items
     • flex-wrap
   • 子项属性：
     • flex-grow
     • flex-shrink
     • flex-basis
3. Grid 布局有哪些常用属性？
   • 容器属性：
     • display: grid;
     • grid-template-columns
     • grid-template-rows
     • gap
   • 子项属性：
     • grid-column
     • grid-row
4. 什么是 CSS 预处理器？常见的预处理器有哪些？
   • CSS 预处理器扩展了 CSS 的功能，支持变量、嵌套、混合等
   • 常见预处理器：Sass、Less、Stylus
5. 如何实现响应式布局？
   • 使用媒体查询（@media）
   • 使用相对单位（如 %、em、rem、vw、vh）
   • 使用 Flexbox 或 Grid 布局
6. 什么是 CSS 变量？如何使用？
   • 定义变量：--main-color: #333;
   • 使用变量：color: var(--main-color);
7. 如何优化 CSS 性能？
   • 减少选择器复杂度
   • 避免使用 @import
   • 使用 minify 压缩 CSS 文件
   • 使用 will-change 优化动画性能

CSS 高级

1. 什么是 CSS 动画？如何实现？
   • 使用 @keyframes 定义动画
   • 使用 animation 属性应用动画
   • 示例：

     @keyframes slide {
         0% { transform: translateX(0); }
         100% { transform: translateX(100px); }
     }
     .box {
         animation: slide 2s infinite;
     }
     

2. 什么是 CSS 过渡（transition）？如何实现？
   • 使用 transition 属性实现平滑过渡
   • 示例：

     .box {
         transition: background-color 0.5s ease;
     }
     .box:hover {
         background-color: red;
     }
     

3. 如何实现一个三角形？
   • 使用 border 属性：

     .triangle {
         width: 0;
         height: 0;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 100px solid red;
     }
     

4. 如何实现一个自适应正方形？
   • 使用 padding 百分比：

     .square {
         width: 100%;
         padding-bottom: 100%;
         background-color: red;
     }
     

5. 什么是 CSS 伪元素？如何使用？
   • 伪元素用于在元素内容前后插入内容
   • 示例：

     .box::before {
         content: "Before";
     }
     .box::after {
         content: "After";
     }
     

6. 如何实现一个多列布局？
   • 使用 column-count 和 column-gap：

     .multi-column {
         column-count: 3;
         column-gap: 20px;
     }
     

CSS 实战问题

1. 如何实现一个固定宽高比的元素？
   • 使用 padding 百分比：

     .aspect-ratio {
         width: 100%;
         padding-top: 56.25%; /* 16:9 宽高比 */
         position: relative;
     }
     .aspect-ratio > * {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
     }
     

2. 如何实现一个吸顶效果？
   • 使用 position: sticky;：

     .sticky {
         position: sticky;
         top: 0;
     }
     

3. 如何实现一个毛玻璃效果？
   • 使用 backdrop-filter：

     .glass {
         background: rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(10px);
     }
     

这份面试题涵盖了 CSS 的核心知识点，适合面试前复习和查漏补缺。希望对你有帮助！