部分CSS笔试题讲解

1. box-sizing: border-box 的作用

问题： 默认的 CSS 盒模型 (content-box) 中，元素的 width 和 height 属性只指定了内容区域 的尺寸。如果你给元素添加了 padding 或 border，这些值会被加在 width/height 之上，导致元素的实际占用空间变大。

作用： box-sizing: border-box 改变了盒模型的计算方式。它让元素的 width 和 height 属性包含了内容、内边距 (padding) 和边框 (border)。外边距 (margin) 仍然不计入。

示例：

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid red;
}

/* 
默认 content-box 下：
总宽度 = width(200px) + padding-left(20px) + padding-right(20px) + border-left(5px) + border-right(5px) = 250px
*/

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid red;
}

/* 
border-box 下：
总宽度 = width(200px) = 200px
内容区的实际宽度 = width(200px) - padding(40px) - border(10px) = 150px
*/

最佳实践： 很多开发者会使用通配符将其应用于所有元素，以便更直观地控制布局。

*,
*::before,
*::after {
  box-sizing: border-box;
}

---

2. @keyframes 的作用

作用： @keyframes 是 CSS 动画的核心规则，用于定义动画序列中的关键帧 。你可以在其中指定动画在特定时间点应有的样式状态。定义好的关键帧动画需要通过 animation-name 属性应用于元素才会生效。

语法：

@keyframes animation-name {
  0% {
    /* 起始状态样式 */
    opacity: 0;
  }
  50% {
    /* 中间状态样式 */
    transform: scale(1.2);
  }
  100% {
    /* 结束状态样式 */
    opacity: 1;
    transform: scale(1);
  }
}

/* 使用 from/to 关键字 */
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

---

3. transition 属性的作用

作用： transition 用于定义元素在不同状态之间切换时的过渡效果 。它不会自己触发动画，而是在某些状态改变时（如 :hover, :active 或通过 JavaScript 添加/移除类）平滑地过渡属性值。

它是一个简写属性，包含：

• transition-property: 指定要过渡的属性（如 all, opacity, transform）。

• transition-duration: 指定过渡持续的时间（如 1s, 200ms）。

• transition-timing-function: 指定速度曲线（如 ease, linear, ease-in-out）。

• transition-delay: 指定过渡开始前的延迟时间。

示例：

.button {
  background-color: blue;
  transition: background-color 0.3s ease, transform 0.5s; /* 同时过渡多个属性 */
}

.button:hover {
  background-color: darkblue;
  transform: translateY(-5px);
}

---

4. 选择器优先级 (Specificity)

当多条规则作用于同一个元素时，浏览器根据选择器的优先级来决定应用哪条样式。

计算规则（从高到低）：

1. !important - 最高优先级（但应尽量避免使用，难以覆盖）。

2. 内联样式 - style="color: red;" (优先级约为 1000)。

3. ID 选择器 - #header (优先级为 0100)。

4. 类选择器、属性选择器、伪类 - .class, [type="text"], :hover (优先级为 0010)。

5. 元素选择器、伪元素 - div, ::before (优先级为 0001)。

6. 通配符、关系选择器 - *, >, +, ~ (优先级为 0000)。

比较方法： 将选择器的各个部分数量组合成一个四位数 (0, 0, 0, 0)，从左到右依次比较。例如：

• div -> (0,0,0,1)

• .nav li -> (0,0,1,1) (一个类 + 一个元素)

• #submit.button -> (0,1,1,0) (一个ID + 一个类)

• 内联样式 -> (1,0,0,0)

(0,1,1,0) 的优先级高于 (0,0,2,0)，因为第二位（ID）的数字更大。

---

5. 实现透明效果的方法

1. opacity:

   • 设置元素的整体不透明度，包括其所有内容。

   • 值从 0.0 (完全透明) 到 1.0 (完全不透明)。

   • opacity: 0.5;

2. RGBA / HSLA 颜色:

   • 仅设置背景色 或文字颜色的透明度，不影响元素的其他内容（如子元素、边框）。

   • background-color: rgba(255, 0, 0, 0.5); (红色，50%透明)

   • color: hsla(120, 100%, 50%, 0.3); (绿色，30%透明)

3. transparent 关键字:

   • 表示完全透明，是 rgba(0,0,0,0) 的简写。

   • background-color: transparent;

---

6. 实现动画的途径

途径	是什么？	如何实现动画？
CSS3	使用 transition 或 @keyframes + animation 属性。	transition : 响应状态变化。 @keyframes : 定义复杂动画序列，通过 animation: name duration ... 应用。最简单、性能最优的首选方案。
JavaScript	使用 requestAnimationFrame(callback)。	浏览器为动画优化的API，在下次重绘前调用 callback 函数。在函数中手动更新元素的样式（如 element.style.transform）。用于需要极高控制力的复杂JS驱动动画。
SVG	可缩放矢量图形，XML格式。	1. SMIL : <animate> 标签（已不推荐）。 2. CSS : 像操作HTML元素一样为SVG元素添加CSS动画。 3. JavaScript : 操作SVG DOM。非常适合矢量图标、图表的动画。
Canvas	通过JavaScript动态绘制图形的HTML元素。	必须使用 requestAnimationFrame 循环"擦除"并"重绘"每一帧。适合像素操作、游戏、数据可视化等复杂且高性能的图形动画。

如何选择？

• 简单UI交互、过渡效果 ：CSS3（性能最好，开发简单）。

• 复杂、交互式矢量图形 ：SVG + CSS/JS。

• 像素级操作、游戏、复杂可视化 ：Canvas + JS。

• 需要完全用代码控制的复杂动画 ：JS + requestAnimationFrame。

---

7. 让动画在最后一帧保持结束状态

使用 CSS animation 属性中的 animation-fill-mode 子属性。

• animation-fill-mode: none; (默认)：动画结束后，元素跳回初始样式。

• animation-fill-mode: backwards;：在动画延迟期间，元素立即应用第一帧的样式。

• animation-fill-mode: forwards;：动画结束后，元素保持最后一帧的样式。

• animation-fill-mode: both;：同时应用 backwards 和 forwards 的效果。

解决方案：

.element {
  animation: myAnimation 2s ease-in-out;
  animation-fill-mode: forwards; /* 保持最后一帧状态 */
}