常见的 CSS 知识点整理

1. 盒模型（Box Model）是什么？标准盒模型和 IE 盒模型的区别？

• 答案：
  CSS 盒模型将元素视为一个盒子，由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。
  • 标准盒模型：元素的宽度（width）仅指内容宽度。
  • IE盒模型：元素的宽度包括内容、内边距和边框的总和。
  • 切换方式：

    box-sizing: content-box; /* 标准模式（默认） */
    box-sizing: border-box;  /* IE模式（推荐使用） */
    

---

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

• 答案：
  优先级从高到低依次为：
  1. !important（慎用，破坏自然优先级）
  2. 内联样式（如 style="color: red;"）
  3. ID 选择器（#id）
  4. 类/伪类/属性选择器（.class, :hover, [type="text"]）
  5. 元素/伪元素选择器（div, ::before）
  • 示例：
    .box #title 的优先级高于 div.title（ID > 类 > 元素）。

---

3. 如何让一个元素水平垂直居中？

• 答案：
  方法 1：Flex 布局（推荐）

  .parent {display: flex;justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */
  }
  

  方法 2：绝对定位 + 平移

  .child {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); /* 自身宽高的一半 */
  }
  

---

4. Flex 布局和 Grid 布局的区别？

• 答案：
  • Flex：一维布局，适合按行或列排列元素（如导航栏、卡片列表）。
  • Grid：二维布局，可以同时控制行和列（如复杂网格、仪表盘）。
  • 比喻：
    Flex 像排队，只能横向或纵向对齐；Grid 像棋盘，可以精确控制每个格子的位置。

---

5. 什么是 BFC？如何触发 BFC？

• 答案：
  • BFC（块级格式化上下文）：一个独立的渲染区域，内部元素不会影响外部。
  • 触发条件：
    • overflow: hidden
    • float: left/right
    • position: absolute/fixed
    • display: inline-block/flex/grid
  • 作用：
    • 解决外边距重叠（如父子元素 margin 合并）。
    • 清除浮动（防止父元素高度塌陷）。

---

6. 如何实现响应式设计？

• 答案：
  1. 媒体查询（Media Queries）：

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

  2. 相对单位：使用 %、vw、rem 替代固定像素。
  3. 弹性布局：Flex/Grid 自动适应屏幕尺寸。
  4. 图片适配：srcset 属性或 max-width: 100% 防止图片溢出。

---

7. CSS 动画（animation）和过渡（transition）的区别？

• 答案：
  • transition：需要触发条件（如 hover），只能定义开始和结束状态，适合简单变化（如颜色渐变）。

    .box { transition: width 0.5s ease; }
    .box:hover { width: 200px; }
    

  • animation：通过关键帧（@keyframes）控制全过程，可自动播放，适合复杂动画（如旋转、连续运动）。

    @keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }
    }
    .box { animation: spin 2s infinite; }
    

---

8. 如何清除浮动（clearfix）？

• 答案：
  原因：父元素未设置高度时，子元素浮动会导致父元素高度塌陷。
  解决方法：

  .parent::after {content: "";display: block;clear: both; /* 清除左右浮动 */
  }
  

---

9. 伪类（:hover）和伪元素（::before）的区别？

• 答案：
  • 伪类：选择元素的特定状态（如 :hover、:focus）。
  • 伪元素：在元素内创建虚拟内容（如 ::before、::after）。
  • 示例：

    .button:hover { color: red; }          /* 伪类 */
    .button::before { content: "★"; }     /* 伪元素 */
    

---

10. CSS 如何实现多列等高布局？

• 答案：
  方法 1：Flex 布局

  .parent {display: flex;
  }
  /* 子元素自动等高 */
  

  方法 2：Grid 布局

  .parent {display: grid;grid-auto-flow: column; /* 按列排列 */
  }
  

---

附：高频进阶问题

• 层叠上下文（z-index 生效条件）：需设置 position 非 static。
• CSS 预处理器（Sass/Less）的作用：变量、嵌套、混合（mixin）等。
• CSS 性能优化：减少重排（如用 transform 替代 top/left）、压缩代码。

以上问题覆盖了 CSS 的核心概念和实际应用场景，建议结合代码实践加深理解！