29个CSS面试题总结（知识点解析）-css教程-PHP中文网

本篇文章给大家分享29个css 面试知识点。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

29个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执行比原来更多的功能。

【推荐教程：CSS视频教程】

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

CSS的不同版本：

CSS1
CSS2
CSS2.1
CSS3

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

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

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

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

CSS 可以集成为三种方式

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

<p>hello world</p>

登录后复制

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


<link>

登录后复制

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

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

登录后复制

问题 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
类，属性和伪类
元素和伪元素

问题11：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请求，从而减少加载时间。

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

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

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

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

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

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

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

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

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

border-width指定边框的宽度。

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

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

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

//物理元素
<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方面，则针对优化情况而定。

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

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

selector:pseudo-class{property:value;}

登录后复制

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

CSS 和 SCSS 之间的区别如下：

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

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

嵌入式样式表的优点:

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

嵌入式样式表的缺点：

无法控制多个文档。

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

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

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

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

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

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

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

问题 25：什么是 CSS 框架？

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

问题 26：简单介绍使用图片 base64 编码的优点和缺点。

base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的
url属性。
使用base64的优点是：
（1）减少一个图片的HTTP请求
使用base64的缺点是：
（1）根据base64的编码原理，编码后的大小会比原文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体
积的增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。
（2）使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML或者CSS，这相比域直接缓存图片的效果要
差很多。
（3）兼容性的问题，ie8以前的浏览器不支持。
一般一些网站的小图标可以使用base64图片来引入。

问题 27: 对 BFC 规范（块级格式化上下文：block formatting context）的理解？

BFC指的是块级格式化上下文，一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也
不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。
一般来说根元素是一个BFC区域，浮动和绝对定位的元素也会形成BFC，display属性的值为inline-block、flex这些
属性时也会创建BFC。还有就是元素的overflow的值不为visible时都会创建BFC。

问题 28: IFC 是什么？

IFC指的是行级格式化上下文，它有这样的一些布局规则：
（1）行级上下文内部的盒子会在水平方向，一个接一个地放置。
（2）当一行不够的时候会自动切换到下一行。
（3）行级上下文的高度由内部最高的内联盒子的高度决定。

问题 29: CSS 优化、提高性能的方法有哪些？

加载性能：
（1）css压缩：将写好的css进行打包压缩，可以减少很多的体积。
（2）css单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top 0 bottom 0;但margin-bottom:bot
tom;margin-left:left;执行的效率更高。
（3）减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。
选择器性能：
（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到
左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹
配它们了）。
（3）避免使用通配规则，如*{}计算次数惊人！只对需要用到的元素进行选择。
（4）尽量少的去对标签进行选择，而是用class。
（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过
三层，更多的使用类来关联每一个标签元素。
（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。
渲染性能：
（1）慎重使用高性能属性：浮动、定位。
（2）尽量减少页面重排、重绘。
（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
（4）属性值为0时，不加单位。
（5）属性值为浮动小数0.**，可以省略小数点之前的0。
（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
（7）不使用@import前缀，它会影响css的加载速度。
（8）选择器优化嵌套，尽量避免层级过深。
（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清
楚，再使用。
（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏
览器在下载web fonts时会阻塞页面渲染损伤性能。
可维护性、健壮性：
（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
（2）样式与内容分离：将css代码定义到外部css中。