Web 前端 | 面试题 | 笔记

1. HTML 2. CSS

2.1 position 属性的值有哪些及其区别

position属性取值：static(默认)、relative、absolute、fixed、inherit、sticky。 float属性取值：none(默认)、left、right、inherit。 display属性取值：none、inline、inline-block、block、table相关属性值、inherit。 固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。（脱离文档流） 相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。 绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于 。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。（脱离文档流） 粘性定位 sticky： 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。 默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。

2.2 CSS 选择器及优先级

选择器 id选择器(#myid) 类选择器(.myclass) 属性选择器(a[rel="external"]) 伪类选择器(a:hover, li:nth-child) 标签选择器(div, h1,p) 相邻选择器（h1 + p） 子选择器(ul > li) 后代选择器(li a) 通配符选择器(*) 优先级： !important 内联样式（1000） ID选择器（0100） 类选择器/属性选择器/伪类选择器（0010） 元素选择器/伪元素选择器（0001） 关系选择器/通配符选择器（0000） 带!important 标记的样式属性优先级最高； 样式表的来源相同时： !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 选择器与元素的相关度越高，优先级越高，具体规则如下： 开发者定义选择器 > 用户定义选择器 > 浏览器默认选择器 内联样式（style=""） > 内（<style>）、外部样式（<link />） ID 选择器 > 类选择器、属性选择器、伪类选择器 > 类型选择器、伪元素选择器 相同优先级，书写顺序后 > 前 同级选择器，复合选择器 > 单选择器 自身的选择器 > 继承自父级的选择器 用户配置 !important 声明 > 开发者 !important 声明 > 其它

2.3 CSS 盒子模型

CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。 在标准的盒子模型中，width 指 content 部分的宽度。 在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度。 故在计算盒子的宽度时存在差异： 标准盒模型： 一个块的总宽度 = width+margin(左右)+padding(左右)+border(左右)

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

box-sizing属性 box-sizing 规定两个并排的带边框的框，语法为 box-sizing：content-box/border-box/inherit content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。【标准盒子模型】 border-box：为元素设定的宽度和高度决定了元素的边框盒。【IE 盒子模型】 inherit：继承父元素的 box-sizing 值。

2.4 BFC（块级格式上下文）

BFC的概念 BFC 是 Block Formatting Context的缩写，即块级格式化上下文。BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局， 并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。 BFC的原理布局规则 内部的Box会在垂直方向，一个接一个地放置 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反 BFC的区域不会与float box重叠 BFC是一个独立容器，容器里面的子元素不会影响到外面的元素 计算BFC的高度时，浮动元素也参与计算高度 元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。 如何创建BFC？ 根元素，即HTML元素 float的值不为none position为absolute或fixed display的值为inline-block、table-cell、table-caption overflow的值不为visible BFC的使用场景 去除边距重叠现象 清除浮动（让父元素的高度包含子浮动元素） 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 3. JavaScript

3.1 == 和 === 区别

== 和 === 区别 == 表示相等 （值相等） ===表示恒等（类型和值都要相等） js在比较的时候如果是 == 会先做 类型转换 ，再判断值得大小，如果是=== 类型 和 值 必须都相等。 == === 和 Object.is() 区别 == 相等，如果两边类型不一致，进行隐式转换后，再比较。+0 和 -0 相等， NaN 不等于任何数 === 严格相等，如果类型不一致，就不相等。 +0 和 -0 相等， NaN 不等于任何数 Object.is() 严格相等，+0 和 -0 不相等， NaN 等于自身

3.2 script 标签放在 head 里和放在 body 底部里有什么区别？

放在 head 中 你能看到 html 第一时间被加载进来，但页面 body 内容迟迟没有渲染出来。因为在等待 head 标签中 script 脚本的加载，3 秒后，整个页面渲染完成。 放在 body 底部 这次 html 内容第一时间渲染完成，随后等待 js 的加载。 总结： 脚本会阻塞页面的渲染，所以推荐将其放在 body 底部，因为当解析到 script 标签时，通常页面的大部分内容都已经渲染完成，让用户马上能看到一个非空白页面。 另外你能看到多个脚本之间都是异步向服务器请求，他们之间不互相依赖，最终只等待 3 秒，而非 3+3+3 秒。

3.3 JS 中的 8 种数据类型及区别

在JS中，我们已知有5种基本数据类型：String、Number、Boolean、Undefined、Null。 当ES6问世，新增基本数据类型：Symbol(ES6) BigInt(ES10) 一、Number类型： 专门保存数字的类型,可用于进行数学计算等的数值. 二、String类型: 专门用来保存字符串的类型;" ",用来存储字符串类型的文本. 三、Boolean类型: 专门用来保存真或者假的类型,值二选一,true or false 四、undefined类型: 只有一个值undefined,没有赋值的变量的默认值. 五、null类型: 不知向任何地址,手动赋值,清空内容等.... 六、object / Symbol Symbol在ES6中新定义，符号类型是唯一的并且不可修改。Symbol 指的是独一无二的值。

3.4 var, const, let 三者之间的区别

ES6之前创建变量用的是var,之后创建变量用的是let/const var 存在变量提升，而const和let不存在变量提升； let 不能重复定义 ； 关键字允许值的修改； const 不能重复定义 ； 关键字不允许的修改； 4. Vue.js 5. React.js 6. Others

6.1 GET 与 POST 的区别

1.针对数据操作的类型不同.GET对数据进行查询，POST主要对数据进行增删改！简单说，GET是只读，POST是写。 2.参数大小不同. GET请求在URL中传送的参数是有长度的限制，而POST没有限制 3.安全性不同. GET参数通过URL传递，会暴露，不安全；POST放在Request Body中，相对更安全 4.浏览器回退表现不同 GET在浏览器回退时是无害的，而POST会再次提交请求 5.浏览器对请求地址的处理不同 GET请求地址会被浏览器主动缓存，而POST不会，除非手动设置 6.浏览器对响应的处理不同GET请求参数会被完整的保留在浏览器历史记录里，而POST中的参数不会被保留 Q&A 补充 参考 感谢帮助！