推荐！Pure.CSS常见面试题和答案合集

1)什么是Pure.CSS？

Pure.CSS是Yahoo开发的级联样式表(CSS)框架。它用于使网站更快, 更美观且响应更快。

2)Pure.CSS的重要特征是什么？

这是免费的。
它具有内置的响应式设计。
它使用标准的CSS以最小的足迹。
它是小型的响应式CSS模块的集合。
它支持阴影和粗体颜色。
在各种平台和设备上, 颜色和阴影保持一致。

欲了解更多信息, 请点击此处

3)标准CSS是什么意思？

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

4)如何使用Pure.CSS？

有两种使用Pure.CSS的方法：

本地安装：你可以在系统上下载pure.css文件, 并将其包含在HTML代码中。
基于CDN的版本：你可以直接从Content Delivery Network(CDN)将pure.css文件包含到HTML代码中。

5)你对Pure.CSS响应式设计了解什么？

PURE.CSS提供了一些特殊的类来创建响应式设计：

.pure-u- *：用于设置容器以占用任何设备上所需的空间。
.pure-u-sm- *：用于设置容器以占用宽度为？的设备上的所需空间。 568px。
.pure-u-md- *：用于设置容器以占用宽度为？的设备上的所需空间。 768像素。
.pure-u-lg- *：用于设置容器以占用宽度为？的设备上的所需空间。 1024px。
.pure-u-xl- *：用于设置容器以占用宽度为？的设备上的所需空间。 1280像素。

6)什么是Pure.CSS网格？

PURE.CSS通过两种类型的类提供了Pure Grid的概念：

pure-g：网格类
pure-u- *：单位类

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

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

单位宽度以分数为单位。例如, Pureu-1-2表示宽度为1/2或50％, Pureu-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文件。

例：

<html>
   <head>
      <title>The PURE.CSS Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="pure-min.css">
  
  <style>
.grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid yellow;
            border-bottom: 1px solid red; 
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center; 
 }
  </style>
  
  </head>
 
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

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

你可以直接从Content Delivery Network(CDN)将Pure.CSS文件包含到HTML代码中。 yui.yahooapis.com提供最新版本的内容。

例：

<html>
   <head>
      <title>The PURE.CSS Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
  
  <style>
.grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid yellow;
            border-bottom: 1px solid red; 
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center; 
 }
  </style>  
  </head>
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>

</html>

11)什么是Pure.CSS菜单？

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

垂直菜单
水平菜单

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