CSS面试题及答案

以下列出了一些最常被问到的CSS面试题及答案。

1) 什么是CSS？

CSS是Cascading Style Sheet（层叠样式表）的缩写。它是一种流行的样式语言，与HTML一起用于设计网站。它也可以用于任何XML文档，包括纯XML、SVG和XUL。更多详情...

2) CSS的起源是什么？

CSS起源于SGML（Standard Generalized Markup Language），它是一种定义标记语言的语言。

3) CSS有哪些不同的版本？

以下是CSS的不同版本：

• CSS1
• CSS2
• CSS2.1
• CSS3
• CSS4

4) 如何将CSS集成到网页中？

有三种方法可以将CSS集成到网页中。

1. 内联样式（Inline method）- 用于在HTML文档中插入样式表。
2. 嵌入/内部样式（Embedded/Internal method）- 用于为单个文档添加特定样式。
3. 链接/导入/外部样式（Linked/Imported/External method）- 当您需要更改多个页面时使用。

5) CSS的优点是什么？

• 带宽
• 网站整体一致性
• 页面重新格式化
• 可访问性
• 内容与表现分离

6) CSS的局限性是什么？

• 选择器无法向上匹配（Ascending by selectors is not possible）
• 垂直控制的限制
• 不支持表达式
• 不支持列声明
• 伪类不受动态行为控制
• 无法规则、样式、定位特定文本

7) 什么是CSS框架？

CSS框架是预先规划好的库，它们使网页样式化变得更容易，并且更符合标准。常用的CSS框架有：

• Bootstrap
• Foundation
• Semantic UI
• Gumby
• Ulkit

8) 为什么背景和颜色是分开的属性，尽管它们应该总是被一起设置？

这背后有两个原因：

• 它提高了样式表的可读性。`background` 属性在CSS中是一个复杂的属性，如果将其与 `color` 结合，复杂度会进一步增加。
• 颜色是可继承属性，而背景不是。这可能会进一步造成混淆。

9) 什么是嵌入式样式表？

嵌入式样式表是一种与HTML一起使用的CSS样式定义方法。您可以使用`STYLE`元素将整个样式表嵌入到HTML文档中。更多详情...

10) 嵌入式样式表的优点是什么？

• 您可以为文档中的多种标签类型创建类。
• 您可以使用选择器和分组方法在复杂情况下应用样式。
• 不需要额外的下载即可导入信息。

11) 什么是CSS选择器？

它是一个字符串，用于标识特定声明所应用的元素。它也被称为HTML文档和样式表之间的链接，相当于HTML元素。CSS中有几种不同的选择器类型：

• CSS Element Selector
• CSS ID选择器
• CSS Class Selector
• CSS通用选择器
• CSS分组选择器

12) 请列举一些CSS样式组件。

一些CSS样式组件是：

• 选择器
• 属性
• 值

13) CSS Opacity（不透明度）有什么用？

CSS `opacity` 属性用于指定元素的透明度。简单来说，它可以指定图像的清晰度。从技术上讲，不透明度定义了允许光线穿过对象的程度。例如：

14) 解释一下通用选择器。

通用选择器匹配任何类型的元素名称，而不是选择特定类型的元素。

15) 哪个命令用于选择所有段落元素？

`p[lang]` 命令用于选择所有段落元素。

16) %单位有什么用？

它用于定义百分比值。

17) 请说出用于指定元素背景颜色的属性。

`background-color` 属性用于指定元素的背景颜色。例如：

18) 请说出用于控制背景图像重复的属性。

`background-repeat` 属性会水平和垂直地重复背景图像。有些图像只在水平或垂直方向重复。

19) 请说出用于控制背景图像位置的属性。

`background-position` 属性用于定义背景图像的初始位置。默认情况下，背景图像放置在网页的左上角。

您可以设置以下位置：

1. center
2. top
3. bottom (底部)
4. 左
5. 右

20) 请说出用于控制背景图像滚动的属性。

`background-attachment` 属性用于指定背景图像是固定的还是随浏览器窗口中的页面一起滚动。如果将背景图像设置为 `fixed`，则在滚动浏览器时图像不会移动。让我们以固定背景图像为例。

21) 规则集（ruleset）有什么用？

规则集用于标识选择器可以附加到其他选择器。它有两个部分：

• 选择器 - 选择器指示您要设置样式的HTML元素。
• 声明块 - 声明块可以包含一个或多个声明，用分号分隔。

22) 类选择器和ID选择器有什么区别？

类选择器会应用到一个整体块，而ID选择器只针对一个元素，使其与其他元素不同。

CSS Class Selector

CSS ID选择器

更多详情...

23) 外部样式表的优点是什么？

• 您可以创建类，在多个文档中重复使用。
• 使用它，您可以从一个文件控制多个文档的样式。
• 在复杂情况下，您可以使用选择器和分组方法来应用样式。

24) 内联、嵌入式和外部样式表之间有什么区别？

内联：内联样式表用于只为一小段代码设置样式。

语法

嵌入式：嵌入式样式表放在``...`标签之间。

语法

外部：这用于通过更改一个样式表来将样式应用于您网站上的所有页面。

语法

25) 什么是RWD？

RWD代表响应式网页设计（Responsive Web Design）。这项技术用于在每种屏幕尺寸和设备上完美地显示设计的页面，例如手机、平板电脑、桌面和笔记本电脑。您无需为每种设备创建不同的页面。

26) CSS Sprites有哪些好处？

如果一个网页有大量图片，每张图片单独发送一个HTTP请求，会导致加载时间过长。CSS Sprites的概念用于减少网页加载时间，因为它将各种小图片合并成一张大图片。这减少了HTTP请求的数量，从而缩短了加载时间。

27) 逻辑标签和物理标签有什么区别？

• 物理标签称为表现性标记，而逻辑标签对外观无用。
• 物理标签是较新的版本，而逻辑标签是旧的，侧重于内容。

28) 什么是CSS盒子模型及其元素？

CSS盒子模型用于定义CSS元素的样式和布局。

元素包括：

• Margin（外边距） - 它移除边框周围的区域。它是透明的。
• Border（边框） - 它代表内边距周围的区域。
• Padding（内边距） - 它移除内容周围的区域。它是透明的。
• Content（内容） - 它代表文本、图像等内容。

29) CSS的float属性有什么作用？

CSS `float` 属性用于将图像向右或向左移动，并使文本环绕在周围。它不会改变其之前的元素属性。

为了理解其目的和起源，让我们看看它的打印显示。在打印显示中，图像被放置在页面上，文本会根据需要环绕在图像周围。

它的网页布局也与之类似。

30) 如何使用CSS恢复默认属性值？

简而言之，没有简单的方法可以恢复到浏览器使用的默认值。

最接近的选项是使用`initial`属性值，它恢复的是CSS的默认值，而不是浏览器的默认样式。

31) z-index的作用是什么以及如何使用它？

z-index用于指定可能相互重叠的定位元素的堆叠顺序。z-index的默认值为零，可以是正数或负数。

z-index值较高的元素总是堆叠在z-index值较低的元素之上。

Z-Index可以取以下值：

• Auto：将堆叠顺序设置为与其父元素相同。
• Number：设置堆叠顺序。
• Initial：将此属性设置为其默认值（0）。
• Inherit：从其父元素继承此属性。

32) 解释`visibility: hidden` 和 `display: none` 之间的区别？

visibility: hidden 隐藏元素，但它仍然占用空间并影响文档的布局。

display: none 也隐藏元素，但不占用空间。它不会影响文档的布局。

33) 您对W3C有什么理解？

W3C是World Wide Web Consortium（万维网联盟）的缩写。其宗旨是推广万维网的信息。它还制定Web的规则和指南。

34) 什么是补间动画（tweening）？

它是生成两幅图像之间中间帧的过程。

它给人一种第一幅图像平滑地演变成第二幅图像的印象。

它是所有类型动画中的一个重要方法。

在CSS3中，可以使用Transforms（matrix, translate, rotate, scale）模块来实现补间动画。

35) CSS2和CSS3之间有什么区别？

CSS2和CSS3之间的主要区别在于，CSS3被划分为不同的部分，也称为模块。与CSS2不同，CSS3模块受到许多浏览器的支持。

此外，CSS3包含新的通用兄弟选择器，它负责匹配与给定元素具有相同父元素的兄弟元素。