（翻译）值得收藏的26个css面试题，增强你的CSS基础！

作者: 浅浅而谈 | 来源:发表于2021-07-07 09:49 被阅读0次

CSS在网页设计中非常流行，可以减少结构内容中的复杂性和重复。本篇文章给大家分享26个基于css的面试题，可以增强你的CSS基础，快来学习吧。

image

（学习视频分享：css视频教程）

CSS是层叠样式表（ Cascading Style Sheets ）的缩写，是一种样式表语言，用于描述以 HTML 之类的标记语言编写的文档的布局。它是用于设计Web页面的三剑客之一，另外两位浩客是HTML和Javascript。

CSS 的设计目的是使样式和内容分离，包括布局、颜色和字体。这种分离可以提高内容的可访问性，在样式特征的规范中提供更多的灵活性和控制，通过在一个单独的. .css 文件中指定相关的 CSS，使多个 web 页面能够共享格式，并减少结构内容中的复杂性和重复。

它具有简单的语法，并使用大量的英文关键字来指定各种样式属性的名称。

既然我们已经讨论了CSS的基础知识，让我们来观察一下基于CSS的重要面试问题。

问题1：什么是 CSS？

CSS（层叠样式表）是一种样式语言，对于 HTML 元素来说足够简单。它在网页设计中非常流行，其应用在XHTML中也很常见。

问题2：为什么要开发CSS？

CSS是在1997年开发的，作为一种web开发人员设计他们正在创建的web页面布局的方法。它的目的是让开发者将网站代码的内容和结构从视觉设计中分离出来。

这种结构和设计的分离允许HTML执行比原来更多的功能。

问题3：CSS的主要版本有哪些？

CSS的不同版本：

CSS1
CSS2
CSS2.1
CSS3

问题4：CSS样式的组成部分是什么？

一个样式规则由三部分组成：

选择器–选择器是 HTML 标记，用于选择要设置样式的内容。它根据其ID，类和名称选择 HTML元素。
属性–属性是 HTML 标签的一种属性。简而言之，所有 HTML 属性都转换为 CSS 属性。
值– CSS中的值定义CSS属性的一组有效值。

问题 5：有多少种方法可以将 CSS 集成为 web 页面

CSS 可以集成为三种方式

内联：直接在HTML元素上使用

<p style=”colour:skyblue;”>hello world</p>

外部:在工作空间中创建单独的CSS文件，然后在创建的每个web页面中链接它们

<head>

<link rel="text/css" href="your_CSS_file_location"/>

</head>

内部: web 页面的 head 元素在其中实现了内部 CSS。

<head>
     <style> 
             P{
                   color : lime;
               background-color:black;
                }
     </style>
</head>

问题 6：谁在维护 CSS 规范？

万维网协会维护 CSS规范。

问题 7：伪元素是什么意思？

伪元素是添加到选择器的关键字，它允许一种样式，即所选元素的特定部分。CSS用于在HTML标记中应用样式，它允许在不影响实际文档的情况下对文档进行额外标记。它可以用来：

为第一个字母、行或元素设置样式。
插入内容

语法：

Selector: :pseudo-element{
Property1 :value;
Property2 :value;
}

问题 8：CSS有什么优势？

CSS的优点是:

一致性 – CSS有助于构建一致的框架，设计人员可以使用该框架来构建其他站点。因此，网页设计师的效率也提高了。
易于使用 – CSS 是非常容易学习和简化网站开发。所有代码都放在一个页面上，这意味着对代码行进行改进或编辑不需要重复修改多个页面.
*网站速度 *– 通常，一个网站使用的代码最多可以达到 2 页或更多。但是对于CSS，这不是问题。它只需要2-3行代码，因此，网站数据库保持整洁，消除任何网站加载问题。
设备兼容性 – 由于人们使用不同类型的智能设备访问互联网，因此需要响应式web设计。CSS 在这里的作用是使 web 页面的响应性更好，这样它们就可以在所有设备中以相同的方式显示。
多浏览器支持 – CSS享有多浏览器的支持，它与所有主要的互联网浏览器兼容。
重新定位 – CSS允许您定义页面上 web 元素位置的变化。通过它的实现，开发人员可以将 HTML 元素放置在他们喜欢的位置，以便与页面的美学吸引力或其他考虑因素保持一致。

问题9：CSS 渐变是什么？

渐变是指我们在两幅图像之间创建中间帧，以获得第一幅图像的外观，然后发展成第二幅图像的过程，它主要用于创建动画。

问题10：什么是 CSS 特异性？

CSS 特定性是一个分数或等级，它决定了元素必须使用哪种样式声明。 CSS 中有四类可以授权选择器的特异性级别：

内联样式
ID
类，属性和伪类
元素和伪元素

问题12：CSS有什么缺点

CSS的缺点有:

版本太多 – 与HTML或Javascript等其他参数相比，CSS有很多版本-CSS1，CSS2，CSS2.1，CSS3。因此，CSS变得非常混乱，尤其是对于初学者。
缺乏安全性 - 由于CSS是基于开放文本的系统，因此它没有内置的安全系统来防止其被覆盖。通过对其读/写操作的访问，任何人都可以更改 CSS 文件并更改链接。
Fragmentation - 使用 CSS，可能无法在一个浏览器上使用另一浏览器。因此，在网站上线之前，Web 开发人员必须通过在多个浏览器上运行程序来测试兼容性。
复杂性–使用 Microsoft FrontPage 等第三方软件会使CSS变得复杂。

问题13：什么是 RWD (Responsive Web Design)?

RWD（响应式Web设计）技术用于在每种屏幕尺寸以及移动，平板电脑，台式机和笔记本电脑等设备上完美显示设计页面，让我们无需为每个设备创建不同的页面。

问题14：CSS 精灵有什么好处?

CSS精灵的好处有：

通过将各种小图像组合成一个图像，减少了web页面的加载时间。
减少HTTP请求，从而减少加载时间。

问题 15：什么是 CSS 上下文选择器？

上下文选择器，严格来讲，叫后代组合式选择器，就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。只要有标签在它的层次结构“上游”存在这么一个祖先，那么就会选中该标签。无论从该标签到作为祖先的上下文之间隔着多少层次都没有关系。

问题 16：什么是渐进增强和平稳退化?

渐进增强的概念是指从最基本的可用性出发，在保证站点页面在低级浏览器中的可用性和可访问性的基础上，逐步增加功能及提高用户体验。本质上讲，我们日常的一些开发习惯，例如首先使用标记语言编写页面，然后通过样式表来控制页面样式等，都属于渐进增强的概念；其他更为明显的行为包括使用HTML5、CSS3等新技术，针对高级浏览器为页面提高用户体验的丰富程度。

平稳退化的概念是指首先使用最新的技术面向高级浏览器构建最强的功能及用户体验，然后针对低级浏览器的限制，逐步衰减那些无法被支持的功能及体验；在我们日常的开发中，一个典型的平稳退化的例子就是首先针对Chrome编写页面代码，然后修复IE中的异常或针对IE去除那些无法被实现的功能特色.

所以，这两个概念方法其实早已并存在我们的日常开发工作中了，只是“渐进增强”与“平稳退化”这样的措辞是近些年才开始被普及。在我们眼下的HTML5与 CSS3实战用，这两个概念就尤其重要了，怎样保证使用不断变化的新技术来构建在主流浏览器下都具有基本可用性的站点，并针对高级浏览器进行体验提升，这些是我们在开发过程中需要明确的思路。

问题 17：我们如何在网页上添加图标？

我们可以使用诸如font-awesome或者阿里的 iconfont 之类的图标库将图标添加到HTML网页。我们必须将给定图标类的名称添加到任何内联HTML元素中。（<i>或<span>）。图标库中的图标是可缩放的矢量，可以使用CSS进行自定义。

问题 18：哪个属性指定边框的宽度？

border-width指定边框的宽度。

问题 19：如何区分物理标签和逻辑标签?

物理标签被称为表示标记，而逻辑标签对于外观是无用的。物理标签是较新的版本，而逻辑标签是旧的并且专注于内容。

如题，我们的标签元素写上后，浏览器就会渲染出结果，但不仅仅是这么简单

//物理元素
<b>我想用b标签加粗</b>

//逻辑元素
<strong>我想用strong标签加粗</strong>

//两段文字都加粗了，而且视觉效果完全一样

确实，文字加粗了，两者都达到了我们想要的目的，但是我们忽略了一个问题，既然b标签可以加粗，那么strong这个标签同样是加粗，存在的意义又是什么呢？既然W3C定义了两个，它们之间的不同点是什么呢？它们之间的相同点又是什么呢？

物理元素

物理元素，又叫实体标签，它所做的是一种物理行为，比如上面我把一段文字用b标签加粗了，它所传达的给浏览器，告诉浏览器我要加粗这段文字，从单词Bold中也可以看出来，英文中仅仅是加粗的意思，并没有其他作用。总结来说就是一句话：物理元素就是告诉浏览器该怎么显示出来。

逻辑元素

逻辑元素，从英文字面上Strong就可以看出它是强调的意思，所以我们用这个逻辑元素(如上strong)来向浏览器传达一个强调某段文字重要性的消息，说明此文字较为重要，也有利于搜索引擎收录。

Web标准主张XHTML不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用别的方式强调，也可以通过css来改变strong的具体表现，还有就是并不是有了strong逻辑标签，就不用b标签来表示字体加粗了，b标签和strong标签默认情况下强调的效果一致，strong完全可以定义成别的样式，用来强调效果，但是最好符合W3C标准，它更提倡内容与样式分离，所以单纯为了达到加粗而使用b标签不建议这样做，从XHTML文档有意义性及用户体验角度来说，strong逻辑标签更加合适，而SEO方面，则针对优化情况而定。

问题 20：如何在CSS中定义一个伪类?它们是用来干什么的

CSS伪类是用来添加一些选择器的特殊效果。伪类的语法

selector:pseudo-class{property:value;}

问题 21：CSS和SCSS有什么区别？

CSS 和 SCSS 之间的区别如下：

CSS是一种用于设计web页面的样式语言，而SCSS用于为浏览器组合CSS样式表。
SCSS 提供了一些变量，可以使用这些变量来缩短代码，这是与 CSS 相比的一大优势。

问题 22：嵌入式样式表的优缺点是什么？

嵌入式样式表的优点:

可以在一个文档中创建多种标签类型。
在复杂情况下，可以使用选择器和分组方法来应用样式。
无需额外下载。

嵌入式样式表的缺点：

无法控制多个文档。

问题 23：列出使用的各种媒体类型。

不同的介质不区分大小写，因此它们具有不同的属性。他们是：

aural - 用于语音和音频合成器
print - 用于打印机
projection - 用于方案展示，比如幻灯片
handheld - 用于小的手持的设备
screen - 用于电脑显示器

问题 24：font 的属性有哪些？

Font-style
Font-variant
Font-weight
Font-size/line-weight
Font-family

问题 25：“规则集”是什么意思？

该指令告诉浏览器如何在HTML页面上渲染特定元素。它由一个选择器和一个遵循规则集的声明块组成。选择器可以附加到其他选择器，以通过规则集进行标识。

问题 26：什么是 CSS 框架？

CSS 框架是一个库，它允许使用CSS语言进行更轻松，更符合标准的Web设计。这些框架中的大多数至少包含一个网格以及更多功能和其他基于Javascript的功能。一些著名的CSS框架有：ACSS，Bulma，YAML，Foundation等。

英文原文地址：https://codersera.com/blog/top-css-interview-questions-and-answers/

本文转载自：https://www.php.cn/css-tutorial-479296.html

更多编程相关知识，请访问：编程入门！！