Pure.CSS 面试问题

1) 什么是 Pure.CSS？

Pure.CSS 是由雅虎开发的一个层叠样式表 (CSS) 框架。它用于使网站更快、更美观且响应式。

2) Pure.CSS 的重要特性有哪些？

• 它是免费的。
• 它内置了响应式设计。
• 它使用标准 CSS，占用空间极小。
• 它是一系列小型、响应式 CSS 模块的集合。
• 它支持阴影和醒目的颜色。
• 在各种平台和设备上，颜色和色调保持一致。

3) 标准 CSS 是什么意思？

标准 CSS 学习起来非常容易，并且不依赖于任何外部 JavaScript 库，例如 jQuery。Pure.CSS 使用标准 CSS。

4) 如何使用 Pure.CSS？

使用 Pure.CSS 有两种方法

• 本地安装： 您可以将 pure.css 文件下载到您的系统并将其包含在您的 HTML 代码中。
• 基于 CDN 的版本： 您可以直接从内容分发网络 (CDN) 将 pure.css 文件包含到您的 HTML 代码中。

5) Pure.CSS 响应式设计是什么意思？

PURE.CSS 提供了几个特殊的类来创建响应式设计

• .pure-u-*: 用于设置容器在任何设备上占据所需空间。
• .pure-u-sm-*: 用于设置容器在宽度 ≥ 568px 的设备上占据所需空间。
• .pure-u-md-*: 用于设置容器在宽度 ≥ 768px 的设备上占据所需空间。
• .pure-u-lg-*: 用于设置容器在宽度 ≥ 1024px 的设备上占据所需空间。
• .pure-u-xl-*: 用于设置容器在宽度 ≥ 1280px 的设备上占据所需空间。

6) 什么是 Pure.CSS 网格？

PURE.CSS 提供了 Pure Grid 的概念，包含两种类型的类

• pure-g: 一个网格类
• pure-u-*: 一个单元格类

7) 如何使用 Pure.CSS 网格？

以下是使用 Pure.CSS 网格的规则

• 单元格的宽度以分数表示。例如，pure-u-1-2 表示 1/2 或 50% 宽度，pure-u-2-5 表示 2/5 或 40% 宽度，以此类推。
• Pure Grid（带有 pure-g 类的元素）的子元素必须使用 pure-u 或 pure-u-* 类名。
• 所有内容都应该是一个网格单元的一部分，以便正确渲染。

8) Pure.CSS 中“可扩展”一词是什么意思？

Pure 优雅、简洁、轻巧。它非常易于使用。使用 Pure CSS 的最大优势是它旨在可扩展。您只需在自己的 CSS 中添加一些样式，即可改变网站的外观。

9) Pure.CSS 的本地安装是什么？

本地安装是将 pure-min.css 文件下载到您的网站目录（例如 /css）中，然后在您的 HTML 页面中使用该 CSS 文件的过程。

示例

10) 如何使用基于 CDN 的 Pure.CSS 版本？

您可以直接从内容分发网络 (CDN) 将 Pure.CSS 文件包含到您的 HTML 代码中。yui.yahooapis.com 提供最新版本的内容。

示例

11) 什么是 Pure.CSS 菜单？

Pure.CSS 中有两种类型的菜单

• 垂直菜单
• 水平菜单

Pure.CSS 默认提供垂直菜单。您可以通过添加类名“pure-menu-horizontal”将垂直菜单更改为水平菜单。

更多信息： 点击此处

12) 什么是 Pure.CSS 表单？

Pure.CSS 具有非常简单且响应式的 CSS 来设计表单。您可以使用 Pure.CSS 创建不同类型的表单。以下是一些类名的列表

• pure-form: 它指定一个紧凑的内联表单。
• pure-form-stacked: 它表示一个堆叠式表单，输入元素位于标签下方。与 pure-form 一起使用。
• pure-form-aligned: 它表示一个对齐式表单，输入元素位于标签下方。与 pure-form 一起使用。
• pure-input-rounded: 用于显示圆角表单控件
• pure-button: 用于美化按钮。
• pure-checkbox: 用于美化复选框。
• pure-radio: 用于美化单选按钮。