CSS 面试问题的答案——第一部分 (1-10/34)
CSS 面试问题的答案——第一部分 (1-10/34)
该材料有助于为前端职位的面试做准备。我回答了 GitHub 存储库中最受欢迎的问题列表中的所有 CSS 问题—— 前端-开发者-面试-问题 .所有这些都是口头问题，所以我会尽量避免在我的答案中出现代码块。
Photo by Erik Karits
1. 什么是 CSS 选择器特异性，它是如何工作的？
我们经常需要了解 CSS 特定性，因为碰巧多个选择器可以匹配 DOM 中的同一个元素。因此，一个选择器将覆盖另一个选择器的某些属性。
在不了解 CSS 特性的情况下，哪个选择器将应用其样式并不总是显而易见的。
CSS 选择器特异性是每个选择器的分数。
该分数需要浏览器知道选择器的优先级以防发生冲突。
选择器由类、id、标签和伪元素组成。
这些项目中的每一个都有其分数。
我们将它们汇总并获得最终分数，或者将其称为选择器的 CSS 特异性。
- ID 选择器 — 100 分
- 类选择器 - 10 分
- 属性——10分
- 元素选择器 - 1 分
因此，某些短选择器通常不如某些扩展选择器强大。
但这也取决于我们里面的物品。
由于长选择器和它们的高特异性，不建议在选择器中构建大的元素链。
最好做一个短选择器。这就是为什么在 less 或 sass 等预处理器文档中，您会找到避免选择器嵌套的建议，因为如果将来需要使用另一个选择器重新定义样式，将很难。
Photo by Jose Antonio Gallego Vázquez
2.“重置”和“规范化”CSS有什么区别？你会选择哪一个，为什么？
重置和规范化对于 Web 开发是必不可少的，以避免 浏览器不一致 .
重置
重置是您获取所有标签并将其属性设置为相同值的过程。大多数情况下，缩进为 0，字体大小、行高为 1，如 14px 和 1.5。
因此：
- p（段落）将没有缩进。这样就不会有上下边距
- H1 标签的大小与 H6 相同，因此我们将标题字体大小重置为某个默认值。
重置后 - 所有标签看起来都一样，然后您需要根据需要设置它们的样式。
规范化
“规范化” 手段 — 设置所有控件的样式，使其在不同的浏览器和环境中具有相同的外观和感觉。
与“重置”不同，它不是使所有字体大小和边距都相同，而是根据一些样式指南设置元素的样式，因此元素在不同浏览器中看起来一致。
因为不同的浏览器对按钮、字段、输入等原生控件有不同的默认 CSS，所以通常需要保持一致。
几乎所有现代 CSS 框架都在使用 Normalizer。
Photo by Baskin Creative Studios
3. 描述浮点数及其工作原理。
Float — 是一个属性 定位 页面上的元素使用流式布局。
这是在规范中出现 flex 和 grid 布局之前定位元素的一种旧方法。
该属性的值是对元素的定义，字符串元素或其他浮动元素将通过该元素环绕它。
块包装器将忽略内部具有 float 属性的元素。
最好用例子来解释：
包装器 A 内部有两个元素 C 和 D。
C和D元素有 向左飘浮 和静态宽度和高度
喜欢 高度：100px；宽度：50px；
包装器 A 的高度是多少？
**正确答案是：
** 零。因为块元素会忽略里面的浮动元素。
Photo by Pixabay
4. 描述 z-index 以及堆叠上下文是如何形成的。
z-index 它的值有助于在上下文堆栈中对定位元素进行排序。 z-index 的值可以是负数、零或任何数字。
为定位、弹性或网格布局模式内的元素形成堆叠上下文。
定位
当位置属性定义为相对、绝对、固定或粘性时，该元素 创建自己的堆栈上下文 .
这意味着所有子元素都在该上下文中。
内部的元素可以通过遵循一些规则相互重叠。
- 后台将是具有负 z-index 的元素。
- 然后将是具有位置的元素：静态。
- 上面——位置不是静态的元素——而是相对的或绝对的
- 具有正 z-index 值的元素将按升序排序。
但是这种排序发生在使用包装器创建的孤立的上下文堆栈中。
必须理解并记住 z-index: 1 百万并不能保证它会高于页面上的所有元素；这一切还取决于它所拥有的堆栈上下文。
弹性和网格模式下的 z-index
您可以在 Grid 和 Flex 中使用 z-index 项进行排序，而无需指定相对位置或其他位置。
从文档
Flex 项目的绘制与内联块 [CSS21] 完全相同，除了使用 order-modified 文档 order 代替原始文档 order 以及 auto 以外的 z-index 值即使 position 是静态的也会创建堆叠上下文。
Photo by Archie Binamira
5. 描述 BFC（块格式化上下文）及其工作原理。
理解这个概念并不容易，但请记住以下两个陈述：
- 块元素——只是一个元素。
- 块格式化上下文 — 是区域。
从规范
块格式化上下文是块元素和浮动元素存在并相互交互的区域。该块上下文知道内部的浮动，因此它不会像常规块元素那样忽略它们。
对于新浏览器，您可以使用显式定义 BFC 的 CSS 属性： 显示：流根；
此外，您可以使用以下示例切换到块格式上下文而不是隐式方式： 溢出：隐藏
为了简单起见，我们需要 BFC：
- 清除修复。对内部的浮动元素采用包装容器
- 如果需要，请避免保证金崩溃。
Photo by Bas Masseus
6. 有哪些不同的清算技术，哪些适用于什么情况？
将清除技术应用于包装浮动元素的容器
因为如果包装器内部有一些浮动元素，它会忽略这些元素的大小。
修复的方法被称为—— 清除修复 .
应用 clearfix 的方法主要有两种：
- 为包装元素启用块格式化上下文
显示：流根或者溢出：隐藏样式。 - 在 CSS 中定义 ：：后 伪元素并应用于它
内容： '';明确：两者；显示：表格；
您可以在各种 CSS 框架 你可以用来 清除修复 像这样：
- 布尔玛——
is-clearfix - 助推器—
清除修复
Photo by Egor Kamelev
7. 您将如何解决特定于浏览器的样式问题？
您需要在本地定义问题。
因此，您应该在本地环境中安装浏览器及其版本。
您可以安装特定的虚拟机来获取 Internet Explorer 9、10 和 11。您可以在 Microsoft 网站上找到它们的映像。
此外，您可以使用基于云的工具进行跨浏览器测试，例如 - 浏览器堆栈 .
当您找出问题的根本原因时，您可以解决它。
如果您需要为某些特定浏览器应用修复程序，您可以使用 现代化 .
在极端情况下——对某些特定浏览器使用 HTML 条件，并在 JavaScript 中检测用户代理。此外，您可以构建一些奇怪的 CSS 选择器，这些选择器仅适用于某些特定版本的浏览器。
Photo by Min An
8. 您如何为功能受限的浏览器提供页面？
如果设备不支持某些特定功能，您仍然可以尝试找到一些技术解决方案，例如—— 填充物 .
但是使用 polyfill 或回退的解决方法通常会导致渲染性能缓慢、增加解决方案的复杂性等问题。
因此，这就是为什么在许多方法和模式中，建议遵循以下策略：
- 优雅降级 ——您为现代浏览器开发 Web 应用程序。在确定某些功能不适用于某些特定设备时，您会尝试寻找替代解决方案或禁用该功能（如果它不重要）。
- 渐进式增强 — 您首先为最有限的设备开发 Web 应用程序，然后为更多功能覆盖的设备扩展您的功能。
最好遵循渐进增强。这种方法更具可预测性，并且在您需要编写的代码中具有更少的技巧和窍门。
Photo by Rafael Barros
9. 有哪些方法可以在视觉上隐藏内容（并使其仅对屏幕阅读器可用）？
据我所知，实现此结果的唯一有保证的方法 1px 框 .
“位置：绝对”、“高度：1px”和“宽度：1”和“溢出：隐藏”。
诸如“可见性：隐藏”或“显示：无”之类的方法会有所帮助，因为屏幕阅读器通常会解析样式并忽略不可见块中的隐藏内容。
Photo by Vlado Paunovic
10. 你用过网格系统吗？如果用过，你更喜欢什么？
原生网格 系统——CSS Grid 已经在所有现代浏览器中实现，因此开发人员可以在某些用例中使用它，但大多数情况下，我们仍然需要使用 flexbox 或 float 来制作网格系统。
最好不要重新发明轮子，而是使用一些现有的网格系统。
你可以找到一些 独立网格系统 喜欢：
- FlexBox 网格 基于弹性盒
- 反应网格布局 （对于 React 库）
但更多时候，开发人员不得不使用 综合网格 项目中使用的组件库或 CSS 框架的系统。
- 引导程序
- 布尔玛
- 基础
- 语义用户界面
- 物化
灵活地为项目选择网格系统是很好的。
如果您构建您的设计系统，开发您的网格系统或使用一些独立版本是有意义的。
如果你的项目已经有一些 CSS 框架，最好选择一个集成的。
概括
我希望这些材料不仅有助于面试准备，而且有助于更好地理解 CSS 的共同点。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
