常见 CSS 面试题

1. CSS 选择器的优先级是如何确定的？

选择器的优先级由选择器的特异性（Specificity）决定，它基于选择器的类型和数量。特异性由四组数字表示，每组数字对应选择器的类型：内联样式（1000）、ID 选择器（01）、类选择器和伪类选择器（00）、类型选择器和伪元素选择器（000）。优先级从左到右比较，数值大的优先级高。如果特异性相同，则后定义的规则优先级高。

2. CSS 选择器有哪些类型？请举例说明

基本选择器
- 标签选择器：直接使用 HTML 标签名作为选择器，会选择页面上所有该类型的标签。例如p选择器会选择所有的<p>元素。
- 类选择器：以.开头，后面跟着类名。可以为多个元素设置相同的类名，然后使用类选择器统一设置样式。例如.highlight 选择器会选择所有具有 highlight 类的元素。
- ID 选择器：以#开头，后面跟着 ID 名。ID 在页面中应该是唯一的，用于选择特定的元素。例如#header选择器会选择 ID 为 header 的元素。
组合选择器
- 后代选择器：用空格分隔两个选择器，表示选择第一个选择器元素内部的所有第二个选择器元素。例如div p会选择<div>元素内部的所有<p>元素。
- 子元素选择器：用>分隔两个选择器，表示选择第一个选择器元素的直接子元素中的第二个选择器元素。例如div > p会选择<div>元素的直接子元素<p>。
- 相邻兄弟选择器：用+分隔两个选择器，表示选择紧跟在第一个选择器元素后面的第二个选择器元素。例如h1 + p会选择紧跟在<h1>元素后面的<p>元素。
伪类选择器
- 状态伪类：如:hover（鼠标悬停时的样式）、:active（元素被激活时，如鼠标按下时的样式）、:visited（针对<a>元素，已访问链接的样式）等。例如a:hover会在鼠标悬停在<a>元素上时改变样式。
- 结构伪类：例如:nth-child(n)（选择某个父元素的第 n 个子元素）、:first-child（选择父元素的第一个子元素）、:last-child（选择父元素的最后一个子元素）等。例如li:nth-child(2)会选择父元素下的第二个<li>元素。

3. 什么是盒模型，以及如何控制它？

CSS 盒模型描述了 HTML 元素在页面布局中所占据的空间。它由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分组成。标准盒模型中，元素的宽度（width）和高度（height）只包含内容部分，而在 IE 盒模型（怪异盒模型）中，宽度和高度包含了内容、内边距和边框。。box-sizing 属性可以控制盒模型的计算方式，content-box 是默认值，只包括内容区域；border-box 包括内容、内边距和边框。

4. 解释 Flexbox 和 Grid 布局的区别和用途

Flexbox 适用于一维布局（水平或垂直），适合简单布局和对齐。Grid 布局适用于二维布局，可以创建复杂的网格布局，适合复杂的页面布局设计。

5. 如何实现响应式设计？

响应式设计是指根据不同屏幕尺寸和设备类型，自动调整布局和样式以适应不同的显示需求。可以使用媒体查询（@media）根据不同屏幕尺寸应用不同样式，使用百分比宽度、视口单位（vw/vh）、flexbox 和 grid 布局来创建灵活的布局，使用响应式图片（如 srcset 和 sizes 属性）。

6. 什么是响应式设计？响应式设计的基本原理是什么？如何做？

响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整，描述响应式界面最著名的一句话就是“Content is like water”，“如果将屏幕看作容器，那么内容就像水一样”的哲学思想，是响应式设计的核心。

响应式网站常见特点：

同时适配 PC + 平板 + 手机等
标签导航在接近手持终端设备时改变为经典的抽屉式导航
网站的布局会根据视口来调整模块的大小和位置

响应式设计实现通常会从以下几方面思考：

弹性盒子（包括图片、表格、视频）和媒体查询等技术
使用相对单位创建流式布局的弹性 UI，同时使用媒体查询限制元素的尺寸和内容变更范围
使用相对单位使得内容自适应调节
选择断点，针对不同断点实现不同布局和内容展示

优点：

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点：

仅适用布局、信息、框架并不复杂的部门类型网站
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

7. 什么是 BEM 命名方法，它有什么好处？

BEM 是 Block Element Modifier 的缩写，是一种 CSS 命名约定。它通过模块化的方式组织 CSS，提高代码的可读性和可维护性。Block 代表组件，Element 是组件的子部分，Modifier 是组件或子部分的状态或变体。

8. 解释 CSS 的 float 属性和清除浮动的方法

浮动（float）是 CSS 定位属性。浮动元素从网页的正常流动中移出，但是保持了部分的流动性，会影响其他元素的定位（比如文字会围绕着浮动元素）。这一点与绝对定位不同，绝对定位的元素完全从文档流中脱离。float 常用于创建多列布局。清除浮动的方法包括在浮动元素后添加一个清除浮动的元素（使用 clear 属性），或在父元素上使用 overflow 属性（如 overflow:auto）。

9. 什么是 CSS 的继承，哪些属性会被继承？

CSS 继承是指子元素从父元素继承某些属性的值。可继承的属性包括字体相关属性（如 font-family、font-size）、color、line-height、text-align、vertical-align、list-style 等，不可继承的属性包括 margin、padding、border 等。

10. 请阐述 z-index 属性，并说明如何形成层叠上下文（stacking context）

CSS 中的 z-index 属性控制重叠元素的垂直叠加顺序。z-index 只能影响 position 值不是 static 的元素。

没有定义 z-index 的值时，元素按照它们出现在 DOM 中的顺序堆叠（层级越低，出现位置越靠上）。非静态定位的元素（及其子元素）将始终覆盖静态定位（static）的元素，而不管 HTML 层次结构如何。

层叠上下文的特点：

层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。
每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。

文档中的层叠上下文由满足以下任意一个条件的元素形成：

文档根元素（<html>）；
position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
flex (flex) 容器的子元素，且 z-index 值不为 auto；
grid (grid) 容器的子元素，且 z-index 值不为 auto；
opacity 属性值小于 1 的元素；
mix-blend-mode 属性值不为 normal 的元素；
以下任意属性值不为 none 的元素：
- transform
- filter
- backdrop-filter
- perspective
- clip-path
- mask / mask-image / mask-border
isolation 属性值为 isolate 的元素；
will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素；
contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

11. 如何在 CSS 中实现圆角、阴影和渐变？

使用 border-radius 属性实现圆角，使用 box-shadow 属性实现阴影，使用 linear-gradient 或 radial-gradient 函数实现渐变。

12. 什么是 CSS 的伪类和伪元素，它们之间有什么区别？

伪类和伪元素都是 CSS 中的伪对象，用于选择文档中不存在或不存在的元素。伪类是基于元素的状态改变样式，如:hover、:focus、:nth-child 等。伪元素是基于元素的内容创建新的样式，如::before、::after 等，用于添加装饰性内容。

13. 如何使用 CSS 实现水平居中？

使用 flexbox 布局实现水平居中，将 display 属性设置为 flex，并将 justify-content 属性设置为 center。使用 grid 布局实现水平居中，将 display 属性设置为 grid，然后将 justify-items 属性设置为 center。

14. 解释 CSS 的 display 属性及其取值

display 属性定义了元素的显示类型。

block：块级元素，独占一行。
inline：行内元素，在一行内显示。
inline-block：行内块元素，在一行内显示，但可以设置宽度和高度。
none：不显示元素。
flex：弹性布局，用于创建灵活的布局。
grid：网格布局，用于创建二维布局。
table：表格布局，用于创建二维表格。
contents：内容布局，用于创建隐藏元素的布局。

15. 解释 CSS 的 position 属性及其取值

position 属性用于控制元素的定位方式。

static：默认值，元素不定位。
relative：相对定位，相对于元素在文档流中的原始位置进行定位。
absolute：绝对定位，相对于最近的已定位的祖先元素进行定位。
fixed：固定定位，相对于浏览器窗口进行定位。
sticky：粘性定位，元素在用户滚动页面时固定在某个位置。

16. 如何实现水平垂直居中？（多种方法）

使用 flex 布局：给父元素设置 display: flex，然后使用 justify - content: center 使子元素在主轴（水平方向）上居中，align - items: center 使子元素在交叉轴（垂直方向）上居中。
grid 布局：给父元素设置 display: grid，然后使用 justify-items 和 align-items 属性使子元素在网格中居中。
绝对定位 + 负边距：给子元素设置 position: absolute，然后将子元素的 top、left 属性设置为 50%，使子元素的左上角定位到父元素的中心。再通过设置子元素的 margin-top 和 margin-left 为自身高度和宽度的一半的负值，将子元素拉回中心位置。
绝对定位 + transform：给子元素设置 position: absolute，然后将 top、left 属性设置为 50%，然后使用 transform: translate(-50%, -50%)将子元素从中心位置沿自身的水平和垂直方向各平移自身宽度和高度的 50%，从而实现居中。
绝对定位 + margin: auto：给父元素设置 position: relative，子元素设置 position: absolute，然后将 top、left、right 和 bottom 属性分别设置为 0，再使用 margin: auto 将子元素居中。
表格布局：给父元素设置 display: table-cell，然后使用 vertical-align: middle 和 text-align: center 使子元素在父元素中水平垂直居中。

17. 如何使用 CSS 实现文字的换行和断句？

使用 word-break 属性实现文字的换行，使用 word-wrap 属性实现断句。word-break 属性用于控制单词之间的换行方式，取值有 normal、break-all 和 keep-all 等。word-wrap 属性用于控制是否允许长单词或 URL 地址在单词中间断开，取值有 normal（默认）和 break-word（允许在单词内换行）。

18. 如何使用 CSS 实现文本的溢出显示省略号？

使用 text-overflow 属性实现文本的溢出显示省略号，取值为 clip（裁剪）、ellipsis（省略号）或 string（自定义字符串）。

19. CSS3 有哪些新增特性？

CSS3 的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用 RGBA 实现透明效果、渐变效果、使用@Font-Face 实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。

1. 边框特性

CSS3 对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在 CSS3 中最常用的一个改进就是圆角边框，通过 CSS3 的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义。

2. 多背景图

CSS3 允许使用多个属性（比如 background-image、background-repeat、background-size、background-position、background-origin 和 background-clip 等）在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题，帮助 Web 前端开发者在不借助 Photoshop 的情况下实现对页面背景的设计，简化了背景图片的维护成本。

3. 颜色与透明度

CSS3 颜色模块的引入，实现了制作 Web 效果时不再局限于 RGB 和十六进制两种模式。CSS3 增加了 HSL、HSLA、RGBA 几种新的颜色模式。这几种颜色模式的提出，在做开发的时候不仅可以设置元素的色彩，还能根据需要轻松地设定元素透明度。

4. 多列布局与弹性盒模型布局

CSS3 多列布局属性可以不使用多个 div 标签就能实现多列布局。CSS3 中的多列布局模块描述了如何像报纸、杂志那样，把一个简单的区块拆成多列，并通过相应属性来实现列数、列宽、各列之间的空白间距。弹性盒模型布局方便了 Web 前端开发者根据复杂的前端分辨率进行弹性布局，轻松地实现页面中的某一区块在水平、垂直方向对齐，是进行响应式网站开发的一大利器。

5. 盒子的变形

在 CSS2.1 中，想让某个元素变形必须要借助 JavaScript 写大量的代码实现，在 CSS3 中加入了变形属性，该属性在 2D 或 3D 空间里操作盒子的位置和形状，来实现例如旋转、扭曲、缩放或者移位。变形属性的出现，使 Web 前端中的元素展示不仅仅局限在二维空间，Web 前端开发者可以通过旋转、扭曲、缩放或者移位等操作实现元素在三维控件上的展示。通过变形元素，web 前端中的内容展示更加形象、真实。

6. 过渡与动画

CSS3 的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。CSS3 的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何 Flash 或 JavaScript 脚本代码。过渡与动画的出现，使 CSS 在 Web 前端开发中不再仅仅局限于简单的静态内容展示，而是通过简单的方法使页面元素动了起来，实现了元素从静到动的变化 [40]。

7. Web 字体

CSS3 中引入了@font-face，@font-face 是链接服务器字体的一种方式，这些嵌入的字体能变成浏览器的安全字体，开发人员不用再担心用户没有这些字体而导致网页在用户浏览器无法正常显示的问题 [40]。

8. 媒体查询

CSS3 中引入媒体查询（mediaqueries），可为不同分辨率的设备定义不同的样式。比如，在可视区域小于 480 像素时，可能想让原来在右侧的网站侧栏显示在主内容的下边，以往必须通过 JavaScript 判断用户浏览器的分辨率，然后再通过 JavaScript 修改 CSS。CSS3 中只需要通过媒体查询就可实现上述操作 [40]。

9. 阴影

阴影主要分为两种：文本阴影（text-shadow）和盒子阴影（box-shadow）。文本阴影在 CSS2 中已经存在，但没有得到广泛的运用（CSS2.1 中删除了）。CSS3 延续了这个特性，并进行了新的定义，该属性提供了一种新的跨浏览器解决方案，使文本看起来更加醒目。CSS3 中的盒子阴影的引入，可轻易地为任何元素添加盒子阴影。

20. 说说 em/px/rem/vh/vw 区别？

em/px/rem/vh/vw 都是 CSS 中的单位，它们之间的区别如下：

em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 按自身来计算，整个页面内 1em 不是一个固定的值。
px：绝对单位，像素的缩写，相对于显示器屏幕分辨率而言。
rem：相对单位，相对根节点 html 的字体大小来计算值。 vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单，1vh 等于视窗高度的 1%。

21. 说说设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？

设备像素（device pixels）：设备屏幕上的物理像素点。

css 像素：CSS 像素是 CSS 规范中定义的单位，是一个抽象的单位，主要用来设计和布局。

设备独立像素（device-independent pixels）：也叫密度无关像素，可以认为是计算机坐标系统中用到的最基础的长度单位，与设备像素无关。

dpr：DPR 是 Device Pixel Ratio 的缩写，即设备像素比，表示设备像素和 CSS 像素之间的对应关系。

ppi：PPI 是 Pixels Per Inch 的缩写，即每英寸像素数，表示每英寸内的像素数量。

22. css 中，有哪些方式可以隐藏页面元素？区别？

对比	display: none	visibility: hidden	opacity: 0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能

23. 说说你对 BFC 的理解？

BFC 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

在 BFC 中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直间隙是由他们的 margin 边距所决定的。在一个 BFC 中，两个相邻的盒子的 vertical-align 值不会影响两者之间是否产生交集。在 BFC 中，每一个元素都位于包含框之中，这个包含框与元素生成的元素类型无关，也不管这个元素生成了哪种类型的框。

下列方式会创建块格式化上下文：

文档的根元素（<html>）—— 初始块格式上下文。
浮动元素（即 float 值不为 none 的元素）。
绝对定位元素（position 值为 absolute 或 fixed 的元素）。
行内块元素（display 值为 inline-block 的元素）。
表格单元格（display 值为 table-cell，HTML 表格单元格默认值）。
表格标题（display 值为 table-caption，HTML 表格标题默认值）。
匿名表格单元格元素（display 值为 table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或 inline-table）。
overflow 值不为 visible 或 clip 的块级元素。
display 值为 flow-root 的元素。
contain 值为 layout、content 或 paint 的元素。
弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
多列容器（column-count 或 column-width 值不为 auto，且含有 column-count: 1 的元素）。
column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中（规范变更、Chrome bug）

创建一个新的 BFC 很有用，因为新的 BFC 的行为与最外层的文档非常相似，它在主布局中创造了一个小布局。BFC 包含其内部的所有内容，float 和 clear 仅适用于同一格式上下文中的项目，而页边距仅在同一格式上下文中的元素之间折叠。

24. 怎么理解回流跟重绘？什么场景下会触发？

reflow 是指浏览器为了重新渲染部分或全部的文档，重新计算文档中的元素位置和几何尺寸的过程。

常见造成回流的场景：

添加或删除可见的 DOM 元素。
元素位置改变。
元素尺寸改变。
内容改变。
浏览器窗口尺寸改变。
属性改变。
获取某些属性。

repaint 是指浏览器为了绘制新的一帧而重新渲染前一帧的内容，通常会导致整个文档的重新绘制，但是 reflow 会导致 repaint 的。

常见造成重绘的场景：

颜色改变。
背景图片改变。
字体大小改变。
字体样式改变。

25. 为什么 transform 效率⾼？

transform 不会触发浏览器的重排和重绘，只会触发合成层的合成和层级的重新排序。

26. 让 Chrome 支持小于 12px 的文字方式有哪些？区别？

1. 使用 transform 缩放 使用 CSS 中的 transform 属性，将字体大小缩小一半，然后通过 scale 放大到原来的大小。例如：

css

.small-text {
  transform: scale(0.5);
}

2. 使用 -webkit-transform-style: preserve-3d 在 Chrome 中，可以使用 -webkit-transform-style: preserve-3d 来实现小于 12px 的文字显示。例如：

css

.small-text {
  -webkit-transform-style: preserve-3d;
  font-size: 6px;
}

3. 使用 webkit-text-size-adjust 在 Safari 中，可以使用 webkit-text-size-adjust 属性来控制字体大小。例如：

css

.small-text {
  -webkit-text-size-adjust: none;
  font-size: 6px;
}

4. 使用 zoom 在 IE 中，可以使用 zoom 属性来控制字体大小。例如：

css

.small-text {
  zoom: 0.5;
  font-size: 12px;
}

27. 说说对 CSS 预编语言的理解？有哪些区别？

CSS 预处理器是一种语言，用于将 CSS 代码转换为浏览器可以理解的有效 CSS 代码。CSS 预处理器提供了变量、函数、混合等高级特性，使得 CSS 代码更加简洁和可维护。

优点：

提高 CSS 可维护性。
易于编写嵌套选择器。
引入变量，增添主题功能。可以在不同的项目中共享主题文件。
通过混合（Mixins）生成重复的 CSS。
将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。

缺点：

需要预处理工具。
重新编译的时间可能会很慢。

常见的 CSS 预处理器有：Sass、Less、Stylus 等。它们之间有一些区别：

Sass 和 Less 是两种不同的 CSS 预处理器，它们具有不同的语法和功能。Sass 使用 SCSS（Sassy CSS）语法，Less 使用 Less 语法。
Sass 是基于 Ruby 的，Less 是基于 Node.js 的。这意味着 Sass 需要安装 Ruby 环境才能运行，而 Less 不需要任何外部环境。
Sass 支持更多的功能和更丰富的语法，如嵌套、混入、继承等。Less 则更加简单易学，适合初学者使用。
Sass 和 Less 都支持原生 CSS 的所有功能，但 Sass 提供了更多的扩展和自定义选项。
Sass 和 Less 在性能方面也有所不同。Sass 需要编译为 CSS 才能运行，而 Less 可以直接在浏览器中运行。
Sass 和 Less 都可以用于构建工具，如 Gulp、Grunt 等。

28. 如何为功能受限的浏览器提供页面？使用什么样的技术和流程？

对于功能受限的浏览器，我们可以使用渐进增强和优雅降级等策略来提供页面。

1. 渐进增强（Progressive Enhancement） 渐进增强是指从最基本的功能开始构建网站，然后逐步添加更高级的功能。这样可以保证大多数用户都能访问到最基本的页面内容，而那些高级功能的用户可以获得更好的体验。

例如：在 HTML 中只包含基本的页面结构，如标题、段落等元素。然后在 CSS 中添加样式，使页面更加美观。最后，通过 JavaScript 来实现一些交互效果，比如表单验证、动态内容加载等。

2. 优雅降级（Graceful Degradation） 优雅降级是指从高级功能开始构建网站，然后逐步回退到基本功能。这样可以保证所有用户都能访问到最基本的页面内容，而那些高级功能的用户可以获得更好的体验。

例如：首先在 HTML 中添加一些高级功能的标记，如视频、音频等元素。然后在 CSS 中为这些元素添加基本的样式，如背景颜色、边框等。最后，通过 JavaScript 来检测用户的浏览器是否支持这些高级功能，如果支持则显示高级功能，如果不支持则显示基本功能。

总之，为功能受限的浏览器提供页面需要综合考虑用户的需求和浏览器支持情况，使用渐进增强和优雅降级等策略来提供更好的用户体验。

29. block、inline、inline-block 有什么区别？

对比	block	inline-block	inline
大小	填充其父容器的宽度。	取决于内容。	取决于内容。
定位	从新的一行开始，并且不允许旁边有 HTML 元素（除非是 float）	与其他内容一起流动，并允许旁边有其他元素。	与其他内容一起流动，并允许旁边有其他元素。
能否设置 width 和 height	能	能	不能。设置会被忽略。
可以使用 vertical-align 对齐	不可以	可以	可以
边距（margin）和填充（padding）	各个方向都存在	各个方向都存在	只有水平方向存在。垂直方向会被忽略。尽管 border 和 padding 在 content 周围，但垂直方向上的空间取决于'line-height'
浮动（float）	-	-	就像一个 block 元素，可以设置垂直边距和填充。

30. 说说伪类和伪元素的区别？

伪类和伪元素都是 CSS 中的选择器，但是它们之间有一些区别：

语法不同。伪类使用冒号（:）表示，而伪元素使用双冒号（::）表示。例如：a:hover 表示鼠标悬停在链接上时的状态。
作用不同。伪类用于向某些选择器添加特殊的状态，比如 :hover 表示鼠标悬停在元素上时。伪元素用于创建一些虚拟的元素，比如 ::before 和 ::after 可以用来在元素之前或之后插入内容。
位置不同。伪类是选择器的状态，可以应用于任何元素。伪元素是创建的虚拟元素，只能应用于特定类型的元素。
兼容性不同。伪类通常比伪元素更受欢迎，因为它们具有更好的浏览器支持。
使用场景不同。伪类通常用于修改元素的外观和行为，如改变链接的颜色、添加鼠标悬停效果等。伪元素则用于创建虚拟元素，如插入内容、设置背景等。

31. 说说栅格系统的工作原理？

栅格系统是一种用于布局和排版的系统，它将页面划分为等宽的列，然后根据需要将它们组合成各种布局。栅格系统的工作原理如下：

定义列数和宽度。在 CSS 中，可以使用百分比或像素值来定义列的宽度。例如，可以将一行分为 12 等分，每份宽度为 100% / 12 = 8.3333333333%。
设置列的间距。可以通过设置列之间的间距来实现列之间的间隔效果。例如，可以将列之间的间距设置为 padding-left: 15px; 或 margin-right: 15px; 来实现列之间的间隔。
创建网格容器。使用 display: flex; 或 display: grid; 将元素设置为弹性布局或网格布局，以便将列组合在一起。
添加列内容。在每个列中添加所需的元素，如标题、段落、图片等。
调整列的大小。可以根据需要进行调整列的大小，以适应不同的屏幕尺寸。

32. CSS 提高性能的方法有哪些？

1. 尽量使用 CSS3 的新特性 CSS3 中有很多新的属性，这些属性可以让我们开发 Web 前端页面更加方便、高效。在开发过程中，我们应该尽可能地使用 CSS3 新特性，而不是使用老旧的技术来实现同样的效果。

2. 内联首屏关键 CSS 在 Web 开发中，首屏渲染的时间是非常重要的。为了提高首屏的渲染速度，我们可以将首屏关键 CSS 内联到 HTML 中，这样浏览器就可以尽快解析和渲染首屏关键 CSS。这样可以减少浏览器需要等待的资源数量，提高首屏渲染速度。

3. 避免使用过多选择器 在编写 CSS 时，应该尽量避免使用过多的选择器，因为这会增加 CSS 的解析时间。可以使用类名或 ID 来代替选择器。

具体是浏览器从最右边的选择器，即关键选择器（key selector），向左依次匹配。根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。并且避免使用标签和通用选择器作为关键选择器，因为它们会匹配大量的元素，浏览器必须要进行大量的工作，去判断这些元素的父元素们是否匹配。

4. 避免使用过多的属性 在编写 CSS 时，应该尽量避免使用过多的属性，因为这会增加 CSS 的文件大小和渲染时间。可以使用缩写来简化代码。

5. 减少使用昂贵的属性 在页面发生重绘的时候，昂贵属性如 box-shadow/border-radius/filter/透明度/:nth-child 等，会降低浏览器的渲染性能。

6. 使用压缩工具 使用压缩工具可以帮助我们减少 CSS 的文件大小，提高页面加载速度。可以使用在线的 CSS 压缩工具来压缩 CSS 代码。

7. 尽量不要使用@import @import 是 CSS 中用来导入外部样式表文件的一种方法，可以配合媒体查询来为不同的设备加载不同的样式表。但是@import 会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时。

8. 优化图片和字体文件 在 Web 开发中，图片和字体文件是占用带宽的重要资源。使用压缩工具可以减少图片和字体的文件大小，提高页面加载速度。

9. 避免使用过多的 CSS 文件 在 Web 开发中，应该避免使用过多的 CSS 文件，因为这会增加页面的加载时间。可以使用 CSS 文件合并工具将多个 CSS 文件合并成一个，减少 HTTP 请求数量。

10. 使用 CDN 加速 使用 CDN（内容分发网络）可以加速 CSS 文件的加载速度，减少页面加载时间。

11. 动画尽量使用 transform 属性 transform 属性可以用来改变元素的外观和位置，而不会影响其他元素的位置。使用 transform 属性可以减少页面重绘和回流的发生，提高页面的性能。

常见 CSS 面试题 ​

1. CSS 选择器的优先级是如何确定的？ ​

2. CSS 选择器有哪些类型？请举例说明 ​

3. 什么是盒模型，以及如何控制它？ ​

4. 解释 Flexbox 和 Grid 布局的区别和用途 ​

5. 如何实现响应式设计？ ​

6. 什么是响应式设计？响应式设计的基本原理是什么？如何做？ ​

7. 什么是 BEM 命名方法，它有什么好处？ ​

8. 解释 CSS 的 float 属性和清除浮动的方法 ​

9. 什么是 CSS 的继承，哪些属性会被继承？ ​

10. 请阐述 z-index 属性，并说明如何形成层叠上下文（stacking context） ​

11. 如何在 CSS 中实现圆角、阴影和渐变？ ​

12. 什么是 CSS 的伪类和伪元素，它们之间有什么区别？ ​

13. 如何使用 CSS 实现水平居中？ ​

14. 解释 CSS 的 display 属性及其取值 ​

15. 解释 CSS 的 position 属性及其取值 ​

16. 如何实现水平垂直居中？（多种方法） ​

17. 如何使用 CSS 实现文字的换行和断句？ ​

18. 如何使用 CSS 实现文本的溢出显示省略号？ ​

19. CSS3 有哪些新增特性？ ​

20. 说说 em/px/rem/vh/vw 区别？ ​

21. 说说设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？ ​

22. css 中，有哪些方式可以隐藏页面元素？区别？ ​

23. 说说你对 BFC 的理解？ ​

24. 怎么理解回流跟重绘？什么场景下会触发？ ​

25. 为什么 transform 效率⾼？ ​

26. 让 Chrome 支持小于 12px 的文字方式有哪些？区别？ ​

27. 说说对 CSS 预编语言的理解？有哪些区别？ ​

28. 如何为功能受限的浏览器提供页面？ 使用什么样的技术和流程？ ​

29. block、inline、inline-block 有什么区别？ ​

30. 说说伪类和伪元素的区别？ ​

31. 说说栅格系统的工作原理？ ​

32. CSS 提高性能的方法有哪些？ ​