关于前端:2023年前端面试真题之CSS篇

人的毕生，总是不免有浮沉。不会永远如旭日东升，也不会永远苦楚潦倒。重复地一浮一沉，对于一个人来说，正是磨难。因而，浮在下面的，不用自豪；沉在底下的，更用不着乐观。必须以率直、虚心的态度，乐观进取、向前迈进。——松下幸之助

大家好，我是江辰，在现在的互联网大环境下，想必大家都或多或少且有感触，塌实的社会之下，只有一直的放弃心性，能力感知不同的播种，互勉。

2023 年最新的面试题集锦，时刻做好筹备。

本文首发于微信公众号：家养程序猿江辰

欢送大家点赞，珍藏，关注

文章列表

• 2023 年前端面试真题之 JS 篇
• 2023 年前端面试真题之编码篇
• 2023 年前端面试真题之 HTML 篇
• 2023 年前端面试真题之 React 篇
• 2023 年前端面试真题之 Vue 篇

CSS 选择器的优先级是如何计算的？

浏览器通过优先级规定，判断元素展现哪些款式。优先级通过 4 个维度指标确定，咱们假设以 a、b、c、d 命名，别离代表以下含意：

• a 示意是否应用内联款式（inline style）。如果应用，a 为 1，否则为 0。
• b 示意 ID 选择器的数量。
• c 示意类选择器、属性选择器和伪类选择器数量之和。
• d 示意标签（类型）选择器和伪元素选择器之和。

优先级的后果并非通过以上四个值生成一个得分，而是每个值离开比拟。a、b、c、d 权重从左到右，顺次减小。判断优先级时，从左到右，一一比拟，直到比拟出最大值，即可进行。所以，如果 b 的值不同，那么 c 和 d 不论多大，都不会对后果产生影响。比方 0，1，0，0 的优先级高于 0，0，10，10。

当呈现优先级相等的状况时，最晚呈现的款式规定会被驳回。如果你在样式表里写了雷同的规定（无论是在该文件外部还是其它款式文件中），那么最初呈现的（在文件底部的）款式优先级更高，因而会被驳回。

在写款式时，我会应用较低的优先级，这样这些款式能够轻易地笼罩掉。尤其对写 UI 组件的时候更为重要，这样使用者就不须要通过非常复杂的优先级规定或应用 !important 的形式，去笼罩组件的款式了。

重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？你会抉择哪种形式，为什么？

• 重置（Resetting）：重置意味着除去所有的浏览器默认款式。对于页面所有的元素，像 margin、padding、font-size 这些款式全副置成一样。你将必须从新定义各种元素的款式。
• 标准化（Normalizing）：标准化没有去掉所有的默认款式，而是保留了有用的一部分，同时还纠正了一些常见谬误。

当须要实现十分个性化的网页设计时，我会抉择重置的形式，因为我要写很多自定义的款式以满足设计需要，这时候就不再须要标准化的默认款式了。

请论述 Float 定位的工作原理。

浮动（float）是 CSS 定位属性。浮动元素从网页的失常流动中移出，然而放弃了局部的流动性，会影响其余元素的定位（比方文字会围绕着浮动元素）。这一点与相对定位不同，相对定位的元素齐全从文档流中脱离。

CSS 的 clear 属性通过应用 left、right、both，让该元素向下挪动（革除浮动）到浮动元素上面。

如果父元素只蕴含浮动元素，那么该父元素的高度将塌缩为 0。咱们能够通过革除（clear）从浮动元素后到父元素敞开前之间的浮动来修复这个问题。

有一种 hack 的办法，是自定义一个 .clearfix 类，利用伪元素选择器 ::after 革除浮动。另外还有一些办法，比方增加空的 <div></div> 和设置浮动元素父元素的 overflow 属性。与这些办法不同的是，clearfix 办法，只须要给父元素增加一个类，定义如下：

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

值得一提的是，把父元素属性设置为 overflow: auto 或 overflow: hidden，会使其外部的子元素造成块格式化上下文（Block Formatting Context），并且父元素会扩张本人，使其可能突围它的子元素。

请论述 z -index 属性，并阐明如何造成层叠上下文（stacking context）。

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

没有定义 z-index 的值时，元素依照它们呈现在 DOM 中的程序重叠（层级越低，呈现地位越靠上）。非动态定位的元素（及其子元素）将始终笼罩动态定位（static）的元素，而不论 HTML 层次结构如何。

层叠上下文是蕴含一组图层的元素。在一组层叠上下文中，其子元素的 z-index 值是绝对于该父元素而不是 document root 设置的。每个层叠上下文齐全独立于它的兄弟元素。如果元素 B 位于元素 A 之上，则即便元素 A 的子元素 C 具备比元素 B 更高的 z -index 值，元素 C 也永远不会在元素 B 之上.

每个层叠上下文是自蕴含的：当元素的内容产生层叠后，整个该元素将会在父层叠上下文中按程序进行层叠。多数 CSS 属性会触发一个新的层叠上下文，例如 opacity 小于 1，filter 不是 none，transform 不是 none。

每个层叠上下文是自蕴含的：当元素的内容产生层叠后，整个该元素将会在父层叠上下文中按程序进行层叠。多数 CSS 属性会触发一个新的层叠上下文，例如 opacity 小于 1，filter 不是 none，transform 不是 none。

请论述块格式化上下文（Block Formatting Context）及其工作原理。

块格局上下文（BFC）是 Web 页面的可视化 CSS 渲染的局部，是块级盒布局产生的区域，也是浮动元素与其余元素交互的区域。

一个 HTML 盒（Box）满足以下任意一条，会创立块格式化上下文：

• float 的值不是 none.
• position 的值不是 static 或 relative.
• display 的值是 table-cell、table-caption、inline-block、flex、或 inline-flex。
• overflow 的值不是 visible。

在 BFC 中，每个盒的左外边缘都与其蕴含的块的左边缘相接。

两个相邻的块级盒在垂直方向上的边距会产生合并（collapse）。

有哪些革除浮动的技术，都实用哪些状况？

• 空 div 办法：<div style=”clear:both;”></div>。
• Clearfix 办法：上文应用.clearfix 类曾经提到。
• overflow: auto 或 overflow: hidden 办法：上文曾经提到。

在大型项目中，我会应用 Clearfix 办法，在须要的中央应用 .clearfix。设置 overflow: hidden 的办法可能使其子元素显示不残缺，当子元素的高度大于父元素时。

请解释什么是精灵图（css sprites），以及如何实现？

精灵图，也称雪碧图。因常见碳酸饮料雪碧的英文名也是 Sprite，因而也有人会应用雪碧图的非正式译名。

精灵图是把多张图片整合到一张上的图片。它被使用在泛滥应用了很多小图标的网站上（Gmail 在应用）。实现办法：

1. 应用生成器将多张图片打包成一张精灵图，并为其生成适合的 CSS。
2. 每张图片都有相应的 CSS 类，该类定义了 background-image、background-position 和 background-size 属性。
3. 应用图片时，将相应的类增加到你的元素中。

益处：

• 缩小加载多张图片的 HTTP 申请数（一张精灵图只须要一个申请）。然而对于 HTTP2 而言，加载多张图片不再是问题。
• 提前加载资源，避免在须要时才在开始下载引发的问题，比方只呈现在:hover 伪类中的图片，不会呈现闪动。

如何解决不同浏览器的款式兼容性问题？

• 在确定问题起因和有问题的浏览器后，应用独自的样式表，仅供呈现问题的浏览器加载。这种办法须要应用服务器端渲染。
• 应用曾经解决好此类问题的库，比方 Bootstrap。
• 应用 autoprefixer 主动生成 CSS 属性前缀。
• 应用 Reset CSS 或 Normalize.css。

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

• 优雅的降级：为古代浏览器构建利用，同时确保它在旧版浏览器中失常运行。
• 渐进式加强：构建基于用户体验的利用，但在浏览器反对时增加新增性能。
• 利用 caniuse.com 查看个性反对。
• 应用 autoprefixer 主动生成 CSS 属性前缀。
• 应用 Modernizr 进行个性检测。

有什么不同的形式能够暗藏内容（使其仅实用于屏幕阅读器）？

这些办法与可拜访性（a11y）无关。

• width: 0; height: 0：使元素不占用屏幕上的任何空间，导致不显示它。
• position: absolute; left: -99999px：将它置于屏幕之外。
• text-indent: -9999px：这只实用于 block 元素中的文本。
• Metadata：例如通过应用 Schema.org，RDF 和 JSON-LD。
• WAI-ARIA：如何减少网页可拜访性的 W3C 技术规范。

即便 WAI-ARIA 是现实的解决方案，我也会采纳相对定位办法，因为它具备起码的注意事项，实用于大多数元素，而且应用起来非常简单。

你相熟制作 SVG 吗？

是的，你能够应用内联 CSS、嵌入式 CSS 局部或内部 CSS 文件对形态进行着色（包含指定对象上的属性）。在网上大部分 SVG 应用的是内联 CSS，不过每个类型都有长处和毛病。

通过设置 fill 和 stroke 属性，能够实现根本着色操作。fill 能够设置外部的色彩，stroke 能够设置四周绘制的线条的色彩。你能够应用与 HTML 中应用的 CSS 色彩命名计划雷同的 CSS 色彩命名计划：色彩名称（即 red）、RGB 值（即 rgb(255,0,0)）、十六进制值、RGBA 值等等。

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8"
/>

编写高效的 CSS 应该留神什么？

首先，浏览器从最左边的选择器，即要害选择器（key selector），向左顺次匹配。依据要害选择器，浏览器从 DOM 中筛选出元素，而后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。防止应用标签和通用选择器作为要害选择器，因为它们会匹配大量的元素，浏览器必须要进行大量的工作，去判断这些元素的父元素们是否匹配。

BEM (Block Element Modifier) 原则上倡议为独立的 CSS 类命名，并且在须要层级关系时，将关系也体现在命名中，这天然会使选择器高效且易于笼罩。

搞清楚哪些 CSS 属性会触发从新布局（reflow）、重绘（repaint）和合成（compositing）。在写款式时，防止触发从新布局的可能。

应用 CSS 预处理的优缺点别离是什么？

长处

• 进步 CSS 可维护性。
• 易于编写嵌套选择器。
• 引入变量，削减主题性能。能够在不同的我的项目中共享主题文件。
• 通过混合（Mixins）生成反复的 CSS。
• 将代码宰割成多个文件。不进行预处理的 CSS，尽管也能够宰割成多个文件，但须要建设多个 HTTP 申请加载这些文件。

毛病

• 须要预处理工具。
• 从新编译的工夫可能会很慢。

形容伪元素及其用处。

CSS 伪元素是增加到选择器的关键字，去抉择元素的特定局部。它们能够用于装璜（:first-line，:first-letter）或将元素增加到标记中（与 content:… 组合），而不用批改标记（:before，:after）。

• :first-line 和:first-letter 能够用来润饰文字。
• 下面提到的.clearfix 办法中，应用 clear: both 来增加不占空间的元素。
• 应用:before 和 after 展现提醒中的三角箭头。激励关注点拆散，因为三角被视为款式的一部分，而不是真正的 DOM。如果不应用额定的 HTML 元素，- 只用 CSS 款式绘制三角形是不太可能的。

说说你对盒模型的了解，以及如何告知浏览器应用不同的盒模型渲染布局。

CSS 盒模型形容了以文档树中的元素而生成的矩形框，并依据排版模式进行布局。每个盒子都有一个内容区域（例如文本，图像等）以及四周可选的 padding、border 和 margin 区域。

CSS 盒模型负责计算：

• 块级元素占用多少空间。
• 边框是否重叠，边距是否合并。
• 盒子的尺寸。

盒模型有以下规定：

• 块级元素的大小由 width、height、padding、border 和 margin 决定。
• 如果没有指定 height，则块级元素的高度等于其蕴含子元素的内容高度加上 padding（除非有浮动元素，请参阅下文）。
• 如果没有指定 width，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的 padding。
• 元素的 height 是由内容的 height 来计算的。
• 元素的 width 是由内容的 width 来计算的。
• 默认状况下，padding 和 border 不是元素 width 和 height 的组成部分。

* {box-sizing: border-box;} 会产生怎么的成果？

• 元素默认利用了 box-sizing: content-box，元素的宽高只会决定内容（content）的大小。
• box-sizing: border-box 扭转计算元素 width 和 height 的形式，border 和 padding 的大小也将计算在内。
• 元素的 height = 内容（content）的高度 + 垂直方向的 padding + 垂直方向 border 的宽度
• 元素的 width = 内容（content）的宽度 + 程度方向的 padding + 程度方向 border 的宽度

display 的属性值都有哪些？

none, block, inline, inline-block, table, table-row, table-cell, list-item.

inline 和 inline-block 有什么区别？

我把 block 也退出其中，为了取得更好的比拟。

relative、fixed、absolute 和 static 四种定位有什么区别？

通过定位的元素，其 position 属性值必然是 relative、absolute、fixed 或 sticky。

• static：默认定位属性值。该关键字指定元素应用失常的布局行为，即元素在文档惯例流中以后的布局地位。此时 top, right, bottom, left 和 z-index 属性有效。
• relative：该关键字下，元素先搁置在未增加定位时的地位，再在不扭转页面布局的前提下调整元素地位（因而会在此元素未增加定位时所在位置留下空白）。
• absolute：不为元素预留空间，通过指定元素绝对于最近的非 static 定位先人元素的偏移，来确定元素地位。相对定位的元素能够设置外边距（margins），且不会与其余边距合并。
• fixed：不为元素预留空间，而是通过指定元素绝对于屏幕视口（viewport）的地位来指定元素地位。元素的地位在屏幕滚动时不会扭转。打印时，元素会呈现在的每页的固定地位。fixed 属性会创立新的层叠上下文。当元素先人的 transform 属性非 none 时，容器由视口改为该先人。
• sticky：盒地位依据失常流计算 (这称为失常流动中的地位)，而后绝对于该元素在流中的 flow root（BFC）和 containing block（最近的块级先人元素）定位。在所有状况下（即使被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的地位仍依照 B 未定位时的地位来确定。position: sticky 对 table 元素的成果与 position: relative 雷同。

你理解 CSS Flexbox 和 Grid 吗？

理解。Flexbox 次要用于一维布局，而 Grid 则用于二维布局。

Flexbox 解决了 CSS 中的许多常见问题，例如容器中元素的垂直居中，粘性定位（sticky）的页脚等。Bootstrap 和 Bulma 基于 Flexbox，这是创立布局的举荐形式。我之前曾应用过 Flexbox，但在应用 flex-grow 时遇到了一些浏览器不兼容问题（Safari），我必须应用 inline-blocks 和手动计算百分比宽度，来重写我的代码，这种体验不是很好。

Grid 创立基于栅格的布局，是迄今为止最直观的办法（最好是！），但目前浏览器反对并不宽泛。

请解释在编写网站时，响应式与挪动优先的区别。

请留神，这两种办法不是互斥的。

使一个网站响应意味着网站会依据设施屏幕的尺寸会自行调整一些元素的尺寸和性能，通常是通过 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;}
}

挪动优先策略有 2 大劣势：

• 在挪动设施上有更好的性能，因为利用于它们的规定无需针对任何媒体查问的验证。
• 它让你强制编写与响应 CSS 规定相干的更洁净的代码。

响应式设计与自适应设计有何不同？

响应式设计和自适应设计都以进步不同设施间的用户体验为指标，依据视窗大小、分辨率、应用环境和管制形式等参数进行优化调整。

响应式设计的适应性准则：网站应该凭借一份代码，在各种设施上都有良好的显示和应用成果。响应式网站通过应用媒体查问，自适应栅格和响应式图片，基于多种因素进行变动，发明出低劣的用户体验。就像一个球通过收缩和膨胀，来适应不同大小的篮圈。

自适应设计更像是渐进式加强的古代解释。与响应式设计繁多地去适配不同，自适应设计通过检测设施和其余特色，从早已定义好的一系列视窗大小和其余个性中，选出最失当的性能和布局。与应用一个球去穿过各种的篮筐不同，自适应设计容许应用多个球，而后依据不同的篮筐大小，去抉择最合适的一个。

什么状况下，用 translate() 而不必相对定位？什么时候，状况相同。

translate() 是 transform 的一个值。扭转 transform 或 opacity 不会触发浏览器从新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而扭转相对定位会触发从新布局，进而触发重绘和复合。transform 使浏览器为元素创立一个 GPU 图层，但扭转相对定位会应用到 CPU。因而 translate() 更高效，能够缩短平滑动画的绘制工夫。

当应用 translate() 时，元素依然占据其原始空间（有点像 position：relative），这与扭转相对定位不同。