26 个 CSS 面试的高频考点助力金三银四

发布时间：2025-11-05 05:32:44 来源：创站工坊 作者：IT科技

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的不同版本：

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

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

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

CSS 可以集成为三种方式：

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

万维网协会维护 CSS规范。

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

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

语法：

问题 8：CSS有什么优势?

CSS的优点是：

问题9：CSS 渐变是什么?

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

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

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

问题12：CSS有什么缺点

CSS的缺点有：

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

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

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

CSS精灵的好处有：

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

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

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

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

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

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

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

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

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

border-width指定边框的宽度。

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

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

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

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

(1) 物理元素

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

(2) 逻辑元素

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

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

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

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

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

CSS 和 SCSS 之间的区别如下：

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

嵌入式样式表的优点：

嵌入式样式表的缺点：

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

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

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

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

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

问题 26：什么是 CSS 框架?

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

相关文章