1.什么是HTML语义化
简单来说：就是用正确的标签做正确的事。比如：
- 头部：header
- 导航：nav
- 主体内容：main
- 标题：h1 ~ h6
- 段落：p
- 侧边栏：aside
- 页脚：footer
这样，整篇HTML结构非常清晰好看。
HTML语义化有什么好处？
- 使代码更具有可读性，便于团队开发和维护。
- 让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重（SEO）。
- 网页加载慢导致CSS文件还未加载时（没有CSS），页面仍然清晰、可读、好看。
- 提升用户体验，例如title、alt可用于解释名词或解释图片信息。
2.script标签中的defer和async的区别？
script：会阻碍html解析，只有下载好并且执行完脚本才会继续解析html。asunc script：解析html过程进行脚本的异步下载，下载完成立马执行，有可能会阻断html解析也可能不会。defer script：解析html过程进行脚本的异步下载，解析完成之后再按照顺序执行脚本。不会阻塞浏览器解析html。
推荐文章：
3.说说css盒模型
- IE盒模型：宽高属性计算包括content+padding+border
- W3C标准盒模型：宽高属性计算只包括content
4.说说margin负值
margin-top:元素自身会向上移动，同时会影响下方的元素向上移动；margin-bottom:元素自身不会移动，但是会减少自身供css读取的高度，从而影响下方的元素向上移动；margin-left:元素自身向左移动，同时会影响其他元素；margin-right:元素自身不会移动，但是会减少自身供css读取的宽度，从而影响右侧的元素向左移动；
总的来说，通过负边距进行偏移的元素，它会放弃它偏移前所占据的空间，这样它后面的文档流中的其他元素就会“流”过来填充这部分空间。 文档流只能是后面的流向前面的，即文档流只能是向左或向上流动，不能是向下或向右流动。
5.说说css多种三列自适应布局的实现
- 基于float设置左右浮动，中间自适应；
- 基于position:absolute实现，左右中元素均设置absolute，左右元素分别赋予left，right为0，中间元素left，right分别等于左右元素宽度即可；
- 基于display:flex实现，赋予左右中父级元素display:flex，左右元素宽度自定义，中间元素设置flex：1即可；
- 基于diplay:table实现，赋予左右中父级元素display:table,width:100%,分别赋予左右中dispaly:table-cell,其中，左右元素分别设置宽度即可；
- 基于display:grid实现，赋予左右中父级元素display:grid，并且使用grid-template-columns:300px auto 300px,将其分为宽为300px，auto，300px三列布局即可；
6.display都有哪些属性
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。 |
| table | 此元素会作为块级表格来显示，表格前后带有换行符。 |
| inherit | 规定应该从父元素继承 display 属性的值。 |
| flex | 弹性盒模型。 |
| grid | 网格布局。 |
7.块元素和行内元素、行内块元素的区别
一.块级元素
（1）常见的块元素有哪些？
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。
（2）块级元素有什么特点？
- 自己独占一行
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的
100% - 是一个容器及盒子，里面可以放行内或者块级元素
（3）注意问题：
只有文字才能组成段落，因此 p 标签里面不能放块级元素，特别是 p 标签不能放 div。同理还有这些标签h1,h2,h3,h4,h5,h6,dt ，他们都是文字类块级标签，里面不能放其他块级元素。
二.行内元素
（1）常见行内元素有哪些？
常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 等，其中 <span> 标签最典型的行内元素，也称内联元素。
（2）行内元素有哪些特点？
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 只可以设置水平方向的外边距
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或则其他行内元素
（3）注意问题：
链接里面不能再放链接。
特殊情况 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。
三.行内块元素
（1）常见行内块儿元素有哪些？
在行内元素中有几个特殊的标签 <img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
（2）行内块元素有什么特点？
- 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙，一行可以显示多个。
- 默认宽度就是它本身内容的宽度。
- 高度，行高、外边距以及内边距都可以控制。
四. 块级元素、行内元素和行内块元素的区别
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
五. 块级元素、行内元素和行内块元素互转
- 块转行内：
display:inline; - 行内转块：
display:block; - 块、行内元素转换为行内块：
display: inline-block;
8.css 选择器和优先级
首先我们要知道有哪些选择器：选择器参考表。
常规来说，大家都知道样式的优先级一般为 !important > style > id > class ，但是涉及多类选择器作用于同一个元素时候怎么判断优先级呢？相信我，你在改一些第三方库（比如 antd 😂）样式时，理解这个会帮助很大！
这篇文章写的非常清晰易懂，强烈推荐，看完之后就没啥问题了：深入理解 CSS 选择器优先级。
上述文章中核心内容： 优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：
- 如果存在内联样式，那么
A = 1，否则A = 0；- B 的值等于
ID选择器（#id）出现的次数；- C 的值等于
类选择器（.class）和属性选择器（a[href="https://example.org"]）和伪类（:first-child）出现的总次数；- D 的值等于
标签选择器（h1,a,div）和伪元素（::before,::after）出现的总次数。
从左至右比较，如果是样式优先级相等，取后面出现的样式。
9.重排（reflow）和重绘（repaint）的理解
简单地总结下两者的概念：
- 重排：无论通过什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。
- 重绘：通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。
如何减少重排和重绘？
- 最小化重绘和重排，比如样式集中改变，使用添加新样式类名
.class或cssText。 - 批量操作 DOM，比如读取某元素
offsetWidth属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用document.createDocumentFragment()来添加要被添加的节点，处理完之后再插入到实际 DOM 中。 - 使用
**absolute**或**fixed**使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显。 - 开启 GPU 加速，利用 css 属性
transform、will-change等，比如改变元素位置，我们使用translate会比使用绝对定位改变其left、top等来的高效，因为它不会触发重排或重绘，transform使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。
这里推荐腾讯 IVWEB 团队的这篇文章：你真的了解回流和重绘吗，好好认真看完，面试应该没问题的。
