部分CSS笔试题讲解

Fantastic_sj

于 2025-08-25 19:53:50 发布

阅读量360

点赞数 7

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_37570371/article/details/150778959

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)

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

计算规则（从高到低）：

!important - 最高优先级（但应尽量避免使用，难以覆盖）。
内联样式 - style="color: red;" (优先级约为 1000)。
ID 选择器 - #header (优先级为 0100)。
类选择器、属性选择器、伪类 - .class, [type="text"], :hover (优先级为 0010)。
元素选择器、伪元素 - div, ::before (优先级为 0001)。
通配符、关系选择器 - *, >, +, ~ (优先级为 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. 实现透明效果的方法

opacity:
- 设置元素的整体不透明度，包括其所有内容。
- 值从 0.0 (完全透明) 到 1.0 (完全不透明)。
- opacity: 0.5;
RGBA / HSLA 颜色:
- 仅设置背景色或文字颜色的透明度，不影响元素的其他内容（如子元素、边框）。
- background-color: rgba(255, 0, 0, 0.5); (红色，50%透明)
- color: hsla(120, 100%, 50%, 0.3); (绿色，30%透明)
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; /* 保持最后一帧状态 */
}