CSS 面试问题的答案——第三部分 (21–34/34)
CSS 面试问题的答案——第三部分 (21–34/34)
本文是我最后发表的“CSS 面试题答案”系列。以下是所有文章的列表：
该材料有助于为前端职位的面试做准备。我回答了 GitHub 存储库中最受欢迎的问题列表中的所有 CSS 问题—— 前端-开发者-面试-问题 .所有这些都是口头的，所以我会尽量避免在我的答案中出现代码块。
22. inline 和 inline-block 有什么区别？
内联和内联块是两种不同的 CSS 布局模型。
主要区别在于：
- 可以定义
宽度至 内联块 - 排队 元素忽略
填充顶部,填充底部,边距顶部,边距底部.
23. "nth-of-type" 和 "nth-child" 选择器有什么区别？
::第n个孩子（） 和 ::第n个类型（） 是伪类。
匹配元素列表中的元素。
括号中的值是一行元素中的索引号。
该指数的计算方式不同 第n个孩子 和 第n个类型 以防在左侧定义元素 ::第n个类型 .
行为相同：
.main :nth-child(3) == .main :nth-of-type(3) 选择任何第三个元素 。主要的 容器。
.main :nth-child(3) == .main :nth-of-type(3) 选择任何容器中的任何第三个元素。
（同样的，因为我们没有在左侧定义一个特定的选择器 ** :第** ）。
表现不同：
.main p:nth-child(3) != .main p:nth-of-type(3)
第n个类型 — 选择第三段（ p ) 元素。主要的 第n个孩子 — 选择第三个元素（如果它没关系 p 或其他），如果它 p 然后匹配。如果不是 p — 选择器不起作用。
主要区别：
::第n个孩子 索引号根据里面的任何元素计算，但是 ::第n个类型 仅计算特定类型的元素，而忽略其他元素。
24. 相对、固定、绝对和静态定位的元素有什么区别？
相对、固定、绝对和静态是 位置 CSS 中的属性。
这样，就可以控制 UI 上的定位元素。
通过定义位置非静态（相对、固定或绝对）- 为该元素创建的堆栈上下文，您可以在全局布局或内部元素中使用 z-index，使用 left、right、top 和 bottom 属性进行调整。
静止的
位置：静态 是默认属性。
这是与其他人的主要区别：
- 它不创建自己的上下文堆栈
- 忽略 z-index、top、bottom、left 和 right 属性
相对的，绝对的，固定的共同点
位置：相对 |固定 |绝对 — 将元素切换到位置布局。之后该元素具有以下功能：
- 它可以订购
z-index有序堆栈。 - 它可以定位为
最佳,剩下,正确的,底部特性。
位置： 相对的 ——留在原地。在常规的 UI 流中，它根据其所在的区域进行定位。
相对、绝对、固定——差异
位置：相对 根据元素的正常位置定位元素。
立场：绝对 元素从正常流和相对于其最近定位元素的位置中移除。
位置：固定 元素从相对于浏览器窗口的正常流程和位置中删除，或者更好地说 - 视口。
25. 您在本地或生产中使用了哪些现有的 CSS 框架？你将如何改变/改进它们？
你必须掌握两三个流行的 CSS 框架，并让它成为这六个之一：
- 引导程序
- 基础
- 布尔玛
- 语义UI
- 物化
- 顺风 CSS
通过应用到项目中，每个 CSS 框架都可以通过一些 Theme 界面进行定制。
26. 你用过 CSS Grid 吗？
CSS Grid 提供了一个基于网格的布局系统。
它是 CSS 规范中第一个可以原生进行二维布局的布局模块。
与 CSS Grid 相关的新术语：
- 网格容器
- 网格项目网格
- 线网格单元
- 网格轨道
- 网格区域
使用 CSS Grid 定义 12 列布局：
。容器 {
显示：网格；
网格模板列：重复（12、1fr）；
间隙：5px；
}
27. 你能解释一下将网站编码为响应式与使用移动优先策略之间的区别吗？
响应式和移动优先看起来差不多，但事实并非如此。
这是两种不同的策略。
常见的
移动优先和响应策略的基础——使网站在移动、桌面和任何其他设备上看起来都很好。
概念差异
响应式是关于需求，移动优先——关于开发过程。
响应策略 ——专注于任何屏幕、控件或设备的可访问性。如果应用程序是 反应灵敏， 它适用于任何设备。
移动优先 ——是发展战略。
开发和交付结果首先在移动屏幕上，然后在更大的屏幕上——标签、桌面、电视。
这种方法更易于维护和扩展。
此外，更好的性能是因为您添加的附加条件不是针对移动设备，而是针对通常具有更好 CPU 和更大流量预算的更大屏幕。
28. 你曾经使用过视网膜图形吗？如果是这样，您何时使用了哪些技术？
Retina — 是 Apple 用于具有更高像素密度的屏幕的营销术语。
当尺寸在 CSS 中以像素为单位定义时——它在“视网膜”上缩放，并且 CSS 像素的尺寸与真实设备上的像素尺寸不同。
UI 上的字体、SVG 和任何其他矢量元素与视网膜和常规设备的默认设置完美配合。
策略——“矢量图形”
如果可能 - 使用带有可缩放矢量图形的 SVG 或图标字体。尽量避免使用精灵或图像——png、jpg、gif。
策略——“视网膜的 2 倍或 3 倍图像”
使用 png、jpg 或 gif 等光栅/位图图像时，您可能会在视网膜上遇到模糊图像。您需要为视网膜提供更大的图像。您可以使用各种技术来做到这一点：
图像标签和srcset属性图片标签和资源里面的标签- 使用 CSS
背景图片和图像集功能
29. 有什么理由要使用 translate() 而不是绝对定位，反之亦然？为什么？
翻译（） 是用于在水平和垂直方向定位的函数。但是你可以对 位置 有值的属性 相对的 / 绝对 和 最佳 / 底部 / 正确的 / 剩下 .
例如：变换：翻译（42px，18px）； 在某些情况下，与 位置：绝对；顶部：30px；
使用 translate() 的原因
而且它对于静态元素的使用几乎没有区别，但是很漂亮 动画的关键 .
定位元件 **位置：绝对** CSS 中的属性——触发布局重新计算。触发每一帧 动画对于应用程序的性能来说相当耗时 .
但 翻译（） 功能位置元素没有 触发回流/布局。那是 为什么是 对于动画，严格要求使用 translate()。
使用绝对的原因。
对于静态元素，以及当需要从正常文档流中删除选定元素时。
30. clearfix CSS 属性有什么用？
Clearfix 是一种广泛使用的技术，用于包含浮动元素的包装器。
Clearfix——它只是 将元件切换到 BFC （块格式化上下文）。如果一个元素不是 BFC（内部的所有浮动元素），则忽略。
Clearfix 示例：
显示：块；
内容：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
