标签：布局 21 元素 网格 34 Grid 使用 CSS

CSS 面试问题的答案——第三部分 (21–34/34)

本文是我最后发表的“CSS 面试题答案”系列。以下是所有文章的列表：

• CSS 面试问题的答案——第一部分 (1-10)
• CSS 面试问题的答案——第二部分 (11-21)
• CSS 面试问题的答案——第三部分 (21-34)

该材料有助于为前端职位的面试做准备。我回答了 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 示例：

 显示：块；  
 内容： ””;  
 明确：两者；

Cleafix 是一种非常有用且流行的技术，以至于所有现代 CSS 框架都包含用于此的 CSS 类。

• 布尔玛—— is-clearfix
• 引导程序— 清除修复

31. 你能解释一下 px、em 和 rem 与字体大小有关的区别吗？

**像素** — 是一个绝对值。
你设置 10像素 — 你会得到 10 个 CSS 像素。
它没有相关的元素，但它与像素密度有关。

em, rem — 是相对值。
它们取决于其父元素的大小。

通常对于响应式和特定于移动设备的布局，最好使用 em 和 rems，因为 松紧带 单位更容易通过改变一个父母来调整大小。
但使用起来更容易、更可预测 像素 因为 Figma、Sketch 或 Photoshop 中的设计师使用 px 进行模拟。

REM和EM的区别

• 时间 - 取决于 第一父母 具有明确定义的字体大小。
• 雷姆 — 相对于所有应用程序的根元素。对于 Web 应用程序，通常是 **HTML** 标签。

32. 你能举一个伪类的例子吗？你能提供一个伪类的示例用例吗？

伪类存在于 修改 元素的数量取决于它们 状态 .

表格示例：

为了开发表单，我们需要关注输入、按钮和其他控件的不同状态的样式。

• **：重点** **** — 当元素具有焦点时匹配。
• **：无效的** — 匹配具有无效内容的元素。
• **：必需的** — 需要表单元素时匹配。
• **：可选的** — 当表单元素是可选的时匹配。
• **: 自动填充** — 匹配自动填充的输入字段。
• **：只读** — 表示用户无法更改的任何元素。

链接示例：

• **：关联** — 匹配尚未访问的链接。
• **：徘徊** — 当用户使用指点设备指定项目时匹配，例如将鼠标指针悬停在项目上。
• **：积极的** — 当用户激活项目时匹配。
• **访问过** — 匹配已访问的链接。
• **：目标** — 匹配作为文档目标的元素。

您可以在 60 多个伪类中找到 MDN 网络文档 .

33.块级元素和行内元素有什么区别。你能提供每种元素的例子吗？

块元素 总是从一个新行开始并扩展直到行中可用空间的末尾。块元素的一个例子是 div , p , ul .

这 内联元素 不从新行开始——它只是在它所在的地方渲染并在需要时结束，它的一面取决于里面的内容。

块和内联的主要区别

内联元素，不像块元素， 不接受 属性如：

• 边距顶部
• 边距底部
• 填充顶部
• 填充底部。

34. CSS Grid 和 Flexbox 有什么区别？您什么时候会使用其中一种？

Flex 和 CSS Grid 是用于管理网页布局的系统。

概念上的区别是：

用于 2D 布局的 CSS Grid，用于 1D 布局的 Flexbox。

Flex 元素可以仅在一维布局中进行调整。
您可以将弹性项目配置为一次呈现在一列或一行中，仅此而已。

但是使用 CSS Grid，您可以通过使用 CSS 样式调整内部元素来配置经典布局——侧边栏、页脚和内容仅在一个网格元素中。

使用 Flex 的 API 比 CSS Grid 简单得多，所以一些简单的解决方案最好使用 flex。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38228/57382109

标签：布局,21,元素,网格,34,Grid,使用,CSS
From： https://www.cnblogs.com/amboke/p/16714601.html