40多个顶级CSS常见面试问题和答案合集

2021年11月28日18:44:12 发表评论 928 次浏览

CSS 的使用对于使网站引人入胜和有吸引力是非常重要的。自然，CSS 的范围是巨大的，如果你在这方面获得技术专长，就会有潜在的职业等待着你。

CSS常见面试题有哪些？在你探索 CSS 的职业机会并参加面试之前，你应该熟悉他们可能会问你的问题类型并准备好答案。

热门CSS常见面试问题和答案合集

以下是最常见的 CSS 面试问题和答案，可能会对你有所帮助：

基本的CSS 面试问题

问题：什么是 CSS？

答： CSS 或级联样式表是一种样式语言，对于在网页设计中使用的 HTML 元素来说非常简单。此外，在XHTML 中也发现了CSS 的应用。

问题：CSS 有哪些不同的变体？

CSS面试题解析： CSS 的不同变体包括：

CSS 4
CSS 3
CSS 2.1
CSS 2
CSS 1

问题：使用 CSS 有什么好处？

答：使用 CSS 有很多好处，例如：

无障碍
页面重新格式化
全站一致性
带宽
呈现带宽的分离

问题：CSS 的缺点是什么？

答：使用 CSS 的缺点是：

不允许定位特定文本、样式和规则。
没有任何表达。
没有控制伪类的动态行为。
无法通过选择器上升。
垂直控制是有限的。
列声明不存在。

问题：CSS 框架是什么意思？

答： CSS 框架是预先规划的库，允许更方便的网页样式也符合标准。

问题：给出一些在当前版本的 CSS 中找到的模块的例子。

答： CSS 中一些常用的模块包括：

盒子模型
选择器
文字效果
背景和边框
动画
2D/3D 转换
用户界面。
多列布局

问题：CSS2 和 CSS3 有什么区别？

CSS面试题解析：

在 CSS2 中，所有内容都存在于单个文档中，而 CSS3 分为多个部分，称为模块。
可以找到与图形相关的功能，例如 Box-shadow 或 Border-radius、flexbox 等，这些功能在 CSS2 中是不存在的。
背景位置、背景图像和背景重复样式等属性有助于在单个网页中使用多个背景图像。
CSS3 版本支持许多新的浏览器。
CSS3 以伪元素和伪类的形式引入了许多新的选择器。

问题：列举几个 CSS 样式组件

答：一些 CSS 样式组件包括 Property、Value 和 Selector

问题：CSS常见面试问题和答案合集：你对 CSS opacity 的理解是什么？

答：不透明度的技术定义是允许光线穿过物体的程度。

CSS 不透明度是用于描述元素透明度的属性。或者，换句话说，它解释了图像的清晰程度。

问题：如何改变元素的背景颜色？

答：可以使用 background-color 属性更改图像的背景颜色。

body 
{
background-color: coral;
}

问：如何控制备份的镜像重复？

答： Background-repetition 属性控制背景中图像的重复。如果图像要在背景中显示一次，请使用不重复。

<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>CSS Background Image: Hackr.io</p>
</body>
</html>

问题：background-position 属性有什么用？

答：可以用来定义背景图片的初始位置。默认位置是页面的左上角。可以设置的位置包括顶部、底部、左侧、右侧和中心。

<html>
<head>
<style>
body {
background-image: url('hackr.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<p>CSS Background Position: Hackr.io</p>
</body>
</html>

问题：哪个属性控制背景中的图像滚动？

答：可以使用 background-scroll 属性控制背景中的图像滚动。

问题：为什么要使用背景和颜色作为单独的属性？

答：这样做主要有两个目的：

它使样式表更清晰。背景属性本身很复杂，但随着颜色变得更加复杂。
颜色是一种内置属性，而背景不是一个。这可能会导致很多混乱。

问题：如何使用 CSS1 将块元素居中？

答：为了使块级元素居中，我们需要将 margin-right 和 margin-left 属性设置为显式值。

问：如何维护CSS规范？

答：它是使用万维网联盟维护的。

问题：CSS常见面试问题和答案合集：将CSS集成为网页的方式有哪些？

以网页的形式集成CSS的方法有以下三种：

嵌入： head 元素内可以有一个样式元素，我们可以在其中放置代码。
内联：可以使用样式属性找到应用 CSS 的 HTML 元素。
导入或链接：在链接或导入 CSS 的情况下，CSS 放置在外部文件中，并使用链接元素链接它。

问题：什么是外部样式表？

答：外部样式表是外部使用的可以链接到 HTML 页面的表。

问题：什么是嵌入式样式表？

CSS面试题解析：在这些表单中，整个 HTML 文档的样式集都在一个地方定义。为此，应将样式标记下的样式表信息嵌入到 HTML 文档中。

问题：使用外部样式表的优点和缺点是什么？

回答：

好处

可以有多个 HTML 元素的多个文档以及多个类。
可以使用不同的样式控制具有各种样式的多个文档。
选择器和分组方法可用于在复合情况下对样式进行分组。

缺点

为了呈现文档，必须加载外部样式表。
它不适合小样式定义。
要导入带有样式信息的文档，需要额外下载。

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

回答：

好处

你可以在文档中创建不同的标签类型。
与外部样式表不同，不需要额外下载。
在复杂的情况下，你可以使用 Grouping 和 Selector 方法来应用样式。

坏处

你无法控制多个文档。

高级 CSS 面试问题

问题：CSS 选择器的含义是什么？

答：就像 HTML 中的字符串一样，CSS 中也有一个选择器，用于链接 HTML 和样式表元素。

问题：CSS 允许的媒体类型有哪些？

答： CSS常见面试题有哪些？CSS 允许不同的媒体类型，例如语音、音频、视觉和触觉媒体、分页或连续媒体、位图或网格媒体，甚至交互式媒体。

问题：什么是规则集？

答：规则集可用于识别相互连接的选择器。

它由两个不同的部分组成——选择器和声明。

问题：CSS 是如何区分大小写的？

答： CSS 不区分大小写，但图像和字体系列的 URL 区分大小写。只有在页面上使用带有 XHTML DOCTYPE 的 XML 声明时，我们才会发现 CSS 区分大小写。

问题：什么是声明块？

答：它基本上是一个包含属性的方向目录，后跟一个冒号，最后是括在大括号内的值。

问题：有哪些不同的字体属性可用？

答：可用的各种字体属性包括 font-variant、font-weight、font-style、font-family、字体大小的行高、标题、图标和 font-family。

问：导入文件如何方便插入？

答：导入文件有助于集成可以插入多个工作表的外部工作表。不同的功能可以有不同的工作表和样式。

问题：物理标签和逻辑标签有什么区别？

回答：与物理标签相比，逻辑标签更旧，主要关注内容。他们在演示方面几乎找不到任何用途。逻辑标签在美学方面没有任何应用，而物理标签在展示方面也有应用。

问题：与 HTML 相比，样式表概念有何不同？

答案：样式表将样式因素与它们相关联。另一方面，HTML 提供了一种简单的结构方法。样式表还具有更好的格式选项和浏览功能。

问题：是否可以在 CSS 中添加多个声明？

答：是的，我们可以借助分号来做到这一点。

问题：什么是伪元素？

答：这些元素用于为某些选择器提供特殊效果。CSS 发现在 HTML 标记中应用样式的用法。如果有任何机会，额外的样式或标记对于文档是不可行的，伪元素的这一特性有助于在不妨碍原始文档的情况下允许额外的标记。

问题：什么是补间？

答：这是在两张图片之间创建中间帧的过程，以便找到从第一张图片发展到第二张图片的外观。

问题：什么是 CSS 计数器？

答：这些是可以通过使用CSS检查和查找变量使用次数来增加的变量。

问题：通用选择器是什么意思？

答：它是一个选择器，可以匹配任何元素类型的名称，而不是选择特定类别的元素。

问题：如何选择一个段落的所有元素？

答：段落中的元素可以使用 p[lang] 命令来选择。

问题：如何在 CSS 中解码百分比值？

答：百分比值在 CSS 中使用百分比符号进行解码。

问题：什么是RWD？

答： CSS常见面试问题和答案合集：RWD 是 Responsive Web Design 的缩写形式。它用于根据所考虑的设备在任何类型的屏幕尺寸上适当地显示设计的页面。

问题：CSS 的 float 属性是什么？

答：它用于根据需要将图像定位到左侧或右侧，包括环绕它的文本。在它之前使用的元素的属性保持不变。

问题：visibility: hidden 和 display:none 有什么区别？

CSS面试题解析： visibility:hidden 和 display:none 属性的区别在于前者的元素是隐藏的，但没有删除。不消耗空间。

在后者的情况下，元素被隐藏并影响布局，即占用一些空间。

<!DOCTYPE html>
<html>
<head>
<style>
h3 
{
display: none;
}
</style>
</head>
<body>
<h2>This heading is visible</h2>
<h3>This is a hidden heading</h3>
<p>The hidden heading does not take up space even after hiding it since we have used display: none;.</p>
</body>
</html>
visibility:hidden
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
visibility:hidden;
}
</style>
</head>
<body>
<h2>This heading is visible</h2>    
<h3>This is a hidden heading</h3>    
<p>The hidden heading takes up space even after hiding it.</p>
</body>
</html>

问题：CSS常见面试题有哪些：类选择器和ID选择器有什么区别？

答：类选择器采用整体块，而 ID 选择器采用与其他元素不同的单个元素。

CSS 类选择器的使用

<style>
.center {
text-align: center;
color:red;
}
</style>

CSS ID 选择器的使用

<style>
#para1
{
text-align: centre;
color:red;
}
</style>

CSS常见面试问题和答案合集总结

最后，我希望你喜欢这个 CSS 面试问题合集。这些问题很有可能被你的面试官问到。确保你已准备好回答。你可能想查看最好的 CSS 教程以进行准备。访问此空间以获取有关各种技术主题的更多此类面试问题。祝一切顺利！