Materialize CSS 面试题

1) 什么是 Materialize CSS？

Materialize CSS 是一个包含库文件的 CSS 框架。它由 CSS、JavaScript 和 HTML 创建。它用于创建有吸引力、可靠且功能强大的网页和 Web 应用程序。

2) Materialize CSS 是什么时候发布的？

Materialized CSS 于 2015 年 11 月 8 日发布。

3) Materialize CSS 有哪些显著特点？

以下是 Materialize CSS 的一些显著特点：

1. 它包含内置的响应式设计。
2. 它提供标准 CSS，占用空间极小。
3. 它提供了常见用户界面控件的新版本，如按钮、复选框和文本字段，这些控件都遵循 Material Design 的概念。
4. 它提供了增强和专门的功能，如卡片、选项卡、导航栏、浮动通知（toasts）等。
5. 它可以免费使用，并且需要 jQuery JavaScript 库才能正常工作。
6. 它支持跨浏览器，并可用于创建可重用的 Web 组件。

4) 我们如何使用 Materialize CSS？

有两种使用 Materialize CSS 的方法：

本地安装：通过将 materialize.min.css 和 materialize.min.js 文件下载到本地计算机，并将其包含在您的 HTML 代码中来实现。

基于 CDN 的版本：通过直接从内容分发网络（CDN）将 materialize.min.css 和 materialize.min.js 文件包含到您的 HTML 代码中。

5) Materialize CSS 中有哪些不同的实用工具类（Utility classes）？

Materialize CSS 中的不同实用工具类列表：

颜色实用工具类：例如：.red, .green, .grey 等。

对齐实用工具类：例如：.valign-wrapper, .left-align, .right-align, .center-align, .left, .right 等。

根据设备尺寸隐藏内容的实用工具类：例如：.hide, .hide-on-small-only, .hide-on-med-only 等。

格式化实用工具类：例如：.truncate, .hoverable 等。

6) 在 Materialize CSS 中，使用哪些类来创建响应式图像和视频？

用于在 Materialize CSS 中创建响应式图像和视频的类列表：

responsive-img: 这个类用于创建响应式图像。

video-container: 这个类用于创建响应式容器，其中包含嵌入的视频。

responsive-video: 这个类用于使 HTML5 视频具有响应性。

7) Materialize CSS 中有哪些不同的表格类？

Materialize CSS 中的不同表格类：

8) Materialize CSS 中的徽章（badge）是什么？徽章类的用途是什么？

徽章是一种用于提供屏幕通知的组件。它可以是一个数字或一个图标。它用于强调项目的数量。

在 Materialize CSS 中使用以下徽章类：

• badge: 它将元素标识为 MDL 徽章组件。
• new: 它用于向徽章组件添加一个 new 类。

9) Materialize CSS 中面包屑（BreadCrumb）的类有哪些？

Materialize CSS 为面包屑提供了两个类：

• nav-wrapper: 它用于将导航组件设置为面包屑/导航栏的包装器。
• breadcrumb: 它用于将锚点元素设置为面包屑。

10) Materialize CSS 中的纸片（chip）是什么？

纸片（Chip）是 Materialize CSS 的一个组件，它像标签一样表示一小部分信息。

11) Materialize CSS 中的集合（Collection）是什么？并说明集合的类。

集合是一组具有相关信息的项目。以下是 Materialize CSS 中的集合类列表：

12) 在 Materialize CSS 中如何创建一个分页？

您可以通过使用 pagination 类在 Materialize CSS 中创建一个分页。这个类与 ul 元素一起使用。

示例

13) Materialize CSS 中的下拉菜单类有哪些？

Materialize CSS 中有两种类型的下拉菜单类：

• dropdown-content: 它将 <u> HTML 标签标识为 materialize 下拉菜单组件。
• data-activates: 它是下拉菜单 ul 元素的 id。