[面试题]关于CSS,你了解多少?

时间 2019-11-07

原文原文链接

导读

都说金九银十是一个面试的好季节，最近在GitHub上看到了一些关于前端的面试题，也比较基础，在这里整理了一下，由于内容较多，在这里分为HTML、CSS、JavaScript三篇，但愿能够对你们有所帮助，趁着“好季节”，找到本身心仪的工做,固然也包括我本身在内，你们一块儿加油哈！css

由于掘金的某条沸点，在这里先说明一下，本篇文章适合目前正在找工做或者以为本身的基础不太扎实的小伙伴，大神就跳过吧O(∩_∩)O。前端

转发自 github.com/yangshun/fr…node

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

浏览器经过优先级规则，判断元素展现哪些样式。优先级经过 4 个维度指标肯定，咱们假定以a、b、c、d命名，分别表明如下含义：git

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。github

当出现优先级相等的状况时，最晚出现的样式规则会被采纳。若是你在样式表里写了相同的规则（不管是在该文件内部仍是其它样式文件中），那么最后出现的（在文件底部的）样式优先级更高，所以会被采纳。面试

在写样式时，我会使用较低的优先级，这样这些样式能够轻易地覆盖掉。尤为对写 UI 组件的时候更为重要，这样使用者就不须要经过很是复杂的优先级规则或使用!important的方式，去覆盖组件的样式了。浏览器

2.重置（resetting）CSS 和标准化（normalizing）CSS 的区别是什么？你会选择哪一种方式，为何？

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

当须要实现很是个性化的网页设计时，我会选择重置的方式，由于我要写不少自定义的样式以知足设计需求，这时候就再也不须要标准化的默认样式了。参考服务器

3.请阐述Float定位的工做原理。

浮动（float）是 CSS 定位属性。浮动元素从网页的正常流动中移出，可是保持了部分的流动性，会影响其余元素的定位（好比文字会围绕着浮动元素）。这一点与绝对定位不一样，绝对定位的元素彻底从文档流中脱离。框架

CSS 的clear属性经过使用left、right、both，让该元素向下移动（清除浮动）到浮动元素下面。

若是父元素只包含浮动元素，那么该父元素的高度将塌缩为 0。咱们能够经过清除（clear）从浮动元素后到父元素关闭前之间的浮动来修复这个问题。

有一种 hack 的方法，是自定义一个.clearfix类，利用伪元素选择器::after清除浮动。另外还有一些方法，好比添加空的

和设置浮动元素父元素的overflow属性。与这些方法不一样的是，clearfix方法，只须要给父元素添加一个类，定义以下：

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

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

4.请阐述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。

5.请阐述块格式化上下文（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）。更多内容请参考边距合并（margin collapsing）。

6.有哪些清除浮动的技术，都适用哪些状况？

空div方法：<div style="clear:both;"></div>。
Clearfix 方法：上文使用.clearfix类已经提到。
overflow: auto或overflow: hidden方法：上文已经提到。
复制代码

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

7.请解释什么是雪碧图（css sprites），以及如何实现？

雪碧图是把多张图片整合到一张上的图片。它被运用在众多使用了不少小图标的网站上（Gmail 在使用）。实现方法：

使用生成器将多张图片打包成一张雪碧图，并为其生成合适的 CSS。
每张图片都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。
使用图片时，将相应的类添加到你的元素中。
复制代码

好处：

减小加载多张图片的 HTTP 请求数（一张雪碧图只须要一个请求）。可是对于 HTTP2 而言，加载多张图片再也不是问题。
提早加载资源，防止在须要时才在开始下载引起的问题，好比只出如今:hover伪类中的图片，不会出现闪烁。
复制代码

8.如何解决不一样浏览器的样式兼容性问题？

在肯定问题缘由和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法须要使用服务器端渲染。
使用已经处理好此类问题的库，好比 Bootstrap。
使用 autoprefixer 自动生成 CSS 属性前缀。
使用 Reset CSS 或 Normalize.css。
复制代码

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

优雅的降级：为现代浏览器构建应用，同时确保它在旧版浏览器中正常运行。
渐进式加强：构建基于用户体验的应用，但在浏览器支持时添加新增功能。
利用 caniuse.com 检查特性支持。
使用 autoprefixer 自动生成 CSS 属性前缀。
使用 Modernizr进行特性检测。
复制代码

10.有什么不一样的方式能够隐藏内容（使其仅适用于屏幕阅读器）？

这些方法与可访问性（a11y）有关。

visibility: hidden：元素仍然在页面流中，并占用空间。
width: 0; height: 0：使元素不占用屏幕上的任何空间，致使不显示它。
position: absolute; left: -99999px： 将它置于屏幕以外。
text-indent: -9999px：这只适用于block元素中的文本。
Metadata： 例如经过使用 Schema.org，RDF 和 JSON-LD。
WAI-ARIA：如何增长网页可访问性的 W3C 技术规范。
复制代码

即便 WAI-ARIA 是理想的解决方案，我也会采用绝对定位方法，由于它具备最少的注意事项，适用于大多数元素，并且使用起来很是简单。参考

https://www.w3.org/TR/wai-aria-1.1/
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
http://a11yproject.com/
复制代码

11.你使用过栅格系统吗？偏心哪个？

我使用 float-based 栅格系统，由于它相比 flex、grid 系统，拥有更多浏览器的支持。它已经在 Bootstrap 中使用多年，而且已经被证实是可行的。

12你是否使用过媒体查询或移动优先的布局？

是的，一个例子就是根据窗口的尺寸改变导航的样式。

13.你熟悉制做 SVG 吗？

是的，你可使用内联CSS、嵌入式CSS部分或外部CSS文件对形状进行着色（包括指定对象上的属性）。在网上大部分SVG使用的是内联CSS，不过每一个类型都有优势和缺点。

经过设置fill和stroke属性，能够完成基本着色操做。fill能够设置内部的颜色，stroke能够设置周围绘制的线条的颜色。你可使用与HTML中使用的CSS颜色命名方案相同的CSS颜色命名方案：颜色名称（即red）、RGB值（即rgb(255,0,0)）、十六进制值、RGBA值等等。

14.编写高效的 CSS 应该注意什么？

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

BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override. BEM (Block Element Modifier)原则上建议为独立的 CSS 类命名，而且在须要层级关系时，将关系也体如今命名中，这天然会使选择器高效且易于覆盖。

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

15.使用 CSS 预处理的优缺点分别是什么？

优势：

提升 CSS 可维护性。
易于编写嵌套选择器。
引入变量，增添主题功能。能够在不一样的项目中共享主题文件。
经过混合（Mixins）生成重复的 CSS。
Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.
将代码分割成多个文件。不进行预处理的 CSS，虽然也能够分割成多个文件，但须要创建多个 HTTP 请求加载这些文件。
复制代码

缺点：

须要预处理工具。
复制代码

16.对于你使用过的 CSS 预处理，说说喜欢和不喜欢的地方？

喜欢：

绝大部分优势上题以及提过。
Less 用 JavaScript 实现，与 NodeJS 高度结合。
复制代码

不喜欢:

我经过node-sass使用 Sass，它用 C ++ 编写的 LibSass 绑定。在 Node 版本切换时，我必须常常从新编译。
Less 中，变量名称以@做为前缀，容易与 CSS 关键字混淆，如@media、@import和@font-face。
复制代码

17.如何实现一个使用非标准字体的网页设计？

使用@font-face并为不一样的font-weight定义font-family。

18.解释浏览器如何肯定哪些元素与 CSS 选择器匹配。

这部分与上面关于编写高效的 CSS 有关。浏览器从最右边的选择器（关键选择器）根据关键选择器，浏览器从 DOM 中筛选出元素，而后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。

例如，对于形如p span的选择器，浏览器首先找到全部元素，并遍历它的父元素直到根元素以找到

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

，就知道'`已经匹配并中止继续匹配。

19.描述伪元素及其用途。

CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分。它们能够用于装饰（:first-line，:first-letter）或将元素添加到标记中（与 content:...组合），而没必要修改标记（:before，:after）。

:first-line和:first-letter能够用来修饰文字。
上面提到的.clearfix方法中，使用clear: both来添加不占空间的元素。
使用:before和after展现提示中的三角箭头。鼓励关注点分离，由于三角被视为样式的一部分，而不是真正的 DOM。若是不使用额外的 HTML 元素，只用 CSS 样式绘制三角形是不太可能的。
复制代码

20.说说你对盒模型的理解，以及如何告知浏览器使用不一样的盒模型渲染布局。

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

CSS 盒模型负责计算：

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

盒模型有如下规则：

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

21.* { 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的宽度
复制代码

22.display的属性值都有哪些？

none, block, inline, inline-block, table, table-row, table-cell, list-item.
复制代码

23.inline和inline-block有什么区别？

	block	inline-block	inline
大小	填充其父容器的宽度。	取决于内容。	取决于内容。
定位	重新的一行开始，而且不容许旁边有 HTML 元素（除非是float）	与其余内容一块儿流动，并容许旁边有其余元素。	与其余内容一块儿流动，并容许旁边有其余元素。
可否设置width和height	能	能	不能。
可使用vertical-align对齐	不能够	能够	能够
边距（margin）和填充（padding）	各个方向都存在	各个方向都存在
浮动（float）	-	-	就像一个block元素，能够设置垂直边距和填充。

24.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 相同。
复制代码

25.你使用过哪些现有的 CSS 框架？你是如何改进它们的？

Bootstrap： 更新周期缓慢。Bootstrap 4 已经处于 alpha 版本将近两年了。添加了在页面中普遍使用的微调按钮组件。
Semantic UI：源代码结构使得自定义主题很难理解。很是规主题系统的使用体验不好。外部库的路径须要硬编码（hard code）配置。变量从新赋值没有 Bootstrap 设计得好。
Bulma： 须要不少非语义的类和标记，显得不少余。不向后兼容，以致于升级版本后，会破坏应用的正常运行。
复制代码

26.你了解 CSS Flexbox 和 Grid 吗？

了解。Flexbox 主要用于一维布局，而 Grid 则用于二维布局。

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

Grid 建立基于栅格的布局，是迄今为止最直观的方法（最好是！），但目前浏览器支持并不普遍。

27.响应式设计与自适应设计有何不一样？

响应式设计和自适应设计都以提升不一样设备间的用户体验为目标，根据视窗大小、分辨率、使用环境和控制方式等参数进行优化调整。

响应式设计的适应性原则：网站应该凭借一份代码，在各类设备上都有良好的显示和使用效果。响应式网站经过使用媒体查询，自适应栅格和响应式图片，基于多种因素进行变化，创造出优良的用户体验。就像一个球经过膨胀和收缩，来适应不一样大小的篮圈。

自适应设计更像是渐进式加强的现代解释。与响应式设计单一地去适配不一样，自适应设计经过检测设备和其余特征，从早已定义好的一系列视窗大小和其余特性中，选出最恰当的功能和布局。与使用一个球去穿过各类的篮筐不一样，自适应设计容许使用多个球，而后根据不一样的篮筐大小，去选择最合适的一个。

28.什么状况下，用translate()而不用绝对定位？何时，状况相反。

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

当使用translate()时，元素仍然占据其原始空间（有点像position：relative），这与改变绝对定位不一样。

文中若有错误，欢迎在评论区指正，若是这篇文章帮助到了你，欢迎点赞👍和关注，😀。