面试题整理｜45个CSS面试题

大家好，又见面了，我是你们的朋友全栈君。

CSS已成为Web设计不可或缺的一部分，它让web页面变得更加美观，更具设计感。在前端面试中，CSS面试题也占有一定比重。
本篇文章，将为大家分享45个和CSS相关的面试题及其解析，难度分为：初级、中级、高级三个部分，由易到难，循序渐进。

一、初级CSS面试题

Q1、CSS全称是什么？
CSS英文全称：Cascading Style Sheets，也就是层叠样式表。是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

Q2、为什么需要CSS？
CSS最早是在1997年开发的，它是Web开发人员定义其创建的网页外观的一种方式。它旨在允许开发人员将 网站代码的内容和结构与视觉设计分开，这在此之前是不可能实现的。
结构和样式的分离使HTML可以执行其最初基于的更多功能-内容标记，而不必担心页面本身的设计和布局，这通常称为“外观”页面。

Q3、CSS的主要版本有哪些？
主要有：CSS 1，CSS 2，CSS 2.1，CSS 3，CSS 4几个版本

Q4、CSS集成到HTML页面的方式有哪些？

• 使用HTML页面在header的

Q5、什么是层叠？

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

Q6、使用CSS的优势？
1、多个文档的样式可以通过使用一个站点来控制。

2、多个HTML元素可以包含许多文档，可以在其中创建类。

3、要在复杂情况下对样式进行分组，请使用选择器和分组方法。

Q7、使用CSS的缺点？

1、无法通过选择器升序

2、垂直控制的局限性

3、没有表情

4、没有列声明

5、伪类不受动态行为的控制

6、规则，样式，无法定位特定文本

Q8、列举一些CSS框架？

Bootstrap：是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

Layui：是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，体积轻盈，组件丰盈，非常适合界面的快速开发。

ElementUI：一套为开发者、设计师和产品经理准备的基于 Vue 2.0的桌面端组件库。

antd：是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。开箱即用的高质量 React 组件，全链路开发和设计工具体系，数十个国际化语言支持。

Q9、CSS中使用ID和Class的区别？

1）ID：ID属性的操作类似于CLASS属性，但有一点重要的不同之处：ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。ID选择器的标志符是散列符号（#）

2） Class：CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。类选择器以标志符（句点）开头。

Q10、什么是RGB？

RGB色彩模式是工业界的一种颜色标准，是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色。

Q11、在CSS中为元素分配某种颜色的方法有哪些
1、十六进制颜色码：
十六进制颜色码就是在软件中设定颜色值的代码。通过一个以“#”开头的6位十六进制数值表示一种颜色。6位数字分为3组，每组两位，依次表示红、绿、蓝三种颜色的强度。

2、RGB颜色模式：颜色由表明红色，绿色，和蓝色各成分强度的三个数值表示。从极小值0到最大值255，当所有颜色,都在最低值被显示的颜色将是黑色，当所有颜色都在他们的最大值被显示的颜色将是白色。
3、HSL标记：设计师和美术师通常更喜欢使用HSL（色相/饱和度/亮度）颜色方法进行工作。在Web上，使用HSL功能符号表示HSL颜色。HSL（）CSS函数在用法上与RGB（）函数非常相似。

Q12、CSS盒模型
所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。

对不同部分的说明：
内容区（content）：它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型；
内边距（padding）：内边距是内容区和边框之间的空间；
边框（border）：边框是环绕内容区和填充的边界；
外边距（margin）：外边距位于盒子的最外围，是添加在边框外周围的空间。

Q13、什么是z-index？
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：z-index 仅能在定位元素上奏效！
可能到值：
auto——默认。堆叠顺序与父元素相等。

number——设置元素的堆叠顺序。

inherit——规定应该从父元素继承 z-index 属性的值。

Q14、什么是CSS Sprite（“精灵图”）
CSS Sprites叫 CSS精灵或者雪碧图，是一种网页图片应用处理方式。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中。
再利用CSS的”background-image”，“background-repeat”，”background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

Q15、使用CSS Sprites的好处
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

二、中级CSS面试题

Q16、CSS中的伪元素是什么？
CSS伪元素是添加到选择器的关键字，可用于设置所选元素的特定部分的样式。
“first-line” 伪元素用于向文本的首行设置特殊样式，只能用于块级元素！下面的属性可应用于 “first-line” 伪元素：font，color，background，word-space，letter-space，text-decoration，text-transform，line-height，clear。
“first-letter” 伪元素用于向文本的首字母设置特殊样式，只能用于块级元素！下面的属性可应用于 “first-letter” 伪元素：font，color，background，margin，padding，border，text-decoration，line-height，clear，text-transform。

Q17、如何设置h2和h3标签的相同样式？
通过用逗号（，）分隔符来定位多个元素

h2, h3 { 
   
color: blue;
}

Q18、CSS中的float属性如何使用？
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
可能到值：
float: none;
float: left;
float: right;

Q19、当前版本的CSS中使用了哪些不同的模块？
CSS中有几个模块，部分如下：
选择器

盒模型

背景和边框

文字效果

2D / 3D转换

动画制作

多列布局

用户界面

Q20、CSS允许使用哪些不同的媒介类型？
@media属性主要有四种类型（包括screen）：
all—适用于所有设备。

print—打印预览模式/打印页面。

speech——适用于“朗读”页面的屏幕阅读器

screen——计算机屏幕（默认）

Q21. CSS有哪些单位?
CSS 有两种类型的长度单位：相对和绝对。设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。
相对长度：

*提示: rem与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
绝对长度

*像素或许被认为是最好的”设备像素”，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

Q22. 如何控制插入的图片不重复?

.logo { 
   
​
background-repeat: none;
​
 }

Q23. 下面这段代码将对元素做些什么？

.container { 
   
margin：0 auto; 
}

在要应用的对象上指定margin：0 auto时候，该对象将位于其父容器的中央。第二个参数上会告诉浏览器自动确定左右边距，方法是将它们均等设置。它保证左右边距将设置为相同的大小。第一个参数0表示顶部和底部边距都将设置0。

Q24. overflow属性在CSS中被用于什么？
overflow 属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
可能的值：
overflow: auto;如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

overflow: hidden;内容会被修剪，并且其余内容是不可见的。

overflow: scroll;内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

overflow: visible;默认值。内容不会被修剪，会呈现在元素框之外。

Q25. 用于控制图像滚动的属性是什么？
background-attachment：该属性设置背景图像是随页面其余部分滚动还是固定滚动。

body { 
   
  background-image: url("img_tree.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Q26. 什么是响应式网页设计？
响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

Q27.{visibility：hidden}和{display：none}有什么区别？
display:none 表示标签根本不会出现在页面上（尽管您仍然可以通过DOM与之交互）。与其他标签之间将没有分配空间。
visibility:hidden 表示该标签不可见，但在页面上为其分配了空间。标签已呈现，只是在页面上看不到。

Q28.CSS的特异性是什么意思？
如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。
将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。
每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：

1、行内样式 – 行内（内联）样式直接附加到要设置样式的元素。
2、ID – ID 是页面元素的唯一标识符，例如 #navbar。
3、类、属性和伪类 – 此类别包括 .classes、[attributes] 和伪类，例如：:hover、:focus 等。
4、元素和伪元素 – 此类别包括元素名称和伪元素，比如 h1、div、:before 和 :after。

Q29.CSS中字体相关的属性有哪些？
Font-style

Font-variant

Font-weight

Font-size/line-height

Font-family

Caption

Icon

Q30.如何在CSS中使用box-shadow？
box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

box-shadow: h-shadow v-shadow blur spread color inset;

Q31.什么是派生选择器（上下文选择器）？
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

三、进阶CSS面试题

Q32、什么是弹性布局？
flexbox布局正式称为CSS flexible box布局模块，是CSS3中的新布局模块。它可以改善容器中物品的对齐，方向和顺序，即使它们的尺寸是动态的，甚至是未知的。flex容器的主要特征是能够修改其子项的宽度或高度，以在不同的屏幕尺寸上以最佳方式填充可用空间。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

Q33、浏览器如何确定哪些元素与CSS选择器匹配？

浏览器从最右边（key 选择器）到左边匹配选择器。浏览器根据key选择器筛选出DOM中的元素，并遍历其父元素以确定匹配项。选择器链的长度越短，浏览器就可以更快地确定该元素是否与选择器匹配。
例如，使用选择器p span，浏览器首先找到所有元素，然后向上遍历其父元素直到根，以找到

元素。对于特定的，只要找到

，它就会知道匹配并且可以停止其匹配。

Q34、解释为什么选择有时候使用translate（）而不是绝对定位？
translate是CSS transform的值。更改变换或不透明度不会触发浏览器重排或重新绘制，但会触发合成。而更改绝对定位会触发回流。变换使浏览器为该元素创建一个GPU层，但是更改绝对定位属性将使用CPU。因此，translate（）效率更高，并且可以缩短绘制时间，从而使动画更流畅。

Q35、解释通过移动优先策略和自适应设计两种方法的差异？
这两种方法不是唯一的。使网站具有响应能力意味着某些元素将通过CSS媒体查询根据设备的屏幕尺寸（通常是视口宽度）来调整其大小或其他功能，从而做出响应。
例如，在较小的设备上减小字体大小。

@media (min-width: 601px) { 
   
​
.my-class { 
   
​
font-size: 24px;
​
}
@media (max-width: 600px) { 
   
​
.my-class { 
   
​
font-size: 12px;
​
}
​
}

移动优先策略也具有响应能力，但是，它同意我们应该默认并定义移动设备的所有样式，并且仅在以后向其他设备添加特定的响应规则。遵循前面的示例：

.my-class { 
   
​
font-size: 12px;
​
}
​
@media (min-width: 600px) { 
   
​
.my-class { 
   
​
font-size: 24px;
​
}
​
}

移动优先策略具有两个主要优点：
1、由于不必针对任何媒体查询验证适用于它们的所有规则，因此在移动设备上的性能更高

2、它会强制针对响应式CSS规则编写更简洁的代码。

Q36、CSS如何实现元素的定位？
position属性指定用于元素的定位方法的类型。
有五个不同的位置值：
position: fixed;
position: static;
position: absolute;
position: sticky;
position: relative;
然后使用top，bottom，left和right属性定位元素。但是，除非首先设置position属性，否则这些属性将不起作用。根据位置值，它们的工作方式也不同。

Q37、什么是块级格式化上下文（BFC），如何工作？
1.规范解释
　　块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

2.通俗解释：
BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

如果一个元素符合触发BFC的条件，则该元素中的布局不受外部影响。

浮动元素会创建BFC，所以浮动元素内部子元素主要受浮动元素影响，两个浮动元素之间是互不影响的。

3.创建方式：

根元素或包含根元素的元素

浮动元素 float ＝ left | right 或 inherit（≠ none）

绝对定位元素 position ＝ absolute 或 fixed

display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption

overflow ＝ hidden | auto 或 scroll (≠ visible)

Q38、这段CSS代码会产生什么影响？{box-sizing：border-box;}

默认情况下，元素具有box-sizing：应用了content-box，并且仅考虑了内容大小。

box-sizing：边框更改了元素的宽度和高度的计算方式，边框和填充也包括在计算中。

元素的高度由内容的高度+垂直填充+垂直边框宽度计算得出。

元素的宽度是通过内容的宽度+水平填充+水平边框宽度来计算的。

在我们的盒子模型中，考虑到填充物和边框，与设计人员实际如何想象网格中的内容产生了更好的共鸣。

Q39、什么是CSS预处理器？何时建议在项目中使用预处理器？
 CSS预处理器是用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。
 SCSS其语法完全兼容CSS3，并且继承了SCSS的强大功能。由于SCSS是CSS的扩展，因此所有在CSS中正常工作的代码也能在SCSS中正常工作。比CSS多出好多功能如变量、嵌套、混合(Mixin)、继承等。
什么时候用取决于项目的类型，但是预处理器具有以下优点/缺点。
优点：
1、CSS变得更易于维护。

2、易于编写嵌套选择器。

3、用于一致主题的变量。可以跨不同项目共享主题文件。

4、Mixins生成重复的CSS。

5、诸如循环，列表和映射之类的Sass功能可以使配置更容易且更省力。

6、将您的代码分成多个文件。CSS文件也可以拆分，但是这样做需要HTTP请求才能下载每个CSS文件。

缺点：
1、需要进行预处理的工具。重新编译时间可能很慢。

2、不编写当前和潜在可用的CSS。例如，通过将诸如 postcss-loader之类的内容 与 webpack一起使用，您可以编写可能与将来兼容的CSS，从而使您可以使用CSS变量（而不是Sass变量）之类的东西

Q40、相对，固定，绝对和静态定位的元素有什么区别？

定位元素是计算的位置属性是relative, fixed, absolute and static。
静态static
默认位置；默认为0。元素将像往常一样流入页面。top，right，bottom，left和z-index属性不适用。

相对relative
元素的位置相对于自身进行了调整，而没有更改布局（因此，如果没有放置元素，将为元素留出一定的空隙）。

绝对absolute
元素从页面流中删除，并且相对于其最接近的祖先（如果有）或相对于初始包含块而定位在指定的位置。绝对定位的盒子可以有边距，并且不会与其他任何边距一起折叠。这些元素不会影响其他元素的位置。

固定 fixed
将元素从页面流中移除，并将其放置在相对于视口的指定位置，并且在滚动时不会移动。

粘性sticky
粘性定位是相对定位和固定定位的混合。将该元素视为相对位置，直到它超过指定的阈值为止，此时将其视为固定位置。

Q41、什么是供应商前缀？
浏览器供应商有时会在实验性或非标准CSS属性和JavaScript API中添加前缀，因此，从理论上讲，开发人员可以尝试新的想法，同时从理论上防止在标准化过程中依赖他们的实验，然后破坏Web开发人员的代码。开发人员应等待包括未添加前缀的属性，直到浏览器行为标准化为止。

主流浏览器使用以下前缀：
-webkit- （Chrome，Safari，Opera的较新版本，几乎所有的iOS浏览器（包括Firefox for iOS）；基本上是任何基于WebKit的浏览器）

-moz- （Firefox）

-o- （旧的，WebKit之前的Opera版本）

-ms- （Internet Explorer和Microsoft Edge）

Q42、什么是文件分割，何时使用？

良好的CSS架构的应该有合理的文件组织。整体文件适合单独的开发人员或非常小的项目。对于大型项目（具有多种布局和内容类型的站点，或在同一设计框架下具有多个品牌的站点），使用模块化方法并将CSS拆分为多个文件更为明智。
跨文件拆分CSS可以更轻松地将任务打包给团队。一个开发人员可以处理与排版相关的样式，而另一个开发人员可以专注于开发网格组件。团队可以合理地分工并提高整体生产率。

这是一个虚拟的CSS结构：
reset.css：重置和规范化样式；颜色，边框或字体相关的声明

typography.css：标题和正文文本的字体，粗细，行高，大小和样式

layouts.css：管理页面布局和分段（包括网格）的样式

forms.css：表单控件和标签的样式

list.css：特定于列表的样式

table.css：表格专用样式

carousel.css：轮播组件所需的样式

accordion.css：手风琴组件的样式

Q43、什么是function/mixins？
函数是返回任何Sass数据类型的单个值的代码块。 mixins非常类似的函数。两者之间的主要区别在于，Sass代码的mixins输出行将直接编译为CSS样式，而函数返回的值随后可以成为CSS属性的值，或者变为可以传递给另一个函数或mixin的值。

Q44、CSS在后台如何运行

浏览器显示文档时，必须将文档的内容与其样式信息结合在一起。它分两个阶段处理文档：
浏览器将HTML和CSS转换为DOM（文档对象模型）。DOM表示计算机内存中的文档。它结合了文档的内容和样式。

浏览器显示DOM的内容。

Q45、推荐一种优化打印页面的方法？

创建可打印页面的秘诀是能够识别和控制您网站的“内容区域”。大多数网站由页眉，页脚，侧边栏/子导航和一个主要内容区域组成。控制内容区域，您的大部分工作就完成了。以下是在不改变网站完整性的情况下征服印刷媒体的提示。
1、创建用于打印的样式表

2、避免不必要的HTML表格

3、知道页面的哪些部分没有任何打印价值

4、使用分页符

5、调整页面大小以进行打印–最大高度等

————————————————————————————————————————
关于CSS面试题就先简单给大家分享到这里！

掌握了这些面试题型和CSS概念后，还需要结合真实项目才能够融会贯通 ！
下面课程将带你进入真实项目的应用！带大家掌握移动端布局的要点.

四《HTML5&CSS3还原美团外卖》移动端布局实战

扫码立即购买

更多详情

扫码咨询

微信号｜mixiu1573

腾讯课堂｜网易云课堂