面试专区|【42道CSS高频题整理(附答案背诵版)】

1、简述CSS3选择器优先级及计算？

CSS的选择器优先级是一个相对复杂的概念，它规定了在一组样式冲突时，哪些样式将被浏览器采纳。选择器优先级是通过一个四位的值来计算的，形式为：[内联样式, ID选择器, 类选择器/属性选择器/伪类, 元素选择器/伪元素]。这四个等级的优先级从左到右递减，左边的优先级最高，右边的优先级最低。

内联样式：直接在HTML元素中的"style"属性里定义的样式，优先级最高，记为1000。
ID选择器：通过元素的id选择元素，记为0100。
类选择器、属性选择器、伪类：通过元素的class、属性或者伪类选择元素，记为0010。
伪元素、元素选择器：通过元素名称或者伪元素选择元素，记为0001。

比如：

h1 { color: red; } // 优先级为0001
.class { color: blue; } // 优先级为0010
#id { color: green; } // 优先级为0100
< p style=“color: yellow;”> // 优先级为1000

如果一个选择器同时包含多个部分，那么优先级就是这些部分的和。比如：#id .class h1 { color: black; } 的优先级为0111 (0100 + 0010 + 0001)。

在实际应用中，如果我们想要覆盖掉某些已经定义好的样式，就需要利用这个优先级规则，通过增加选择器的优先级来实现。

需要注意的是，!important规则的优先级最高，它可以覆盖所有其他的样式，但是过度使用可能会导致代码难以维护，所以一般情况下我们应尽量避免使用。

2、详细说明CSS3新特性？

CSS3引入了许多新特性，使得前端开发者能够创建更加丰富和交互性强的网页。以下是一些主要的新特性：

选择器：CSS3引入了许多新的选择器，例如属性选择器、结构伪类选择器、否定伪类选择器等，这些新的选择器使得开发者能够更精准地选中需要的元素。
盒模型：CSS3引入了box-sizing属性，使得开发者能够更方便地控制元素的大小。此外，还引入了flex布局和grid布局，大大增强了CSS的布局能力。
颜色：CSS3支持更多种类的颜色值，例如RGBA、HSLA等，这些颜色值支持透明度设置，使得颜色控制更加灵活。
渐变：CSS3支持线性渐变（linear-gradient）和径向渐变（radial-gradient），使得开发者能够创建更丰富的背景效果。
阴影：CSS3引入了box-shadow和text-shadow属性，使得开发者能够为元素和文本添加阴影效果。
2D/3D转换：CSS3的transform属性支持2D和3D转换，使得开发者能够创建出各种各样的动画效果。
过渡和动画：CSS3的transition属性和animation属性支持过渡和动画效果，使得元素状态的变化能够更加平滑和生动。
媒体查询：CSS3的媒体查询功能使得开发者能够根据设备的特性（例如屏幕宽度、设备类型等）来应用不同的样式，这对于响应式设计非常重要。

以上只是CSS3新特性的一部分，还有许多其他的新特性等待开发者去发现和利用。

3、Padding和Margin有什么区别？

Padding 和 Margin 都是 CSS 中用来控制元素周围空白区域的属性，但它们的用途和效果有一些不同。

Padding（内边距）：Padding 是元素的内边距，它位于元素的边框和内容之间。增加 Padding 可以增大元素的总尺寸，因为 Padding 是添加到元素内容的宽度和高度之上的。如果元素有背景色或背景图，Padding 区域也会显示这个背景。

例如：
```
div {
  background-color: lightblue;
  padding: 10px;
}
```
这会创建一个 div，其内容周围有 10px 的 lightblue 背景色区域。
Margin（外边距）：Margin 是元素的外边距，它位于元素的边框和其他元素之间。增加 Margin 不会增大元素本身的尺寸，但会增大元素周围的空白区域。Margin 区域是透明的，不显示元素的背景色或背景图。

例如：
```
div {
  background-color: lightblue;
  margin: 10px;
}
```
这会创建一个 div，其周围有 10px 的透明区域，这个区域会将 div 与其他元素分开。

总结一下，Padding 是元素的内部空间，它会影响元素的尺寸，并且会显示元素的背景。Margin 是元素的外部空间，它不影响元素的尺寸，只影响元素与其他元素的距离，并且不显示元素的背景。

4、CSS引入的方式有哪些? link和@import的区别是?

CSS可以通过以下三种方式引入：

内联样式：直接在HTML元素中使用"style"属性来定义样式。这种方法的优先级最高，但不利于样式的复用和维护。
例如：
```
<div style="color: red;">This is a red text.</div>
```
内部样式：在HTML文档的<head>中使用<style>标签来定义样式。这种方法可以在一个HTML文档中复用样式，但在多个HTML文档中仍然需要重复定义。
例如：
```
<head>
  <style>
    .red-text {
      color: red;
    }
  </style>
</head>
<body>
  <div class="red-text">This is a red text.</div>
</body>
```
外部样式：通过<link>标签或者@import规则来引入外部的CSS文件。这种方法可以在多个HTML文档中复用样式，是最推荐的方法。
例如：
```
<head>
  <link rel="stylesheet" href="styles.css">
</head>
```
或者
```
<head>
  <style>
    @import url('styles.css');
  </style>
</head>
```

<link>和@import的主要区别在于：

加载顺序：<link>是HTML方式，与页面同时加载；@import是CSS方式，需要等到页面加载完才加载CSS。
兼容性：<link>标签几乎被所有浏览器所支持；@import是CSS2.1提出的，低版本的浏览器可能不支持。
使用限制：<link>可以定义RSS等其他事务；@import只能加载CSS。
DOM可控：<link>是HTML标签，因此可以通过JS操作DOM，插入标签来改变样式；而@import不行。

因此，一般情况下更推荐使用<link>方式来引入CSS。

5、简述CSS选择符有哪些?

CSS选择符（或称选择器）是用来选中页面中特定元素并应用样式的工具。以下是主要的CSS选择器：

元素选择器：这是最基础的选择器，它根据HTML元素的类型进行选择。例如，h1 { color: blue; }会将所有的h1元素的文字颜色设置为蓝色。
ID选择器：通过元素的id属性进行选择，id选择器在CSS中具有很高的优先级。例如，#myId { color: blue; }会将id为myId的元素的文字颜色设置为蓝色。
类选择器：通过元素的class属性进行选择。例如，.myClass { color: blue; }会将class为myClass的所有元素的文字颜色设置为蓝色。
属性选择器：通过元素的属性进行选择。例如，[href] { color: blue; }会将所有含有href属性的元素的文字颜色设置为蓝色。
后代选择器：选中某元素的后代元素。例如，div p { color: blue; }会将所有在div元素内部的p元素的文字颜色设置为蓝色。
子元素选择器：选中某元素的直接子元素。例如，div > p { color: blue; }会将所有直接在div元素下一级的p元素的文字颜色设置为蓝色。
相邻兄弟选择器：选中某元素的下一个兄弟元素。例如，h1 + p { color: blue; }会将所有紧跟在h1元素后面的p元素的文字颜色设置为蓝色。
通用选择器：选中所有元素。例如，* { color: blue; }会将所有元素的文字颜色设置为蓝色。

此外，CSS3还引入了一些新的选择器，如：

结构伪类选择器：例如:first-child、:last-child、:nth-child()等，用来选择特定位置的元素。
否定伪类选择器：例如:not()，用来选择除某些元素以外的元素。
伪元素选择器：例如::before、::after，用来选择元素的一部分，或者在元素前后插入内容。

以上只是一部分选择器，CSS中还有许多其他的选择器等待你去发现和使用。

6、CSS居中（包括水平居中和垂直居中）的方案有哪些？

CSS中实现元素居中的方法很多，具体的方法取决于你的布局需求和要居中的元素的特性。以下是一些常见的水平居中和垂直居中的方法：

行内元素的水平居中：可以通过设置父元素的 text-align: center; 来实现。
块级元素的水平居中：如果元素的宽度已知，可以通过设置 margin-left 和 margin-right 为 auto 来实现。
绝对定位元素的水平居中：如果元素使用了绝对定位，可以通过设置 left: 50%; 和 transform: translateX(-50%); 来实现。
Flex布局的水平居中和垂直居中：设置父元素为Flex布局，然后通过 justify-content: center;（水平居中）和 align-items: center;（垂直居中）来实现。
单行文本的垂直居中：可以通过设置 line-height 等于元素的高度来实现。
绝对定位元素的垂直居中：如果元素使用了绝对定位，可以通过设置 top: 50%; 和 transform: translateY(-50%); 来实现。
Grid布局的水平居中和垂直居中：设置父元素为Grid布局，然后通过 justify-items: center;（水平居中）和 align-items: center;（垂直居中）来实现。

以上只是一部分方法，CSS中还有许多其他的方法可以实现元素的居中。不同的方法有各自的优点和适用场景，需要根据实际需求来选择合适的方法。

7、解释CSS的盒子模型？

CSS的盒模型是一个用于设计和布局的基本概念，它将HTML元素视为一个矩形的盒子，这个盒子由内到外包含以下几个部分：

内容（Content）：这是盒子里面的实际内容，比如文本、图片等，由width和height属性定义。
内边距（Padding）：围绕在内容周围的空间，由padding属性定义。内边距是可选的，它的大小会影响到元素的最终尺寸，因为它会增加到内容的宽度和高度上。
边框（Border）：围绕在内边距和内容外的线，由border属性定义。边框是可选的，它的大小同样会影响到元素的最终尺寸。
外边距（Margin）：围绕在边框外部的空间，由margin属性定义。外边距是可选的，它不会影响元素本身的尺寸，但会影响元素与其他元素的距离。

在CSS中，盒模型的尺寸计算有两种模式：标准模式和怪异模式（Quirks Mode）。在标准模式下，元素的总宽度（或高度）= 内容宽度（或高度）+ 左右（或上下）内边距 + 左右（或上下）边框。在怪异模式下，元素的总宽度（或高度）= 内容宽度（或高度），但内容宽度（或高度）包含了左右（或上下）的内边距和边框。

CSS3引入了一个新的box-sizing属性，通过设置这个属性为border-box，可以使元素始终按照怪异模式来计算尺寸，这在很多情况下会使布局更加方便。

8、CSS 选择符有哪些？哪些属性可以继承？

CSS 选择符（选择器）的种类非常多，下面是一些常见的选择器：

元素选择器：选择特定类型的HTML元素，例如p、div、h1等。
类选择器：通过元素的class属性进行选择，例如.myClass。
ID选择器：通过元素的id属性进行选择，例如#myId。
属性选择器：通过元素的属性进行选择，例如[href]、[type="text"]等。
子代选择器：选择某元素的直接子元素，例如div > p。
后代选择器：选择某元素的所有后代元素，例如div p。
相邻兄弟选择器：选择某元素的下一个兄弟元素，例如h1 + p。
一般兄弟选择器：选择某元素后面所有的兄弟元素，例如h1 ~ p。
伪类选择器：选择特定状态的元素，例如:hover、:focus、:active、:visited、:first-child等。
伪元素选择器：选择元素的某个部分，或者在元素前后插入内容，例如::before、::after、::first-letter等。

CSS中，有一些属性是可以继承的，这意味着如果没有为某个元素指定这些属性，那么它会继承其父元素的属性值。可以继承的属性有很多，下面是一些常见的可以继承的属性：

文本相关的属性，如color、font、letter-spacing、line-height、text-align、text-indent、text-transform等。
列表相关的属性，如list-style、list-style-type、list-style-position、list-style-image等。
表格布局相关的属性，如border-collapse、border-spacing等。
光标相关的属性，如cursor等。
可见性相关的属性，如visibility等。

但是大多数盒模型相关的属性（如width、height、margin、padding、border等）和定位相关的属性（如position、top、bottom、left、right、z-index等）是不可继承的。具体哪些属性可以继承，可以查阅相关的CSS文档。

9、请阐述CSS3新增伪类举例？

CSS3 引入了许多新的伪类，这些伪类提供了更加强大的选择器功能，使得我们可以更加方便地选择到特定的元素。以下是一些常见的CSS3新增伪类：

:nth-child(n): 选取每个父元素下的第n个子元素。例如，p:nth-child(2) 会选取每个父元素下的第二个 <p> 元素。

p:nth-child(2) {
  color: red;
}

以上代码将会使得每个父元素的第二个 <p> 元素的文本颜色为红色。

:nth-last-child(n): 这个伪类的作用与 :nth-child(n) 类似，但是它是从后往前计数的。例如，p:nth-last-child(1) 会选取每个父元素下的最后一个 <p> 元素。
:last-child: 选取每个父元素的最后一个子元素。例如，p:last-child 会选取每个父元素的最后一个 <p> 元素。
:first-of-type: 选取父元素的第一个特定类型的子元素。例如，p:first-of-type 会选取每个父元素的第一个 <p> 元素。
:last-of-type: 选取父元素的最后一个特定类型的子元素。例如，p:last-of-type 会选取每个父元素的最后一个 <p> 元素。
:nth-of-type(n): 选取父元素的第n个特定类型的子元素。例如，p:nth-of-type(2) 会选取每个父元素的第二个 <p> 元素。
:nth-last-of-type(n): 这个伪类的作用与 :nth-of-type(n) 类似，但是它是从后往前计数的。例如，p:nth-last-of-type(1) 会选取每个父元素下的最后一个 <p> 元素。
:only-child: 选取父元素下唯一的子元素。例如，如果一个元素下只有一个 <p> 元素，那么 p:only-child 就可以选取到这个 <p> 元素。
:only-of-type: 选取父元素下唯一的特定类型的子元素。例如，如果一个元素下只有一个 <p> 元素，那么 p:only-of-type 就可以选取到这个 <p> 元素。
:empty: 选取不包含子元素或者文本的元素。

以上就是CSS3新增的一些伪类，它们使得我们能够更加灵活地选择到页面上的特定元素。

10、为什么要初始化CSS样式？

初始化 CSS 样式，也被称为 CSS Reset，主要是为了解决不同浏览器之间的默认样式差异问题。因为不同浏览器对于一些标签的默认样式可能会有所不同，这可能会导致你的网页在不同的浏览器下看起来不一样。

例如，某些浏览器可能会对 <h1> 标签应用较大的外边距，而其他浏览器可能不会。如果你没有明确设置 <h1> 标签的外边距，那么它在不同浏览器下可能会有不同的显示效果。

初始化 CSS 样式的方法通常是在你的 CSS 文件的开始部分，添加一段 CSS 代码，明确设置所有元素的一些基本样式，例如外边距，内边距，字体大小等。这样可以确保你的网页在所有浏览器下都有一致的基本样式。

例如，以下是一个非常简单的 CSS 初始化代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

以上代码将所有元素的外边距和内边距设置为0，并且设置所有元素的盒模型为 box-sizing。这样可以确保你的布局在不同浏览器下都有一致的效果。

总的来说，初始化 CSS 样式是为了解决浏览器之间的样式差异，确保你的网页在所有浏览器下都有一致的显示效果。

11、使用 CSS 预处理器的优缺点有哪些？

CSS 预处理器如 Sass、Less 和 Stylus 等，可以帮助我们编写更加结构化、可维护的 CSS 代码，提高开发效率。它们的优缺点如下：

优点：

嵌套语法：CSS 预处理器支持选择器的嵌套，这使得我们的 CSS 代码更加结构化，更易于阅读和维护。
变量和混合：CSS 预处理器允许我们定义可重用的 CSS 规则和值。例如，我们可以定义一个颜色变量，然后在整个样式表中使用这个变量，如果需要改变这个颜色，只需要改变变量的值即可。
函数和运算：CSS 预处理器支持一些编程特性，如条件语句，循环，函数等，使得我们可以编写更加动态的 CSS 代码。
导入和模块化：CSS 预处理器支持导入其他 CSS 文件，这使得我们可以将 CSS 代码分割成多个小的、可重用的模块，提高代码的可维护性。
厂商前缀自动化：一些 CSS 预处理器支持自动添加厂商前缀，这可以帮助我们解决 CSS3 在不同浏览器下的兼容性问题。

缺点：

需要编译：CSS 预处理器的代码需要编译成 CSS 代码才能在浏览器中运行，这增加了开发流程的复杂性。
学习成本：虽然 CSS 预处理器的语法通常都比较简单，但是对于初学者来说，还是需要花一些时间来学习。
调试困难：因为浏览器读取的是编译后的 CSS 文件，所以当出现问题时，直接在浏览器端调试可能会比较困难。不过现在有 Source Maps 技术可以映射到原始的预处理器文件，缓解了这个问题。
可能导致过度设计：CSS 预处理器的强大功能，如果使用不当，可能会导致过度设计，生成冗长和复杂的 CSS 代码。

总的来说，选择是否使用 CSS 预处理器，主要取决于项目的需求和团队的技术栈。

12、你用过媒体查询，或针对移动端的布局/CSS吗？

是的，我非常熟悉媒体查询和针对移动端的布局/CSS。

媒体查询是 CSS3 的一个重要特性，它允许我们根据设备的特性，如视窗宽度，像素密度等，来应用不同的 CSS 规则。这在创建响应式设计的网站时非常有用，因为我们可以根据用户设备的屏幕大小来调整布局和样式。

例如，以下的 CSS 代码会将视窗宽度小于600px的设备的背景颜色设置为灰色：

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

针对移动端的布局/CSS，我们通常需要考虑的问题有：

触摸友好：移动设备主要通过触摸来操作，所以我们需要确保所有的可点击的元素都足够大，且有足够的间距，以避免误点击。
简洁的设计：移动设备的屏幕通常较小，所以我们需要保持设计的简洁，避免过多的元素导致界面显得拥挤。
优化图片：移动设备的网络连接可能较慢，所以我们需要优化图片，减少页面的加载时间。
流式布局：使用百分比、flexbox、grid 等技术来创建可以自适应屏幕大小的布局。

总的来说，媒体查询和针对移动端的布局/CSS 是现代前端开发中非常重要的技能。

13、简述写高效CSS时会有哪些问题需要考虑？

编写高效的 CSS 是一项重要的技能，需要考虑的问题包括但不限于以下几点：

选择器性能：尽量避免使用过于复杂的选择器，尤其是深度嵌套的选择器，因为它们会影响浏览器的渲染性能。通常来说，ID 选择器、类选择器和标签选择器的性能都比较好。
避免冗余代码：尽量避免编写重复的 CSS 规则，可以使用 CSS 预处理器的混合或 CSS 自定义属性来重用 CSS 规则。
代码组织：合理地组织你的 CSS 代码，可以提高代码的可读性和可维护性。你可以按功能、组件或者页面来组织你的 CSS 代码。
使用 CSS 预处理器：CSS 预处理器如 Sass、Less 和 Stylus 等，可以帮助你编写更加结构化、可维护的 CSS 代码。
媒体查询的使用：媒体查询可以帮助你创建响应式的布局，但是过度使用媒体查询可能会导致 CSS 代码变得复杂。一个好的做法是先设计移动版的布局，然后使用媒体查询来适应更大的屏幕。
CSS 动画性能：并非所有的 CSS 属性都适合用来创建动画，一些属性的变化可能会导致浏览器重新布局或者重绘，这会影响动画的性能。通常来说，使用 transform 和 opacity 来创建动画的性能比较好。
使用外部样式表：将 CSS 代码放在外部样式表中，可以利用浏览器的缓存机制，减少页面的加载时间。
减少 HTTP 请求：可以使用 CSS 雪碧图或者字体图标来减少 HTTP 请求的数量，提高页面的加载速度。

以上就是编写高效 CSS 时需要考虑的一些问题，希望对你有所帮助。

14、解释下浏览器是如何判断元素是否匹配某个CSS选择器？

浏览器判断元素是否匹配某个 CSS 选择器的过程，实际上是从右向左进行的。这种方式可以更快地确定是否有元素匹配选择器。

例如，对于选择器 div p span，浏览器首先会查找所有的 <span> 元素，然后向上查找其父元素是否有 <p> 元素，如果有，再继续向上查找其父元素中是否有 <div> 元素。如果所有条件都满足，则该 <span> 元素就匹配这个选择器。

这种从右向左的匹配方式的优点是，可以尽早地排除大部分不匹配的元素。因为页面中的大部分元素都是叶子节点（即没有子元素的节点），例如 <span>、<a>、<img> 等，如果从左向右匹配，可能会浪费大量时间去检查这些元素和其子元素，但是实际上它们大部分都不会匹配选择器。从右向左匹配则可以尽早地排除这些元素，提高匹配的效率。

需要注意的是，虽然选择器的匹配效率很重要，但是通常不会对页面的性能产生太大影响。相比之下，选择器的复杂性以及相应规则的数量和复杂性，对页面的性能影响更大。因此，编写简单、高效的 CSS 选择器是很重要的。

由于内容太多，更多内容以链接形势给大家，点击进去就是答案了

15. CSS浮动元素引起的问题和解决方法是什么？

16. 解释一下 CSS Sprite，以及如何在页面或网站中使用它？

17. 简要描述CSS中 content属性的作用？

18. 简述你对IFC规范的理解？

19. 简述GFC规范的理解？

20. 简述对FFC规范的理解？

21. 简述CSS什么是外边距重叠？重叠的结果是什么？

22. 简述CSS中，自适应的单位都有哪些？

23. 简述rem和em的区别？

24. 解释first-child与first-of-type的区别是什么？

25. 简述content-box盒模型？

26. 简述padding-box盒模型？

27. 简述Animation属性值有哪些？

28. CSS如何把一个元素旋转30°？

29. 简述CSS盒阴影的原理？

30. 简述CSS3中 transition属性值及含义？

31. 简述CSS中background-clip和 background- origin的区别？

32. CSS如何实现文本换行？

33. 简述CSS如何实现超出隐藏省略？

34. 简述CSS3实现动画的方式？

35. 简述CSS实现自适应正方形、等宽高比矩形？

36. 简述CSS实现两栏布局的方式？

37. 简述什么是Grid布局？

38. 简述元素⽔平垂直居中的方法有哪些？如果元素不定宽高呢？

39. 简述如何实现单行／多行文本溢出的省略样式？

40. 简述深入理解设备像素、CSS像素、设备独立像素、 DPR、PPI之间的区别与适配⽅案？

41. 简述如何使用Animation 实现自定义动画？

42. 简述transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式？