CSS 面试问题的答案——第二部分 (11–20/34)
CSS 面试问题的答案——第二部分 (11–20/34)
继续回答来自的 CSS 面试问题 前端-开发者-面试-问题 .该材料有助于为前端职位的面试做准备。所有这些都是口头的，所以我会尽量避免在我的答案中出现代码块。
Lisa Fotios
11. 您是否使用或实施过媒体查询或移动设备特定的布局/CSS？
媒体查询仍然是响应式网页设计的主要功能，但不是唯一的。
@media (max-width: 600px) { body { background-color: lightblue; } }
然后使用 CSS 网格和弹性项目，即使没有硬编码断点，我们也可以实现响应式行为和移动布局。
弹性盒
通过定义属性， 弹性包装：包装 如果弹性项目不适合一行，则它们可以在多行中呈现。
所以，通过定义 弹性基础 可以设置基本的自适应容器宽度布局。一个儿子 这个样本 .
CSS 网格
它是最成熟的响应式 UI 布局构建工具。
使用 网格模板列 和 网格模板行 可以定义响应式布局。
最小、最大、钳位
逻辑 CSS 函数有助于确定屏幕或容器的当前宽度，并为元素选择合适的大小。
Alena Koval
12. 你熟悉 SVG 样式吗？
可以使用以下方法将 SVG 添加到网页中：
- 图像
<img src=”image.svg” alt="”SVG" Image” />. - 目的：
<object data="image.svg" type="image/svg+xml" /> - 嵌入
<embed src="image.svg" type="image/svg+xml" /> - 排队
<svg><rect fill="red" /></svg>
在网页上注入 SVG 的最佳方法是使用 “目的” 因为您可以使用 JS 与之交互并在需要时注入一些 CSS。
随着“ 排队” 方法，使用 CSS 为 SVG 图像设置样式更容易，更原生。
用于在 SVG 中设置 DOM 元素样式的 CSS 属性略有不同。
用于 CSS 的 SVG 有自己的 规格 .
SVG 的一些属性：
充满- 用于着色背景中风— 图形中线条的颜色
Ksenia Chernaya
13. 编写高效 CSS 的一些“陷阱”是什么？
这很简单——“陷阱”的发生是因为不阅读和不遵循主要的 CSS 规范。
为了避免这种错误：
- 应用良好实践和现有方法：SMACCS、BEM 或其他。
- 使用移动优先、可访问性和响应式策略。
- 避免“幻数”——使用变量和函数。
- 阅读规格。
Pixabay
14. 使用 CSS 预处理器的优点/缺点是什么？
流行的预处理器： LESS、SASS、手写笔 .
老实说，在 2022 年，使用预处理器并没有太多优势。
- 预处理器变量？
现在，CSS3 将客户属性作为变量 - 功能
现在，CSS3 具有计算等功能。 - 模块和部分
Webpack 或任何现代任务管理器都可以处理。
这不再是预处理器的优势了。
但是，预处理器的主要优点：
- 代码更漂亮更多 结构化的
- 最终的 CSS 是可预测的，因为在编译阶段，CSS 会经过 短绒 和 验证 过程并且总是 通过错误 在构建阶段。
- 变量 和 功能 在与所有流行浏览器兼容的结果包中。
缺点：
- 预处理器增加了一层 复杂 .
- 预处理器应该包含在构建过程中， 延长构建时间 .
- 进入项目的门槛越来越高，因此您需要找到不仅了解 CSS 还了解某些特定预处理器的开发人员。
Mona Termos
15. 你将如何实现一个使用非标准字体的网页设计组件？
在现代 Web 应用程序中集成自定义字体的唯一方法是 CSS 规则—— @字体系列 .
您可以通过上传为 Web 生成的本地字体或使用云基础字体库（如 谷歌字体 .
使用基于云的服务的好处是兑现和开源许可证。
但主要是为了实现一些自定义 UI，您通常需要一些 WOFF 格式的本地字体。
16. 解释浏览器如何确定哪些元素与 CSS 选择器匹配
通常，浏览器引擎从右到左解析常规选择器。
通过选择器浏览器：
- 搜索与选择器中最后一个元素匹配的所有节点。
- 然后取左侧的下一个元素并向上遍历 DOM，寻找匹配的父元素。
示例 1：常规 CSS 选择器：
选择器： 李一个{}
- 搜索所有
一个首先是 DOM 中的元素。
它可以是一大堆元素。 - 然后将通过仅选择具有
李作为父母。
示例 2：带有 > 符号的 CSS 选择器：
选择器： 李>一
算法会有所不同。
- 首先搜索
李选择器 - 然后寻找孩子
一个那里。
带符号搜索选择器的算法 > 快得多。
Ryan Miguel Capili
17. 描述伪元素并讨论它们的用途
在 DOM 树上，您可以找到用 HTML 编写的元素，这些元素带有浏览器在某些特定位置自动注入的标签和伪元素。
伪元素示例：
::before, ::after, ::selection, ::placeholder., ::first-line, ::first-letter
您可以在 CSS 选择器中使用伪元素，并且无需在 HTML 中添加额外的包装器或元素即可制作大量装饰物。
SHVETS production
18. 解释你对盒子模型的理解，以及你将如何在 CSS 中告诉浏览器以不同的盒子模型呈现你的布局。
每个元素或伪元素都包裹在一个矩形区域中。
CSS 盒子模型描述了内边距、宽度、高度、边框和边距之间的关系。
基于下一个特征元素有它的物理尺寸：
内容区
尺寸根据显示类型定义（ 排队 , 堵塞 )，里面的内容或 宽度 , 高度 财产。
填充区域
尺寸定义在 填充 财产。
边区
尺寸定义在 边框宽度 财产。
边距区域
尺寸定义在 利润 块元素的属性或 线高 对于内联元素。
这 最终尺寸 元素的 (width, height) 使用边框区域、填充区域和内容区域进行计算。而它的 缩进 根据边缘区域。
CSS Box Model有两种模式可以改变计算元素最终大小的公式，可以用 盒子尺寸 CSS 属性。
box-sizing: 内容框（默认）
和 框大小：内容框 总物理元素大小等于计算 宽度 和 填充 .
宽度：100px；
左边距：50px；
填充右：50px
上面元素的总宽度大小将是 - 200像素 .
框大小：边框框
元素的物理尺寸取决于 只是 关于高度和宽度。
宽度：100px；
盒子 **-** 浆纱 **：** 边界 **-** 盒子;
左边距：50px；
填充右：50px
上面元素的总宽度大小将是 - 100像素 .
Terje Sollie
19. * { box-sizing: border-box; 是什么意思？ } 做？它的优点是什么？
您可以使用所有元素的 box-sizing 属性来切换 CSS 盒子模型。默认 盒子尺寸 是 内容框 .
将 box-sizing 重新定义为border-box
因为 * { 盒子 **-** 浆纱 **：** 边界 **-** 盒子; } 它不包括伪元素：
接下来是为所有元素重新定义 box-sizing 的正确方法：
html { 框 **-** 浆纱 **：** 边界 **-** 盒子; }
***,** ***** ：前 **,** ***** ：在{框之后 **-** 浆纱 **：** 继承; }
因此，所有元素的物理尺寸取决于 只是 关于高度和宽度。
宽度：100px；
盒子 **-** 浆纱 **：** 边界 **-** 盒子;
左边距：50px；
填充右：50px
上面元素的总宽度大小将是 - 100像素 .
这就是为什么 这种模式的主要优点是显而易见 .
您定义宽度并期望相同的宽度。因此，不依赖于填充或边框等装饰。
缺点——性能。
Hanna Auramenka
20.什么是CSS显示属性？你能举几个例子来说明它的用途吗？
display 属性不仅仅是 CSS 中的常规属性。
它定义了整个模型以及其中元素的行为。
显示属性可以分为两类： 明确的 和 隐含的 定义。例如：在显式定义的情况下 显示：弹性 .孩子将被自动定义为 弹性项目 它是隐含的。
显示值列表：
价值观： 内联、块、内容、flex、网格、内联块、内联-flex、内联网格、内联表、列表项、插入、表、表标题、表列组、表头-组、表页脚组、表行组、表单元格、表列、表行、无、初始、继承 .
默认情况下，每个标签都有它的显示属性：
- ：` 显示：列表项；`
-
：` 显示：博克；` - ：
显示：内联；
重新定义显示默认值的用例：
浏览器中没有定义网格或 flex 的标签。
所以，对于设置 网格 或者 柔性 需要定义标记的值。
**例如：将 ul > li 转化为单行导航。
** 通过定义 显示：弹性 至 ul tag — 无序列表从一列的列表转换为一行。
概括
我希望这些材料不仅有助于面试准备，而且有助于更好地理解 CSS 的共同点。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/36078/24091408
