关于 CSS 的面试问题和练习

如果您需要面试某人，评估其 CSS 技能和知识，那么在现场想出问题可能会有点困难。我想到了一些想法，并将其汇总供参考。

练习

查看候选人的实际作品与他们所说的同样重要。甚至可能更重要的是观察候选人现场完成练习的过程。以下是一些难度不大的练习，任何有 CSS 经验的人都能完成。观察/倾听他们完成练习的过程将非常宝贵。CodePen 上的 协作模式非常适合这种情况（仅供参考）。

创建此按钮

我在 Mobify 的 CodePen 账户上看到了 这个想法。给候选人一个按钮的图片，并告诉他们：

仅使用 CSS 属性，重新创建此按钮。

这将是对候选人 CSS3 技能的绝佳测试。此按钮使用了各种 CSS3 功能。我将关注以下几点：

• 他们是如何处理 多重边框 的？box-shadow 可能是这里最好的方法。
• 他们是否使用了 text-transform: uppercase; 来设置文本？这将是最好的做法。
• 他们是如何处理星星的？伪元素将是一个不错的选择。他们使用了 Unicode 吗？图标字体？
• 他们是否注意到了微妙的 text-shadow？
• 他们是如何分割按钮主体部分的背景的？一个没有渐变的 linear-gradient 将是一个不错的技巧。或者 box-shadow。
• 他们是否 谨慎 处理了嵌套的圆角？

希望我没有破坏 Mobify 的招聘流程！但老实说，我认为这些东西很难作假。要么你能做并谈论它，要么你做不到。

修复侧边栏

此处的右侧边栏已落到内容下方。 展示一些修复此问题的不同方法。

即使两列分别为 75% 和 25% 宽，并以相反的方式浮动，侧边栏仍然下沉。原因是列的宽度实际上并没有加起来达到 100%——由于填充，它们加起来超过了 100%。有多种方法可以修复它：

• 在合适的元素上使用 box-sizing: border-box; 是最有效的修复方法。
• 使用 calc() 来计算宽度并去除 1rem 的填充是另一种方法。
• 将填充应用到添加的内部包装元素而不是列上，是一种与非常广泛的浏览器兼容的修复方法。
• 调整数字以使计算结果正确是另一种方法。例如，将列的宽度缩小 4%，并使用 2% 作为填充。

还有其他方法。候选人能够想到的解决方案越多，他们解决问题的能力就越有创意和多样性。

使此固定宽度设计自适应。

这是一个设计。它是一个固定宽度为 800px 的设计。尽力使其在任何屏幕尺寸下都能更合适地适应屏幕。

这只是响应式设计的一个要素（他们可能至少应该熟悉），但它是一个重要的要素。它可以帮助证明他们能够进行空间思考，并对布局做出合理的决策。我将关注以下几点：

• 将像素宽度更改为百分比（他们是如何处理数学计算的？）
• 他们是否对大屏幕或仅对小屏幕做了特殊处理？
• 他们是否尝试使用响应式图像解决方案？
• 新设计是否保留了原始设计中固有的重要性层次结构？
• 他们是否会向你提出问题？（这里有很多问题可以问，包括可能有哪些其他资源可用。）
• 他们是否进行了测试？（以确保它确实有效，并发现诸如缺少元标记之类的问题。）

用图片替换此徽标标记。

<a href="/" class="logo">Company</a>

可访问且语义化的图像替换一直是 CSS 的一个主题，多年来“最佳方法” 发生了变化。要求他们向你展示如何用多种方法完成此操作，将是了解他们实际使用 CSS 多久的一种方式。这不仅是需要知道如何做的事情，而且知道如何用多种方法完成它，也证明了他们内部工具箱的深度。

搜索如何查找 backface-visibility 的默认值。

能够快速有效地搜索信息是任何开发人员工作的重要组成部分。他们是否擅长搜索？他们是否找到了正确的答案？他们在结果页面中是否使用了特定的可信来源？

也许可以不用“搜索”来表达问题，看看他们使用哪个搜索引擎。这里没有特别的偏见，但如果他们使用的不是 Google，那么他们使用其他任何搜索引擎的效率是否符合你的预期？

需要问的问题

几年前，Darcy Clarke 率先提出了这些问题。我将更新其中一些问题，并添加一些我自己的问题，并进行一些详细说明。

什么是 CSS 中的“盒子模型”？哪些 CSS 属性是它的一部分？

CSS 盒子模型是理解布局、大小等的基础。它由以下部分组成：

• 宽度和高度（或者在没有这些的情况下，默认值和内部内容）
• 内边距
• 边框

外边距与此相关，但从技术上讲不是它的一部分。如果候选人知道/提到了这一点，我会加分，但不会因为包含它而扣分。

什么是 Sass、Less 和 Stylus？人们为什么使用它们？像 Compass 这样的工具如何与 Sass 相关？

它们是 CSS 预处理器。它们是 CSS 之上的抽象层。它们是一种特殊的语法/语言，可以编译成 CSS。它们通过变量和 mixin 等功能简化了 CSS 的管理，例如处理供应商前缀（以及其他功能）。它们使遵循最佳实践变得更容易，例如连接和压缩 CSS。

如果候选人知道它们之间的区别和/或有使用它们的经验，则加分。如果他们知道 Compass、Bourbon、LESSHat、Nib 等工具以及它们之间的关系，则加分更多。

遇到 CSS 问题时，你通常会参考哪些在线资源？

善于使用 Google 搜索遇到的问题是一项宝贵的职业技能。这没什么好羞愧的。真正可耻的是因为“你应该知道这个”而浪费时间。如果你没有时间进行上述 Google 搜索练习，仅仅询问一些资源也能说明一些问题。

Google 是一个不错的答案（因为这是事实，我们都知道）。但能够说出一些具体的网站，则表明他们已经多次进行过类似操作，并且熟悉他们访问过的网站并知道自己最喜欢的网站。例如，MDN（Mozilla 开发者网络）就是一个不错的答案。

描述一下“重置”CSS 文件的作用以及它有什么用。你熟悉 normalize.css 吗？你理解它们之间的区别吗？

重置在 CSS 中非常常见，任何从事前端开发的人肯定都用过它们。他们是否盲目地使用，或者他们知道为什么使用？原因本质上是不同的浏览器对元素有不同的默认样式，如果你根本不处理这个问题，你可能会冒着不同浏览器中的设计看起来不必要地不同的风险，甚至可能出现更严重的问题。

Normalize 可以称为 CSS 重置的替代方案。它不是清除所有样式，而是提供了一组合理的默认样式。它不会取消跨浏览器和合理的（例如粗体标题）已经一致的内容。这样，它做的比重置少一些。它也比重置做得多，因为它处理你可能从未考虑过的一些问题，例如 HTML5 音频元素的不一致性或使用 sub 和 sup 元素时的行高不一致性。

清除浮动有哪些不同的技术？

浮动 仍然非常普遍。在本文发布时，它仍然可能是构建布局和网格最跨浏览器一致的方式。任何使用过浮动的人都知道浮动塌陷。也就是说，浮动元素不会添加到父元素的高度。例如，如果父元素仅包含浮动元素，则它将塌陷为零高度。你可以这样处理：

• 使用 clearfix（使用微型 clearfix 加分）。
• 将父元素也设置为浮动。
• 在父元素上使用除“visible”之外的其他 overflow 属性（列出缺点，例如截断阴影，加分）。

创建新的块级格式化上下文加分。使用类似<br style="clear: both;">的方法可能会扣分。

作为一个加分题，你可以让他们比较使用内联块和浮动来构建网格。好的答案：无论哪种方式都有问题。使用内联块，你需要处理空白字符问题。使用浮动，你需要处理清除问题。

什么是精灵图（Sprites），为什么要使用它们？你如何创建它们？精灵图有哪些可能的替代方案？

精灵图 本质上是将多个图像组合成一个。性能是它们被使用的主要原因。一般来说，网站最慢的操作是请求资源。网站需要发出的请求越少，速度就越快。速度快 = 好。将原本需要多次请求的内容合并成一次请求 = 好。

询问他们如何制作精灵图可以确定他们是否真的非常熟悉它们。手动创建精灵图当然是一种可能，但效率不高。有一些辅助工具，例如SpriteCow 和 SpriteMe，使用 Compass 创建精灵图，或 Grunticon。听听他们实际的工作流程总是很有趣的。

精灵图是栅格图像。当询问替代方案时，好的答案可能与精灵图通常用于图标，而图标通常不需要是栅格图像这一事实有关。SVG 堆栈、图标字体、Unicode……

在 CSS 中，会遇到哪些可访问性问题？

隐藏内容 是一个比较大的问题。仅当您同时尝试在视觉上隐藏内容和内容本身时，才可以使用display: none;。

CSS 控制颜色，因此颜色可访问性 也很重要。焦点样式 也非常重要，并且由 CSS 直接控制。

还有很多其他与 HTML 和 JavaScript 相关的内容，提及这些内容是很好的，但我认为将问题集中在 CSS 上以迫使他们进行集中思考很有意思。

内联、内联块和块级元素有什么区别？

提到一些具体的细节，例如你不能转换内联元素，加分。

你使用什么工具进行跨浏览器测试？

他们应该有一些策略。也许是基于 Web 的工具，例如BrowserStack。也许是基于 VM 的工具，例如Virtual Box。也许是不同的实际电脑。

前端设计的职责之一是确保网站在所有可能的地方都能正常工作（基于已确定的支持范围）。你可能不喜欢它，但你不能讨厌它。“这就是工作，你期望是什么样的工作？”

你最喜欢的网页设计工作流程工具有哪些？

他们喜欢用什么代码编辑器？他们从哪里获得灵感？他们对版本控制有什么经验？他们在之前工作的地方是如何进行质量保证的？支持？他们使用过哪些不同的部署方法？他们是否了解 Photoshop 或其他视觉设计软件替代方案？他们是否熟悉终端？

这些只是一些例子，了解他们使用哪些软件来完成工作很有趣。了解他们使用的工具（以及更好的是，他们喜欢的工具）很有意思。加分项：对某些工具表现出兴奋感。

假设你在你的一个网站的 Internet Explorer 8 中发现了一个渲染问题，并且你决定要支持它。你会如何解决这个问题？

这将是一个替代问题，而不是泛泛地询问跨浏览器测试。更具体一些。也许一个更难的替代问题是将 IE 8 替换成类似“运行 Android 2.3 的 Google Nexus”。他们会找到模拟器吗？他们会寻求设计实验室的帮助吗？他们会要求公司为测试提供设备补贴，并制定某种智能计划吗？他们会找一个朋友帮忙吗？

响应式设计到底是什么？

它是关于让网站在任何网络环境下都能正常工作。不同的设备具有不同的尺寸和不同的功能。响应式设计就是采用一个代码库，并使其适用于所有设备。其中一部分是媒体查询和不同的视觉效果。一部分是不同的资源（例如，处理触摸与点击的不同 JavaScript 或适应屏幕的不同图像）。

你以前使用过网格布局吗？你对此有什么看法？

他们为什么需要网格？他们是如何构建网格的？是自建的还是使用了网格工具？他们喜欢这个网格工具吗？他们使用了什么类型的类名？他们是先做移动端还是先做桌面端？这是否有帮助或阻碍？他们是否会在任何项目中自动使用网格？

SVG 的好处是什么？

SVG 是一种基于矢量的图像格式。它是一种高效的格式（文件大小小）。你可以缩放它们，并且它们在任何尺寸下都能保持清晰度（提及光栅在极小尺寸下可能占上风可以加分）。你还可以使用 CSS 和 JavaScript 以及 SVG 特定的滤镜来影响它们的部分，例如模糊。

你曾经为网站创建过打印样式表吗？

这有点表明他们以前在网站方面“加倍努力”。他们采取了什么方法？他们是如何测试它的？

假设你被分配了一个使用非标准网页字体的设计编码任务，你会如何处理？

这是一个引导他们谈论 @font-face 及其工作原理的非引导式问题。讨论它作为核心 CSS 技术的工作原理非常棒，以及讨论提供字体的服务，这些服务可以简化工作，例如 Google Fonts、Typekit、Font Deck、Cloud Typography 等。

如果了解一些鲜为人知的信息，例如 @font-face 语法的历史或Firefox 跨源字体的問題，可以加分。

解释一下这个 CSS 选择器中发生了什么。

[role=navigation] > ul a:not([href^=mailto]) {

}

它选择的是不是电子邮件链接的锚链接，这些链接是任何具有“导航”角色属性的元素的直接子元素的无序列表的后代。

能够用语言表达一个选择器证明你理解它们，并且证明他们能够传达复杂的科技主题。

你的想法

在面试与 CSS 相关的职位时，你被问过什么问题？或者你问候选人的问题？或者你认为哪些问题总体上会比较好？