这是我参与「第四届青训营」笔记创作活动的第 4 天

HTML面试题：

1. 如何理解语义化

可以让人更容易读懂（增加代码可读性）
让搜索引擎更容易读懂（SEO搜索引擎优化）

2. 默认情况下，哪些HTML标签是块级元素，哪些是内联元素？

display: block

div, h1, p, table, ul, ol
display: inline/ inline-block

span, a, img, input, button

3. DOCTYPE作用

是文档类型说明，它告诉浏览器，要处理文档类型。

必须声明在HTML第一行，不然会引发浏览器兼容问题。

通过让浏览器进入标准模式，使用最新的HTML5标准来解析页面；如果不写浏览器就会进入混杂模式，模拟老式浏览器的行为，防止老站点无法工作。

4. Script标签中defer和async的区别

浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 script 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完后才恢复解析。

当浏览器遇到带有 async 属性的 script 时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML，但是一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再继续解析。当然，如果在 JS 脚本请求回来之前，HTML 已经解析完毕了，那就没有关系，立即执行 JS 代码。

所以 async 是不可控的，因为执行时间不确定，在async JS 脚本中获取某个 DOM 元素，有可能获取到也有可能获取不到。而且如果存在多个 async 的时候，它们之间的执行顺序也不确定，完全依赖于网络传输结果，谁先到执行谁。

当浏览器遇到带有 defer 属性的 script 时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码

如果存在多个 defer script 标签，浏览器会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。

5. head标签的作用

<head>是头标签，用于引入外部资源对网页进行配置

Head中标签有：

<meta> ：元标签

<meta charset="UTF-8" > 用来设置字符集，指定HTML文档的源码类型，编辑器也要同时设置相同类型的编码，否则会乱码。

<meta name="viewport" content=" ">用来设置视口大小

<meta name="keywords" content=" " />用来设置网页关键词

<meta name="description" content=" " />用来设置页面描述

<title> 用于设置网页的标题，文字会显示到标签栏上，合理的设置网页关键词和页面描述，也是SEO的重要手段，利用SE规则提高网站自然排名。

<script> 用于在当前网页插入一段JS代码。

<link> 常用于外链式CSS的引入。

<style> 用于书写内部CSS样式。

6. src和href的区别

是source的缩写，指向外部资源的位置，指向的内容会嵌入到当前标签所在位置。并且资源会被下载到文档中。

href是超文本链接的缩写，指向网络资源所在位置，建立当前文档和引用资源之间联系。

7. link标签和@import的区别

它们都可以引入CSS，

link属于HTML的标签, 不但可以加载CSS，还可以加载JS，。它加载内容是和页面同时加载的。

而@import只可以引入CSS，因为它是CSS提供的，并且在2.1才被提出，有兼容容问题。它需要等页面加载完毕后加载。

同时link引入的样式权重大于@import引入的样式。

CSS面试题：

CSS选择器和其优先级

1. 布局

1.1: 盒模型的宽高如何计算？

答案：OffsetWidth = （内容宽度 + 内边距 + 边框），无外边距

如果加box-sizing: border-box, 那width就不是内容的宽度了,是整个border-box宽度。

border-box 的宽度：（内容宽度 + 内边距 + 边框）

1.2: margin纵向重叠的问题

相邻元素的 margin-top 和 margin-bottom 会发生重叠。

空内容的块级元素也会重叠被忽略

答案：15px

1.3: margin 负值的问题

答案：margin-top和 margin-left负值，元素向上/向左移动。

margin-right 负值，右侧元素左移，自身不受影响。

margin-bottom 负值，下方元素上移，自身不受影响。

1.4: BFC

Block format context，块级格式化上下文。

一块独立渲染区域，内部元素的渲染不会影响到外部元素。

创建BFC的方法：

float 不是 none，

over-flow 不是visible

position是absolute或者fixed

display是flex，inline-block

BFC的应用：

清除浮动

清除盒子 margin 塌陷（ margin 属性撑不开盒子）

阻止元素被浮动元素覆盖

1.5: float布局的问题

圣杯布局

具体流程：

给容器container，设置padding。比如：左边盒子宽为200 px，右边盒子宽为150px。就把把container的padding left设置为200px，padding right设置为150px。
给盒子内部的三个块级元素设置class column，给class column设置左浮动
左边盒子：设置margin-left为 -100%，设置position为relative，right 200px，往左移动，距离右侧原来位置200px.
右边盒子：设置margin-right 为 -150px，相当于取消了右边盒子的宽度。
给 container 设置 class clearfix 清除浮动。

双飞翼布局