热门 CSS 面试问题及详细解答✌️🤩✌️ 第一部分

2025-05-27

热门 CSS 面试问题及详细解答✌️🤩✌️ 第一部分

阅读 CodeThat.today 上的原文

CSS 往往会给开发者带来过多的麻烦，我们对此并不责怪。众所周知，使用 CSS 非常繁琐且耗时，尤其是在你拥有详细的设计需求，并且老板拿着放大镜的情况下 😎🔎。

在面试方面，我利用这个机会整理了一份基本能力测试清单，涵盖了 CSS 的基础知识及其解释。这可以帮助你轻松应对 CSS 相关问题，最重要的是，帮助你理解 CSS 中各种问题发生的原因。

我首先列出了所有问题，然后在本文末尾列出了所有答案。

这就是它。这是任何值得尊敬的前端技术人员都应该知道的热门 CSS 面试问题列表。

问题🤔💭

Q1.)链接元素有哪些不同的状态？

Q2.)解释 CSS 继承的概念。

Q3.)默认情况下，所有属性都是继承的。对还是错？

Q4.)写下你能想到的一些简写属性。

Q5.)解释和之间的区别inheritinitial

Q6.)当两个选择器的权重相同时，最常见的后果是什么？能举个例子吗？

Q7.)解释什么是rem单位以及它是如何工作的。

Q8.)写下的等价物margin: 1rem 2rem 1rem。

Q9.)用简单的语言解释“响应式 CSS”的含义。

Q10.)解释相对单位和绝对单位之间的区别。

Q11.)解释什么是em单位以及它是如何工作的。

Q12.)用户代理或浏览器特定的样式比作者样式更重要。对还是错？

Q13.)包含 ID 选择器是一种好的做法吗？为什么？

Q14.)我们可以覆盖标记为 !important 的内联样式吗？

Q15.)就特异性而言，通用选择器 (*) 和组合符 (>、+、~) 选择器对特异性有影响吗？例如，h1 ~ p比 更具体吗p？

Q16.)就特异性而言，伪类或属性选择器比类选择器更重要、更不重要还是同等重要？

Q17.)无单位值和有指定单位的值之间有什么区别。

Q18.)如果声明有冲突，应用样式时以下哪一个优先顺序是正确的，为什么？

  1. 不同的脚本来源或重要性 -> 内联样式 -> 声明样式的顺序
  2. 选择器特异性 -> 内联样式 -> 声明样式的顺序
  3. 内联样式 -> 样式声明顺序 -> 选择器特殊性

Q19)鉴于下面的代码片段：

#main-nav a {
  color: white;
  background-color: green;
  padding: 5px;
  text-decoration: none;
}

.featured {
  background-color: orange;        1
}
Enter fullscreen mode Exit fullscreen mode 
<div id="main-nav">
  <a href="#" class="featured">Bonus</a>
</div>
Enter fullscreen mode Exit fullscreen mode

我们注意到链接featured没有以橙色背景渲染。如何重构规则集使其正常工作？

Q20.)给定以下样式：

body {
  font-size: 16px;
}

.block {
  font-size: 1.5em;             
  padding: 1.5em;               
}
Enter fullscreen mode Exit fullscreen mode

填充块的计算值（以像素为单位）是多少？

Q21.)解释什么是rem单位以及它是如何工作的。

Q22.)我们如何将根元素的字体大小设置为 12px em？

Q23.)解释什么是vmin和vmax单位。

Q24.)解释什么是视口以及它包含什么。

Q25.)在元素中设置特定的高度属性有什么危险？

Q26.)在默认的装箱模型中，当你定义两个元素的总宽度为 100% 时，如果添加一些 padding 或 margin 会发生什么？它们会对齐还是并排显示？（注意，这两个组件都是display: block）

Q27.)我们如何使基于百分比的高度发挥作用？

Q28.)负边距如何起作用？

Q29.)列出一些阻止边距折叠的方法。

Q30.)你尝试为元素设置垂直对齐属性，但不起作用。最常见的原因是什么？

Q31.)这是边距折叠的意思吗？请举一个简单的例子。

Q32.)该规则如何box-sizing: border运作？

答案⛅🗽

A1.) link元素中有四种状态：
unvisited、visited、hover和active。

A2.) 当元素对于给定属性没有级联值时，它可以从祖先元素继承一个。

例如下面的笔：

元素p继承了样式的属性html。

A3.) 错误。并非所有属性都会被继承。例如border，或will-change不会被继承。

A4.) 以下是一些简写属性：

  • borderborder-width是、border-style和 的简写border-color

  • paddingpadding-top是、和padding-right的简写padding-bottompadding-left

A5.) 有时，如果同一个元素上同时存在级联值和继承值，则默认情况下会应用级联值。如果您不想这样，可以使用inherit强制使用继承值。

initial将撤消属性的值，使其恢复为默认值。

A6.) 首先，源顺序决定了要应用的样式。例如：

.nav a {
  color: white;
  background-color: green;
  text-decoration: none;
}

a.featured {                    
  background-color: orange;
}
Enter fullscreen mode Exit fullscreen mode

两者具有相同的优先级，因此这里的顺序很重要。这种顺序意味着，如果我们featured在链接上应用一个类，就会
失去background-color: orange;nav 元素的规则。

A7.)rem指的是根元素 em，而不是当前元素 em。rem 不是相对于当前元素，而是相对于根元素。

A8.)margin: 1rem 2rem 1rem等于margin-top: 1rem，margin-left: 2rem，margin-right: 2rem，margin-bottom: 1rem因此左右属性的中间值相同。

A9.) 响应式 CSS 是指根据浏览器窗口的分辨率或屏幕方向（横向或纵向）应用不同规则的样式。例如，它们在移动设备和 Web 上看起来会有所不同。

A10.)absolute像素等单位的值保持不变。例如，5px 始终是 5px，不会因某些因素而改变。relative例如，5em 的含义会根据您在哪个元素或属性上使用 5em 而变化。

A11.)em单位表示当前元素的字体大小，它可以从 HTML 主体中继承。例如，如果我们为字体大小指定一个规则集，那么 1em 的填充将是 16px：

.pad-1em {
  font-size: 16px;
  padding: 1em;          1
}
Enter fullscreen mode Exit fullscreen mode

A12.) 错误。浏览器样式的优先级最低。如果作者声明了样式，则会应用该样式。

A13.) 不可以。ID 选择器非常具体，它们只适用于一个元素，因此很容易尝试用 来克服它们!important。

A14.) 是的，但只有当旁边有相同的规则也同样重要时才行。

<p style="color:blue!important;color:red!important;">blue or red?</p>
Enter fullscreen mode Exit fullscreen mode

A15.) 无。通用选择器 (*) 和组合器 (>、+、~) 对特异性没有影响。

A16.) 相同。伪类或属性选择器具有与类选择器相同的特异性。

A17.) 无单位值（例如 z-index 或 font-weight）没有单位。特殊情况下，我们可以使用0不带长度单位的值来表示长度 px、em 或 rem。

A18.) 正确的是不同的脚本来源或重要性 -> 内联样式 -> 声明样式的顺序

浏览器检查脚本的来源，然后检查内联范围，然后检查特殊性，最后检查声明规则的顺序。

A19.) 尽量避免使用 !important。要么提高以下代码的优先级.featured：

#main-nav a {
  color: white;
  background-color: green;
  padding: 5px;
  text-decoration: none;
}

#main-nav .featured {
  background-color: orange;        
}
Enter fullscreen mode Exit fullscreen mode

或者更好的是，降低特异性a：

nav {                               
  margin-top: 10px;
  list-style: none;
  padding-left: 0;
}

.nav li {                            
  display: inline-block;
}

.nav a {                             
  color: white;
  background-color: green;
  padding: 5px;
  text-decoration: none;
}

.nav .featured {                    
  background-color: orange;
}
Enter fullscreen mode Exit fullscreen mode

A20.) 是 36px。这是因为 padding 的值是在 font-size 的值计算之后才计算的。

在该示例中，1.5 * 16 = 24px，因此填充将在 24px 之上应用 1.5 乘数，因此为 1.5 * 24 = 36px。

A21.)rem指的是根元素的 em，而不是当前元素的 em。rem 不是相对于当前元素，而是相对于根元素。

A22.) 我们需要添加以下规则：


:root {
  font-size: 0.75em;
}
Enter fullscreen mode Exit fullscreen mode

或 12/16 = 0.75

A23.vmin是较小尺寸（高度或宽度）的 1/100，vmax是较大尺寸的 1/100。它们通常用于使元素即使方向发生变化也能始终显示在视口中。

A24.) 视口是浏览器窗口中网页可见的区域。这不包括浏览器的地址栏、工具栏和状态栏（如果有）。

A25.) 如果我们在元素中指定高度属性并添加太多内容，它将溢出容器并在指定的高度之后渲染。

A26.) 它们会换行。所以它们会堆叠在一起，而不是并排放置。这是因为在默认的装箱模型中，你定义了内容的宽度属性，并且所有填充或边框属性都会被叠加。所以最终它们会超出视口的 100%。

A27.) 对于基于百分比的高度，我们需要在元素父块上明确定义高度，因为浏览器需要确定百分比基数。

A28.) 设置负边距可以将元素向相应方向拉动。例如，margin-left: -10px将元素向左侧拉动 10px。

A29.) 我们可以通过以下方式阻止崩溃：

  • 在两个边距之间添加填充或边框属性。
  • 添加overflow: auto到容器中。
  • 向容器添加固定、内联块或绝对位置。
  • 使用弹性盒。
  • 使用table-cell。

A30.) 最有可能的是，该元素是基于块的，因为垂直对齐仅影响内联和表格单元格元素。

A31.) 折叠是指顶部或底部边距重叠的情况。发生这种情况时，会形成单个边距。例如，一个p段落通常具有 1em 的顶部边距和 1em 的底部边距。当我们有两个段落放在一起时，它们不会将两个边距都加在一起，而是在它们之间只产生 1em 的边距。

当顶部和/或底部边距相邻时，它们会重叠，合并形成一个边距。合并后的边距大小等于两个边距中最大的一个。

A32.)box-sizing: border-box会调整盒子模型，在计算元素宽度时包含 padding 和 borders 属性。

文章来源：https://dev.to/theodesp/top-css-interview-questions-with-detailed-answers-part-i-5bjh
Devto 翻译
PREV
TOP战略指南 成为TOP成功案例
NEXT
30 个最佳 JavaScript 面试热身练习（第 2 部分）