一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
1、src和herf的区别？
1、相同点：都是引用外部资源文件的
2、不同点：（1）当使用src加载资源的时候，属于串行下载，会阻塞后面任务的执行
（2）herf进行加载资源的时候，属于并行下载，不会发生阻塞
所以我们一般用<script src="">的时候，都建议放在页面的最底部，最后一步操作就不会阻塞其它资源执行了
2、文档声明的DOCTYPE的作用？
浏览器一般有两种解析模式，严格模式和混杂模式。
严格模式下：按照w3c标准解析的。
混杂模式下：又叫兼容模式，兼容老的浏览器
声明<!doctype html>目的是为了让浏览器进入严格模式，按照html5规范，w3c标准解析
3、行内元素有哪些？块级元素有哪些？
行内元素：a span img input strong等标签.
块级元素：div ul li h1 h2 h3等等h系列的标签 p标签。
4、script标签中defer和async的区别？
首先如果只是<script src="xxxx">这种写法，当浏览器执行这段代码时，就会先去执行加载这块资源，阻塞后面文档的解析。举个例子也就是：如果我执行的<script src="xxxx">这个资源需要花费5s，那后面的文档的解析就需要等到5s后才能继续执行。
然后defer和async的属性，主要就是解决以上同步执行阻塞的问题，可以达到异步加载资源的效果。
其实说到资源加载我们还有多了解一个概念就是：这个过程汇总，有加载资源阶段和执行阶段。举个例子：我们平时很多人要去玩王者荣耀，这个游戏里面经常会打开界面让我们开始下载压缩包资源，那这个过程就和script里面加载资源阶段是一个道理，然后我们游戏压缩包资源下载好了，要去启动游戏了，启动游戏到进入游戏界面大概需要1s，这个过程就和script阶段里面执行阶段是一个道理。
所以我们了解了这两个概念后，在来看defer和async，结论就是：
defer和async在加载资源阶段是并行的，区别在于async加载资源阶段下载完毕后，进入到执行阶段会阻塞主线程。而defer优先级就低很多，只有主线程要做的事情都处理完成后，到最后才开始进入到他的执行阶段。举个例子：两个组长（async组长和defer组长），手上都有自己的活去做，所以把加载资源的活交给了各自的小弟并行去做，当各自的小弟安排的活做好了告诉了自己组长。如果是async组长那就是比较高效，直接停下手上活，把这个小弟的做好的活演示下，演示完成后继续做手上的活。defer组长就是比较佛系，虽然小弟和他说东西做好了，可是他还是把自己手上的活全部做完了，到最后再去演示小弟做出来的东西。
async相当于异步加载，加载完成之后需要执行，执行过程中还是会阻塞页面的渲染
defer也是异步加载，但是它是等待页面渲染完成再去执行，所以不会阻塞
5、css选择器及其优先级
对于选择器的优先权重：
（1）标签选择器、伪类选择器：1
（2）类选择器、伪类选择器、属性选择器：10
（3）id选择器：100
（4）内联样式：1000
注意事项：
1、！important声明的样式具有最高优先级
2、如果优先级相同，则最后出现的样式生效
3、继承得到的样式的优先级最低
4、通用选择器（*）、子选择器(>)和相邻同胞选择器(+)并不在这四个选择器中，所以他们的权值为0
5、样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式
6、display的属性值及其作用
1、none元素不显示，并且从文档流中移除
2、block块类型。默认宽度为父元素的宽度，可以设置宽高，换行显示
3、inline行内元素类型，默认宽度为内容的宽度，不可以设置宽高，同行显示
4、inline-block行内块级元素，可以设置宽高，同行显示
5、list-item像块级元素类型一样显示，并添加样式列表标记
6、table词元素会作为块级表格来显示
7、dispaly：block、inline、inline-block的区别？
1、block：会独占一行，多个元素会另起一行，可以设置width、height、margin、padding属性
2、inline：元素不会独占一行，设置width、height属性无效，但可以设置水平方向上的margin和padding属性，不能设置垂直方向上的padding和margin属性。
3、inline-block：将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内
8、隐藏元素的方法有哪些？
1、display：none 该元素不会在页面中展示，点击响应事件也不会触发
2、visibility：hidden 元素仍在页面中占据位置，点击响应事件也不会触发
3、transform：scale（0,0）将元素缩放为0，来实现元素的隐藏，元素仍在页面中占据位置，点击响应事件也不会触发：和visibility：hidden一样的效果
4、opacity：0 将元素的透明度设置为0，元素仍在页面中占据位置，点击事件会触发
5、position：absolute 使用绝对定位将元素移出可视化区域内，来实现元素的隐藏
6、z-index:负值 使其它元素遮盖住该元素，来实现隐藏
9、link和@import的区别？
相同点：他们都是用来引用css样式的
不同点：link是并发加载，@import是串行加载会被阻塞，需要等网站加载完毕后才开始加载
@import是css高版本提出的，对老的浏览器兼容不太好
@import只能加载css，link除了能加载css，其它的一些也可以
10、position的属性有哪些，区别是什么？
1、relative：元素的定位永远是相对于元素自身位置的，和其它元素没关系，也不会影响其它元素
2、fixed:元素的定位是相对于window的和其它元素没有关系
3、absolute：浏览器会递归查找该元素的所有父元素，如果找到一个设置了 position：relative/absolute/fixed的元素，就以该元素为基准定位，如果没有找到，就以浏览器为边界定位
