1.说说HTML语义化？

得分点：语义化标签、利于页面内容结构化、利于无CSS页面可读、利于SEO、利于代码可读

1，标签语义化是指在开发时尽可能使用有语义的标签，比如header，footer，h，p，少使用无语义如div。

2，标签语义化的好处有三点，首先对开发者来说，能够提高代码可读性，利于前期开发以及后期维护；对于用户来说，在样式表没有加载出来时，整个页面结构依旧清晰，给用户一个不错的体验感；对搜索引擎来说，利于爬虫读取有用的信息，提升网页排名。

3，目前语义化并没有得到广泛应用，如京东，淘宝官网依旧采用大量无语义标签。原因是语义化带来的好处不足以其耗费人力物力去重写网站。

2.说说盒模型？

得分点 标准盒模型、怪异盒模型、`box-sizing:border-box`、盒模型大小

1，CSS盒模型本质是一个盒子，包含 padding、border、margin、content。盒模型分为两类，W3C标准盒模型和IE怪异盒模型，一般我们的盒子默认是标准盒模型。

2，两者区别是标准盒模型的实际宽高会把padding和border计算在内，而怪异盒模型不会。

3，形成怪异盒模型的条件是box-sizing:border-box；形成标准盒模型的条件box-sizing:content-box。

3.说一下浮动？

得分点 脱离文档流、盒子塌陷、 影响其他元素排版、伪元素 、`overflow:hidden` 、标签插入法

1. 浮动的作用：设置浮动的图片，可以实现文字环绕图片，设置了浮动的块级元素可以排列在同一行，设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。

2. 浮动特点： 脱离文档流，盒子塌陷，影响其他元素排版

3. 解决塌陷：
（1）额外标签法（隔墙法）：在最后一个浮动标签后添加一个标签，给其设置clear:both，如果清除了浮动父元素自动检测盒子最高的高度，然后与其同高。

（2）父元素添加overflow属性，overflow: hidden。

（3）父级添加after伪元素（推荐做法）。

（4）父级添加before和after双伪元素。 

4. 清除浮动的特点：

4. 样式优先级的规则是什么？

得分点 `!important`、行内样式、嵌入样式、外链样式、id选择器、类选择器、标签选择器、复合选择器、通配符、继承样式

1.!important、 2.行内样式>（嵌入样式、外链样式）、 3.id选择器（#id{}） >（类选择器（.class{}）、伪类选择器（ :hover{}）、属性选择器（a[href="segmentfault.com"]{}））>（后代选择器（.father .child{}）、伪元素选择器（ ::before{}））>（子选择器（.father > .child{}）、相邻选择器（ .bro1 + .bro2{}））>通配符选择器（*{}）、 4.继承样式、 5.浏览器默认样式 

5. 说一说CSS尺寸设置的单位？

得分点 px、rem、em、vw、vh

（1）css一共有五个长度单位，分别是px，em，rem，vw，vh

（2）除了px是绝对单位，其他都是相对单位。

（3）em相对于自身大小（但在font-size中相对于父元素字体大小）

（4）rem相对于根元素的字体大小

（5）vw相对于可视化窗口的宽（1vw就是1%可视化窗口宽度）

（6）vh相对于可视化窗口的高（1vh就是1%可视化窗口高度）

（7）一般采用rem+媒体查询或者rem+vw来实现响应式布局。原理是当窗口大小发生变化时，通过媒体查询或者vw改变根元素的字体大小，从而改变以rem为单位的元素大小

6.说一说BFC

得分点 块级格式化上下文、独立的渲染区域、不会影响边界以外的元素、形成BFC条件、float、position、overflow、display

1.定义：块级格式化上下文，独立渲染区域，不会影响边界外的元素

2.形成条件：

(1) float属性不为none

(2) position为absolute或fixed

(3) display为inline-block、table-cell、table-caption、flex、inline-flex

(4) overflow不为visible

3.布局规则：

(1) 区域内容box从上到下排列

(2) box垂直方向的距离由margin决定

(3) 同一个BFC内 box的margin会重叠

(4) BFC不会与float元素重叠

(5) BFC计算高度也会计算float元素

4.解决的问题：

(1) 解决浮动元素重叠问题

(2) 解决父元素高度塌陷问题

(3) 解决margin重叠问题

7.说几个未知宽高元素水平垂直居中方法

得分点:`position` `transform` `flex` `justify-content` `align-items` `vertical-align` `text-align`

1. 设置元素相对父级定位`position:absolute;left:50%;top:50%`，让自身平移自身高度50% `transform: translate(-50%,-50%);`，这种方式兼容性好，被广泛使用的一种方式

2. 设置元素的父级为弹性盒子`display:flex`，设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center` ，这种方式代码简洁，但是兼容性ie 11以上支持

3. 设置元素的父级为网格元素`display: grid`，设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center` ，这种方式代码简介，但是兼容性ie 10以上支持

4. 设置元素的父级为表格元素`display: table-cell`，其内部元素水平垂直都居中`text-align: center;vertical-align: middle;` ，设置子元素为行内块`display: inline-block; `，这种方式兼容性较好

8.说一说三栏布局的实现方案

得分点 圣杯布局、双飞翼布局、三栏高度不定、中间栏内容多先渲染

概念：三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。 这里以左边宽度固定为100px，右边宽度固定为200px为例。

实现方案：

（1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

（2）利用flex布局的方式，左右两栏的宽度分别设置为100px和200px，中间一栏增长系数设置为1

（3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。

（4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。圣杯布局中间列的宽度不能小于左边列的宽度，否则左边列上不去，而双飞翼布局则不存在这个问题。

（5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

9.说一说JS数据类型有哪些,区别是什么？

得分点：Number、String、Boolean、BigInt、Symbol、Null、Undefined、Object、8种

1. JS数据类型分为两类：一类是基本数据类型，也叫简单数据类型，包含7种类型，分别是Number 、String、Boolean、BigInt、Symbol、Null、Undefined。另一类是引用数据类型也叫复杂数据类型，通常用Object代表，普通对象，数组，正则，日期，Math数学函数都属于Object。

2. 数据分成两大类的本质区别：基本数据类型和引用数据类型它们在内存中的存储方式不同。
基本数据类型是直接存储在栈中的简单数据段，占据空间小，属于被频繁使用的数据。
引用数据类型是存储在堆内存中，占据空间大。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，当解释器寻找引用值时，会检索其在栈中的地址，取得地址后从堆中获得实体。

3. Symbol是ES6新出的一种数据类型，这种数据类型的特点就是没有重复的数据，可以作为object的key。数据的创建方法Symbol()，因为它的构造函数不够完整，所以不能使用new Symbol()创建数据。由于Symbol()创建数据具有唯一性，所以 Symbol() !== Symbol(), 同时使用Symbol数据作为key不能使用for获取到这个key，需要使用Object.getOwnPropertySymbols(obj)获得这个obj对象中key类型是Symbol的key值。

4. BigInt也是ES6新出的一种数据类型，这种数据类型的特点就是数据涵盖的范围大，能够解决超出普通数据类型范围报错的问题。注意：BigInt和Number之间不能进行混合操作

10. 说一说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即可。