# 怎么理解HTML语义化
- 增强了代码可读性，让人更容易读懂
- 让搜索引擎更容易读懂，有助于爬虫抓取更多有效的信息
- 在没有CSS样式下页面也能呈现出很好的内容结构和代码结构
# script 标签中 defer 和 async 的区别？
script：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。async script：解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。defer script：完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。
# 什么是盒子模型？
在网页中，一个元素占有空间的大小有元素内容、内边距、边框和外边距四部分组成。有的部分可先显示相应的内容，而有的部分只用来分隔相邻的区域，共有两种盒模型：
- W3C标准盒模型/默认的
width + height+content，不包含border 和 padding
box-sizeing: content-box; - IE盒模型/怪异
width + height + content + border + padding
box-sizeing: border-box;
在项目中常用到IE盒模型: box-sizeing: border-box
# 什么是回流和重绘？
回流是元素尺寸和结构发生变化时，浏览器重新渲染部分或全部文档的过程
如何引发回流
- 页面首次渲染
- 浏览器窗口改变大小
- 尺寸或位置发生改变
- 元素内容变化，字体大小变化
- 激活CSS伪类
重绘是素样式的改变并不影响它在文档流中的位置时，浏览器重新绘制的过程
如何避免重绘
- 避免使用table布局
- 避免设置多层内联样式
- 避免使用CSS表达式，如：calc
- 避免频繁操作样式
- 尽可能在DOM树的最末端改变class
浏览器使用流式布局模型把HTML解析成DOM以及CSS解析成CSSOM，DOM 和 CSSOM合并就产生了Render Tree渲染树。有了RenderTree就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
回流必将引起重绘，重绘不一定会引起回流
# 什么是BFC
BFC(Block Formatting Context)是块级格式上下文。
根据盒模型可知每个元素都被定义为一个矩形盒子，然盒子的布局会受到尺寸、定位、盒子的子元素或兄弟元素以及视口的尺寸等因素决定，所以这里有个浏览器计算过程，计算的规则就是由一个叫作视觉格式化模型的东西定义的，BFC就是来自这个概念，他是CSS视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域。
BFC的一些特性
- 块级元素会在垂直方向一个接一个的排列，和文档流排列方式一致
- 分属于不同的BFC时可以阻止Margin重叠
- 计算BFC的高度时，需要计算浮动元素的高度即清除浮动
当给元素设置overflow: hidden时，实际上创建了BFC并决定了height:auto是如何计算的。在BFC布局规则中提到：计算BFC的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，达成了清除浮动的目标，所以父元素就包裹住了子元素。 - BFC区域不会与浮动的容器发生重叠
- BFC是独立的容器，容器内部元素不会影响外部元素
如何触发BFC
- float的值不为none
- overflow的值不为visible
- position的值为fixed、absolute
- display的值为table-cell、table-caption、inline-block、flex、inline-flex。
# link 和 @import的区别
- link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式；而@import不支持。
# CSS 选择器和优先级
优先级一般为 !important > style > id > class
