前端面试的相关问题
一、说一说HTML语义化？
得分点 ：
语义化标签、利于页面内容结构化、利于无CSS页面可读、利于SEO、利于代码可读
标准回答：
HTML语义化就是指在使用HTML标签构建页面时，避免大篇幅的使用无语义的标签，比如`
、``，要求尽可能的使用具有语义的标签，比如``、``、
、``、等。 举例说明： 页面中有一个标题，可以用`标签实现标题
This is a top level heading
也可以使用span+CSS实现标题的样式 Is this a top level heading? 虽然这两种写法都会实现标题的样式，但是建议使用``标签实现。 使用HTML语义化标签的作用： - 易于用户阅读，样式文件未加载时，页面结构清晰。 - 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。 - 方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页。 - 有利于开发和维护，代码更具可读性，代码更好维护。 加分回答 HTML5语义化标签并没有广泛使用，比如京东、淘宝等，还是使用div元素，设置id是header或者footer，这个可能是因为HTML5新增的语义化标签的作用不是特别大，网站没有必要重写
二、说一说盒模型？
得分点
标准盒模型、怪异盒模型、box-sizing:border-box、盒模型大小
标准回答
CSS盒模型定义了盒的每个部分包含 margin, border, padding, content 。根据盒子大小的计算方式不同盒模型分成了两种，标准盒模型和怪异盒模型。 标准模型，给盒设置 width 和 height，实际设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小。 怪异盒模型，给盒设置 width 和 height，包含了padding和border ，设置的 width 和 height就是盒子实际的大小 默认情况下，盒模型都是标准盒模型 设置标准盒模型：box-sizing:content-box 设置怪异盒模型：box-sizing:border-box
三、说一下浮动？
得分点
脱离文档流、盒子塌陷、 影响其他元素排版、伪元素 、overflow:hidden 、标签插入法 、
标准回答
浮动的作用，设置浮动的图片，可以实现文字环绕图片，设置了浮动的块级元素可以排列在同一行，设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。 设置浮动元素的特点： -设置了浮动，该元素脱标。元素不占位置 -浮动可以进行模式转换（行内块元素） 浮动造成的影响，使盒子脱离文档流，如果父级盒子没有设置高度，需要被子盒子撑开，那么这时候父级盒子的高度就塌陷了，同时也会造成父级盒子后面的兄弟盒子布局受到影响。如果浮动元素后面还有其他兄弟元素，其他兄弟元素的布局也会受到影响。 清除浮动的方法： -伪元素清除浮动：给浮动元素父级增加 .clearfix::after { content: ''; display: table; clear: both; } /*兼容IE低版本 */ .clearfix { *zoom: 1; } overflow：hidden：给浮动元素父级增加overflow：hidden`属性 额外标签法：给浮动元素父级增加标签
加分回答
三种清除浮动的特点和影响 -伪元素清除浮动：不会新增标签，不会有其他影响，是当下清除浮动最流行的方法 -overflow：hidden：不会新增标签，但是如果父级元素有定位元素超出父级，超出部分会隐藏，在不涉及父级元素有超出内容的情况，overflow：hidden比较常用，毕竟写法方便简洁 -标签插入法：清除浮动的语法加在新增标签上，由于新增标签会造成不必要的渲染，所以这种方法目前不建议使用
四、说一说样式优先级的规则是什么？
得分点
!important、行内样式、嵌入样式、外链样式、id选择器、类选择器、标签选择器、复合选择器、通配符、继承样式
标准回答
CSS样式的优先级应该分成四大类 -第一类!important，无论引入方式是什么，选择器是什么，它的优先级都是最高的。 -第二类引入方式，行内样式的优先级要高于嵌入和外链，嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序，在后面插入的会覆盖前面的。 -第三类选择器，选择器优先级：id选择器>（类选择器 | 伪类选择器 | 属性选择器 ）> （后代选择器 | 伪元素选择器 ）> （子选择器 | 相邻选择器） > 通配符选择器 。 -第四类继承样式，是所有样式中优先级比较低的。 -第五类浏览器默认样式优先级最低。
加分回答
使用!important要谨慎 - 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important - 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important - 永远不要在你的插件中使用 !important - 永远不要在全站范围的 CSS 代码中使用 !important 优先级的比较指的是相同的样式属性，不同样式属性优先级比较失效，比如：在设置max-width时注意，已经给元素的max-width设置了!important但是还不生效，很有可能就是被width覆盖了 举例：div最终的宽度还是200px div { max-width: 400px !important; height: 200px;background-color: tomato; width: 200px; }
五、说一说CSS尺寸设置的单位
得分点
px、rem、em、vw、vh
标准回答
px：pixel像素的缩写，绝对长度单位，它的大小取决于屏幕的分辨率，是开发网页中常常使用的单位。 em：相对长度单位，在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width。如当前元素的字体尺寸未设置，由于字体大小可继承的原因，可逐级向上查找，最终找不到则相对于浏览器默认字体大小。 rem：相对长度单位，相对于根元素的字体大小，根元素字体大小未设置，使用浏览器默认字体大小。 vw：相对长度单位，相对于视窗宽度的1%。 vh：相对长度单位，相对于视窗高度的1%。 加分回答 rem应用：在移动端网页开发中，页面要做成响应式的，可使用rem配合媒体查询或者flexible.js实现。原理是通过媒体查询或者flexible.js，能够在屏幕尺寸发生改变时，重置html根元素的字体大小，页面中的元素都是使用rem为单位设置的尺寸，因此只要改变根元素字体大小，页面中的其他元素的尺寸就自动跟着修改 vw应用：由于vw被更多浏览器兼容之后，在做移动端响应式页面时，通常使用vw配合rem。原理是使用vw设置根元素html字体的大小，当窗口大小发生改变，vw代表的尺寸随着修改，无需加入媒体查询和flexible.js，页面中的其他元素仍使用rem为单位，就可实现响应式。
六、说一说BFC
得分点
块级格式化上下文、独立的渲染区域、不会影响边界以外的元素、形成BFC条件、float、position、overflow、display
标准回答
BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。 BFC布局规则 -内部盒子会在垂直方向，一个接一个地放置。 -Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 -每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 -BFC的区域不会与float box重叠。 -BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 -计算BFC的高度时，浮动元素也参与计算。 BFC形成的条件 -float 设置成 left 或 right -position 是absolute或者fixed -overflow 不是visible，为 auto、scroll、hidden -display是flex或者inline-block 等 BFC解决能的问题：清除浮动 加分回答 BFC的方式都能清除浮动，但是常使用的清除浮动的BFC方式只有overflow:hidden,原因是使用float或者position方式清除浮动，虽然父级盒子内部浮动被清除了，但是父级本身又脱离文档流了，会对父级后面的兄弟盒子的布局造成影响。如果设置父级为display:flex，内部的浮动就会失效。所以通常只是用overflow: hidden清除浮动。 IFC（Inline formatting contexts）：内联格式上下文。IFC的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)，IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。 GFC（GrideLayout formatting contexts）：网格布局格式化上下文。当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域。 FFC（Flex formatting contexts）：自适应格式上下文。display值为flex或者inline-flex的元素将会生成自适应容器。
七、说几个未知宽高元素水平垂直居中方法
得分点
position transform flex justify-content align-items vertical-align text-align
标准回答
未知宽高元素水平垂直都居中的实现方法：
-
设置元素相对父级定位
position:absolute;left:50%;right:50%，让自身平移自身高度50%transform: translate(-50%,-50%);，这种方式兼容性好，被广泛使用的一种方式 -
设置元素的父级为弹性盒子
display:flex，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center，这种方式代码简洁，但是兼容性ie 11以上支持，由于目前ie版本都已经很高，很多网站现在也使用这种方式实现水平垂直居中 -
设置元素的父级为网格元素
display: grid，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center，这种方式代码简介，但是兼容性ie 10以上支持 -
设置元素的父级为表格元素
display: table-cell，其内部元素水平垂直都居中text-align: center;vertical-align: middle;，设置子元素为行内块display: inline-block;，这种方式兼容性较好
加分回答
京东的移动端顶部京东logo，使用的是display:flex这种模式
八、说一说三栏布局的实现方案
得分点
圣杯布局、双飞翼布局、三栏高度不定、中间栏内容多先渲染
标准回答
三栏布局，要求左右两边盒子宽度固定，中间盒子宽度自适应，盒子的高度都是随内容撑高的，一般都是中间盒子内容较多，为了保证页面渲染快，在写结构的时候，需要把中间盒子放在左右盒子的前面。 实现三栏布局的方法通常是圣杯布局和双飞翼布局。 圣杯布局的实现方案：三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面，父级盒子设置左右padding，三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开 双飞翼布局的实现方案：三个盒子对应三个元素，其中中间盒子套了两层，中间盒子内部盒子设置margin,三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开
加分回答
圣杯布局: - 优点：不需要添加dom节点 - 缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，当middle部分的宽小于left部分时就会发生布局混乱。 双飞翼布局： - 优点：不会像圣杯布局那样变形，CSS样式代码更简洁 - 缺点：多加了一层dom节点
九、说一说JS数据类型有哪些,区别是什么？
得分点
Number、String、Boolean、BigInt、Symbol、Null、Undefined、Object、8种
标准回答
JS数据类型分为两类：一类是基本数据类型，也叫简单数据类型，包含7种类型，分别是Number 、String、Boolean、BigInt、Symbol、Null、Undefined。另一类是引用数据类型也叫复杂数据类型，通常用Object代表，普通对象，数组，正则，日期，Math数学函数都属于Object。
数据分成两大类的本质区别：基本数据类型和引用数据类型它们在内存中的存储方式不同。
基本数据类型是直接存储在栈中的简单数据段，占据空间小，属于被频繁使用的数据。
引用数据类型是存储在堆内存中，占据空间大。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，当解释器寻找引用值时，会检索其在栈中的地址，取得地址后从堆中获得实体。
加分回答
Symbol是ES6新出的一种数据类型，这种数据类型的特点就是没有重复的数据，可以作为object的key。
数据的创建方法Symbol()，因为它的构造函数不够完整，所以不能使用new Symbol()创建数据。由于Symbol()创建数据具有唯一性，所以 Symbol() !== Symbol(), 同时使用Symbol数据作为key不能使用for获取到这个key，需要使用Object.getOwnPropertySymbols(obj)获得这个obj对象中key类型是Symbol的key值。
let key = Symbol('key');
let obj = { [key]: 'symbol'};
let keyArray = Object.getOwnPropertySymbols(obj); // 返回一个数组[Symbol('key')]
obj[keyArray[0]] // 'symbol'
BigInt也是ES6新出的一种数据类型，这种数据类型的特点就是数据涵盖的范围大，能够解决超出普通数据类型范围报错的问题。
使用方法：
-整数末尾直接+n：647326483767797n
-调用BigInt()构造函数：BigInt("647326483767797")
注意：BigInt和Number之间不能进行混合操作
十、说一说null 和 undefined 的区别，如何让一个属性变为null
得分点
操作的变量没有被赋值、全局对象的一个属性、函数没有return返回值、值 null 特指对象的值未设置 undefined == null、undefined !== null
标准回答
undefind 是全局对象的一个属性，当一个变量没有被赋值或者一个函数没有返回值或者某个对象不存在某个属性却去访问或者函数定义了形参但没有传递实参，这时候都是undefined。undefined通过typeof判断类型是'undefined'。undefined == undefined undefined === undefined 。 null代表对象的值未设置，相当于一个对象没有设置指针地址就是null。null通过typeof判断类型是'object'。null === null null == null null == undefined null !== undefined undefined 表示一个变量初始状态值，而 null 则表示一个变量被人为的设置为空对象，而不是原始状态。在实际使用过程中，不需要对一个变量显式的赋值 undefined，当需要释放一个对象时，直接赋值为 null 即可。 让一个变量为null，直接给该变量赋值为null即可。
加分回答
null 其实属于自己的类型 Null，而不属于Object类型，typeof 之所以会判定为 Object 类型，是因为JavaScript 数据类型在底层都是以二进制的形式表示的，二进制的前三位为 0 会被 typeof 判断为对象类型，而 null 的二进制位恰好都是 0 ，因此，null 被误判断为 Object 类型。 对象被赋值了null 以后，对象对应的堆内存中的值就是游离状态了，GC 会择机回收该值并释放内存。因此，需要释放某个对象，就将变量设置为 null，即表示该对象已经被清空，目前无效状态。
