史上最全！CSS面试题和答案合集详解 - 面试题

下面列出了最常见的CSS面试问题和答案。

1)什么是CSS？

CSS代表级联样式表。它是一种流行的样式语言, 与HTML一起用于设计网站。它也可以与任何XML文档一起使用, 包括纯XML, SVG和XUL。更多详细信息…

2)CSS的起源是什么？

SGML(标准通用标记语言)是CSS的起源。它是定义标记语言的语言。

3)CSS有哪些不同的变体？

以下是CSS的不同变体：

CSS1
CSS2
CSS2.1
CSS3
CSS4

4)如何在网页上集成CSS？

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

内联方法-用于在HTML文档中插入样式表
嵌入式/内部方法-用于向单个文档添加唯一样式
链接/导入/外部方法-当你要在多个页面上进行更改时使用。

更多细节…

5)CSS的优点是什么？

带宽
站点范围内的一致性
页面重新格式化
辅助功能
内容与演示分开

6)CSS的局限性是什么？

无法通过选择器升序
垂直控制的局限性
没有表情
没有列声明
伪类不受动态行为的控制
规则, 样式, 无法定位特定文本

7)什么是CSS框架？

CSS框架是预先计划的库, 可简化和更符合标准的网页样式。常用的CSS框架是：-

Bootstrap
基础
语义UI
古比
Ulkit

8)为什么总是将背景和颜色设置为单独的属性？

这有两个原因：

它增强了样式表的可读性。 background属性是CSS中的复杂属性, 如果将其与颜色结合使用, 则复杂性将进一步增加。
颜色是继承的属性, 而背景则不是。因此, 这可能会进一步混淆。

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

嵌入式样式表是与HTML一起使用的CSS样式指定方法。你可以使用STYLE元素将整个样式表嵌入HTML文档中。更多细节…

<style>  
body {  
    background-color: linen;  
}  
h1 {  
    color: red;  
    margin-left: 80px;  
}   
</style>

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

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

11)什么是CSS选择器？

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

CSS元素选择器
CSS ID选择器
CSS类选择器
CSS通用选择器
CSS组选择器

更多细节…

12)命名一些CSS样式组件。

一些CSS样式组件是：

选择器
属性
值

13)CSS Opacity的用途是什么？

CSS opacity属性用于指定元素的透明度。简单来说, 你可以说它指定了图像的清晰度。用技术术语来说, “不透明度”定义为允许光穿过对象的程度。例如：

<style>  
img.trans {  
    opacity: 0.4;  
    filter: alpha(opacity=40); /* For IE8 and earlier */  
}  
</style>

14)说明通用选择器。

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

<style>  
* {  
   color: green;  
   font-size: 20px;  
}   
</style>

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

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

16)％单位有什么用？

用于定义百分比值。

17)命名用于指定元素背景颜色的属性。

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

<style>  
h2, p{  
    background-color: #b0d4de;  
}  
</style>

18)命名用于控制背景图像重复的属性。

background-repeat属性在水平和垂直方向上重复背景图像。有些图像仅水平或垂直重复。

<style>  
body {  
background-image: url("paper1.gif");  
margin-left:100px;  
}  
</style>

19)命名用于控制背景图像位置的属性。

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

你可以设置以下位置：

中央
最佳
底部
剩下
对

background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;

20)命名用于控制背景图像滚动的属性。

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

background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed;

21)规则集的用途是什么？

规则集用于标识选择器可以与其他选择器连接。它分为两个部分：

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

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

整体块提供给类选择器, 而ID选择器仅采用与其他元素不同的单个元素。

CSS类选择器

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

CSS ID选择器

<style>  
#para1 {  
    text-align: center;  
    color: blue;  
}  
</style>

更多细节…

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

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

更多细节…

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

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

语法

<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>

嵌入式：嵌入式样式表放在<head> … </ head>标记之间。

语法

<style>  
body {  
    background-color: linen;  
}  
h1 {  
    color: red;  
    margin-left: 80px;  
}   
</style>

外部的：用于仅通过更改一个样式表即可将样式应用于网站中的所有页面。

语法

<head>  
<link rel="stylesheet" type="text/css" href="mystyle.css">  
</head>

25)什么是RWD？

RWD代表响应式Web设计。此技术用于在各种屏幕尺寸和设备(例如移动设备, 平板电脑, 台式机和笔记本电脑)上完美显示设计的页面。你无需为每个设备创建不同的页面。

26)CSS Sprite有什么好处？

如果网页中包含大量图像, 则由于每个图像分别发出HTTP请求, 因此加载时间较长。 CSS Sprite的概念用于减少网页的加载时间, 因为它将各种小图像组合为一个图像。它减少了HTTP请求的数量, 从而减少了加载时间。

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

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

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

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

元素是：

边距-删除边框周围的区域。它是透明的。
边框-代表填充周围的区域
填充-删除内容周围的区域。它是透明的。
内容-代表文字, 图像等内容。

29)CSS的float属性是什么？

CSS float属性用于将图像以及要环绕的文本向右或向左移动。它不会更改之前使用的元素的属性。

要了解其目的和来源, 让我们看一下它的印刷显示屏。在打印显示器中, 图像设置在页面中, 以便文本根据需要自动换行。

它的Web布局也与打印布局类似。

更多细节…

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

简而言之, 没有简单的方法可以将默认值还原为浏览器使用的任何值。

最接近的选项是使用”初始”属性值, 该属性值将恢复默认的CSS值, 而不是浏览器的默认样式。

31)z-index的目的是什么？如何使用它？

z索引有助于指定可能彼此重叠的定位元素的堆叠顺序。 z索引的默认值为零, 可以为正数或负数。

具有较高z索引的元素总是堆叠在高于较低索引的元素之上。

Z-Index可以采用以下值：

自动：将堆叠顺序设置为其父顺序。
数字：订购堆叠订单。
初始值：将此属性设置为其默认值(0)。
继承：从其父元素继承此属性。

32)解释可见性：隐藏和显示：无之间的区别？

可见性：hidden隐藏元素, 但它会占用空间并影响文档的布局。

<!DOCTYPE html>
<html>
<head>
<style>
h1.vis {
    visibility: visible;
}

h1.hid {
    visibility: hidden;
}
</style>
</head>
<body>
<h1 class="vis">It is visible</h1>
<h1 class="hid">It is hidden</h1>

<p>Note - Second heading is hidden, but it still occupy space.</p>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<style>
h1.vis {
    display: block;
}

h1.hid {
     display: none;
}
</style>
</head>
<body>
<h1 class="vis">It is visible</h1>
<h1 class="hid">It is hidden</h1>

<p>Note - Second heading is hidden and not occupy space.</p>
</body>
</html>

33)你对W3C了解什么？

W3C代表万维网联盟。其目的是传递万维网信息。它还为Web开发规则和准则。

34)补间是什么？

这是在两个图像之间生成中间帧的过程。

它给人的印象是第一张图像已平滑演变为第二张图像。

这是在所有类型的动画中使用的重要方法。

在CSS3中, 可以使用”变换”(矩阵, 平移, 旋转, 缩放)模块来实现补间。

35)CSS2和CSS3有什么区别？

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

除此之外, CSS3包含新的通用同级组合器, 该组合器负责将同级元素与给定元素进行匹配。

工作/人力资源面试问题

jQuery面试问题

Java OOP面试问题

JSP面试问题

休眠面试问题

SQL面试题

Android面试题

MySQL面试问题

面试技巧

JavaScript面试问题

Java基础面试问题

Servlet面试问题

春季面试问题

PL / SQL面试问题

Oracle面试问题

SQL Server面试问题

1)什么是CSS？

2)CSS的起源是什么？

3)CSS有哪些不同的变体？

4)如何在网页上集成CSS？

5)CSS的优点是什么？

6)CSS的局限性是什么？

7)什么是CSS框架？

8)为什么总是将背景和颜色设置为单独的属性？

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

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

11)什么是CSS选择器？

12)命名一些CSS样式组件。

13)CSS Opacity的用途是什么？

14)说明通用选择器。

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

16)％单位有什么用？

17)命名用于指定元素背景颜色的属性。

18)命名用于控制背景图像重复的属性。

19)命名用于控制背景图像位置的属性。

20)命名用于控制背景图像滚动的属性。

21)规则集的用途是什么？

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

CSS类选择器

CSS ID选择器

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

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

语法

语法

语法

25)什么是RWD？

26)CSS Sprite有什么好处？

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

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

29)CSS的float属性是什么？

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

31)z-index的目的是什么？如何使用它？

32)解释可见性：隐藏和显示：无之间的区别？

33)你对W3C了解什么？

34)补间是什么？

35)CSS2和CSS3有什么区别？

相关推荐

评论 抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

评论抢沙发