前言

【精简版】前端面试知识点（HTML/CSS/JavaScript/TypeScript），精简前端各个模块的知识点，方便熟记

HTML

1. html5语义化

概念：指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

优点：

对机器友好，有利于SEO（搜索引擎优化）
对开发者友好，增强可读性，结构更加清晰，便于团队的开发与维护

常见语义化标签：header、nav、section、main、article、aside、footer

2. src 和 href

共同点：都是用来引用外部的资源

区别：

src：表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。
href：表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。常用在a、link等标签上。

3. DOCTYPE（文档类型）

它是HTML5中一种标准通用标记语言的文档类型声明，必须声明在HTML⽂档的第⼀⾏

目的：告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档

浏览器渲染模式：

CSS1Compat：标准模式（Strick mode）
BackCompat：怪异模式(混杂模式)(Quick mode)

4. 行内元素、块级元素、空(void)元素

(1) 块级元素

常见块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

特点:

自己独占一行
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的 100%
是一个容器及盒子，里面可以放行内或者块级元素。注意：p 标签里面不能放块级元素

(2) 行内元素

常见行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
只可以设置水平方向的外边距
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素

(3) 空元素

即没有内容的HTML元素，没有闭合标签

常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
鲜见的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

5. iframe 优缺点

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

优点：

用来加载速度较慢的内容（如广告）
可以使脚本可以并行下载
可以实现跨子域通信

缺点：

iframe 会阻塞主页面的 onload 事件
无法被一些搜索引擎索识别
会产生很多页面，不容易管理

6. Canvas 和 SVG 的区别

（1）SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

其特点如下：

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

（2）Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

其特点如下：

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

CSS

1. CSS选择器

选择器

选择器	格式	优先级权重
id选择器	#id	100
类选择器	#classname	10
属性选择器	a[ref=“eee”]	10
伪类选择器	li:last-child	10
标签选择器	div	1
伪元素选择器	li:after	1
相邻兄弟选择器	h1+p	0
子选择器	ul>li	0
后代选择器	li a	0
通配符选择器	*	0

选择器的优先级：

标签选择器、伪元素选择器：1
类选择器、伪类选择器、属性选择器：10
id 选择器：100
内联样式：1000

注意：

!important声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
带!important 标记的样式属性优先级最高；样式表的来源相同时：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

2. 隐藏元素的方法

display: none 渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility: hidden 元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity: 0 将元素的透明度设置为 0，元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute 通过使用绝对定位将元素移除可视区域内
z-index: 负值 来使其他元素遮盖住该元素，
clip/clip-path 使用元素裁剪的方法，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
transform: scale(0,0) 将元素缩放为 0，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

display:none 与 visibility:hidden的区别

(1) 在渲染树中

display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；
visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。

(2) 是否是继承属性

display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；

（3）修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；

（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。

display 有哪些属性

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素
table	此元素会作为块级表格来显示，表格前后带有换行符。
inherit	规定应该从父元素继承 display 属性的值。
flex	弹性盒模型。
grid	网格布局。

3. CSS 盒子模型

CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。
在标准的盒子模型中，width 指 content 部分的宽度。
在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度。

故在计算盒子的宽度时存在差异：

标准盒模型： 一个块的总宽度 = width+margin(左右)+padding(左右)+border(左右)

怪异盒模型： 一个块的总宽度 = width+margin（左右）（既 width 已经包含了 padding 和 border 值）

4. 水平和垂直居中

水平居中：

对于行内元素 : text-align: center;
对于确定宽度的块级元素：
- width和margin实现。margin: 0 auto;
- 绝对定位和margin-left: (父width - 子width）/2, 前提是父元素position: relative
对于宽度未知的块级元素
- 使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。
- inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。
- 绝对定位+transform，translateX可以移动本身元素的50%。
- flex布局使用 justify-content:center

垂直居中

利用 line-height 实现居中，适合纯文字类
通过设置父容器相对定位，子级设置 绝对定位，标签通过margin实现自适应居中
弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中
父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现
table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

BFC（块格式化上下文）

概念：BFC（Block Formatting Context）是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局，并且这个区域的子元素不会影响到外面的元素。

原理布局规则

内部的Box会在垂直方向，一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反
BFC的区域不会与float box重叠
BFC是一个独立容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，浮动元素也参与计算高度
元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

创建条件：

根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex等；
overflow 值为：hidden、auto、scroll；

特点：

垂直方向自上而下排列，和文档流的排列方式一致。
在BFC中上下相邻的两个容器的margin会重叠
计算BFC的高度时，需要计算浮动元素的高度
BFC区域不会与浮动的容器发生重叠
BFC是独立的容器，容器内部元素不会影响外部元素
每个元素的左margin值和容器的左border相接触

作用：

解决margin的重叠问题
解决高度塌陷的问题：常给父元素设置overflow:hidden
创建自适应两栏布局

左侧float:left，右侧overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。

避免多列布局由于宽度计算四舍五入而自动换行

white-space属性

在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示，取值有：

normal：默认，忽略文本中所有的空白、换行符；只有文本存在
或文本达到框的约束时，文本才会换行
nowrap：和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有 br 时才会换行
pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在
或文本中有换行符时，文本才会换行
pre-wrap：和pre类似，保留文本中的空白、换行符；文本存在
或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行
pre-line：会略文本中的空白符；文本存在
或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行

margin重叠问题

问题描述：两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这就是外边距折叠

注意：浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。

计算原则：

两者正取大
一正一负，取正减负的绝对值
两负，用0减去两个中绝对值最大的

解决办法：

兄弟之间：底部元素变为行内盒子、设置浮动、position值为absolute/fixed
父子之间：
- 父元素加入overflow: hidden、添加透明边框：border:1px solid transparent;
- 子元素变为行内盒子display: inline-block、加入浮动属性或定位

回流和重绘

回流必将引起重绘，重绘不一定会引起回流

回流(Reflow)

概念：当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程。

会导致回流的操作：

页面首次渲染
浏览器窗口大小发生改变
元素尺寸或位置、字体大小变化、内容变化（文字数量或图片大小等等）发生改变
添加或者删除可见的DOM元素
激活CSS伪类（例如：:hover）
查询某些属性或调用某些方法

重绘 (Repaint)

概念：当页面中元素样式（背景、颜色）的改变并不影响它在文档流中的位置时，浏览器会将新样式赋予给元素并重新绘制它。

性能影响

回流比重绘的代价要更高，有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。

现代浏览器会对频繁的回流或重绘操作进行优化：浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。

如何避免

CSS：

避免使用table布局。
尽可能在DOM树的最末端改变class。
避免设置多层内联样式。
将动画效果应用到position属性为absolute或fixed的元素上。
避免使用CSS表达式（例如：calc()）。

JavaScript：

避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

相关链接：juejin.cn/post/684490…

页面布局

常见的CSS布局单位

常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。

（1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：

CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。

（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

（3）em和rem相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。

em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。
rem： rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。

（4）vw/vh是与视图窗口有关的单位

vw/vh 和百分比很类似，两者的区别：

百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
vw/vm：相对于视窗的尺寸

px、em、rem的区别及使用场景

三者的区别：

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。

使用场景：

对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可。
对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。

两栏布局的实现

左边一栏宽度固定，右边一栏宽度自适应，实现方法：

利用浮动，左侧固定宽度且设置左浮动，将右边元素的margin-left设置为左侧，宽度设置为auto（默认为auto，撑满整个父元素）。
利用浮动，左侧固定宽度且设置左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。
利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。
利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。
利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

三栏布局的实现

左右两栏宽度固定，中间自适应的布局，实现方法：

利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。
利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。
利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后
圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。
双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

Flex，弹性布局

Flex（Flexible Box）用来为盒状模型提供最大的灵活性。指定容器 display: flex 即可。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列。

容器的属性：

flex-direction：决定主轴的方向（即子 item 的排列方法）
- row | row-reverse | column | column-reverse
flex-wrap：决定换行规则
- nowrap|wrap|wrap-reverse;
flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式，默认值为row nowrap
justify-content：定义了项目在主轴上的对齐方式
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items：定义项目在交叉轴上如何对齐
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。

项目的属性：

order：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
flex-grow：定义项目的放大比例，默认为0。即如果存在空间，也不会放大
flex-shrink：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个 item 的 flow-shrink 为 0，则为不缩小
flex-basis：定义了在分配多余的空间，项目占据的空间。
flex:1 是 flex-grow、flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
flex-shrink：默认为1，只能是正整数。即父元素空间不足则按比例收缩。如果为 0，则不收缩
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items，默认属性为 auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

Rem 布局

首先 Rem 相对于根(html)的 font-size 大小来计算。简单的说它就是一个相对单例如:font-size:10px;,那么（1rem = 10px）了解计算原理后首先解决怎么在不同设备上设置 html 的 font-size 大小。其实 rem 布局的本质是等比缩放，一般是基于宽度。

优点：可以快速适用移动端布局，字体，图片高度

缺点： ①目前 ie 不支持，对 pc 页面来讲使用次数不多；
②数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；
③在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。

响应式布局

概念：指的是同一页面在不同屏幕尺寸下有不同的布局

优点：一套代码兼容web端、平板、以及手机端网页

缺点：工作量大、UI设计也需要多个版本

场景：同时兼容多种不同设备

实现方案：

媒体查询
百分比布局
rem布局
视口单位vw/vh

rem布局

本质：等比缩放，一般是基于宽度

视口单位

css3新增，vw/vh是与视图窗口有关的单位

vw：相对于视窗的宽度，视窗宽度是100vw；
vh：相对于视窗的高度，视窗高度是100vh；
vmin：vw和vh中的较小值；
vmax：vw和vh中的较大值；

定位与浮动

为什么需要清除浮动？清除浮动的方式

浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

浮动的工作原理：

浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
浮动元素碰到包含它的边框或者其他浮动元素的边框停留

浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

浮动元素引起的问题？

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除浮动的方式如下：

给父级div定义height属性
最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**

sass 和 less

sass

特点：

兼容所有版本的css
专业CSS扩展语言
使用变量
嵌套CSS规则
导入SASS文件
静默注释
混合器
使用选择器继承来精简CSS

less

特点：

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。

区别

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css；Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。
变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。
输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

【精简版】前端面试知识点（HTML/CSS）

前言