知识总结：html+css

1. DIV+CSS布局的好处

代码精简，且结构与样式分离，易于维护

代码量减少了，减少了大量的带宽，页面加载的也更快，提升了用户的体验

对SEO搜索引擎更加友好，且H5又新增了许多语义化标签更是如此

允许更多炫酷的页面效果，丰富了页面

符合W3C标准，保证网站不会因为网络应用的升级而被淘汰

缺点: 不同浏览器对web标准默认值不同，所以更容易出现对浏览器的兼容性问题。

2. 如何解决a标点击后hover事件失效的问题?

改变a标签css属性的排列顺序，只需要记住LoVe HAte原则就可以了：

link→visited→hover→active

比如下面错误的代码顺序：

a:hover{color: green;text-decoration: none;
}
a:visited{ /* visited在hover后面，这样的话hover事件就失效了 */color: red;text-decoration: none;
}

正确的做法是将两个事件的位置调整一下。

注意⚠️各个阶段的含义：

a:link：未访问时的样式，一般省略成a

a:visited：已经访问后的样式

a:hover：鼠标移上去时的样式

a:active：鼠标按下时的样式

3. 点击一个input依次触发的事件

const text = document.getElementById('text');
text.onclick = function (e) {console.log('onclick')
}
text.onfocus = function (e) {console.log('onfocus')
}
text.onmousedown = function (e) {console.log('onmousedown')
}
text.onmouseenter = function (e) {console.log('onmouseenter')
}
复制代码

答案：

'onmouseenter'
'onmousedown'
'onfocus'
'onclick'

4. null和undefined的区别

null 表示一个“无”的对象，也就是该出不应该有值；而 undefined 表示未定义

在转换为数字时结果不同，Number(null)为0，而 undefined为 NaN

使用场景上：

null：

作为函数的参数，表示该函数的参数不是对象

作为对象原型链的终点

undefined:

变量被声明了，但没有赋值时，就等于undefined

调用函数时，应该提供的参数没有提供，该参数等于undefined

对象没有赋值属性，该属性的值为undefined

函数没有返回值时，默认返回undefined

5、盒模型

由于浏览器的差异性，盒模型分为 标准盒模型（W3C 的规范）和 IE盒模型（老的 IE 浏览器在怪异模式下使用自己的非标准模型）

它们的呈现方式和对盒子大小的计算略有不同。

在标准盒模型下通过设置 box-sizing: border-box; 可转换为 IE 盒模型

01. 标准盒模型

元素的 width 和 height 只包含content，不包含 border 和 padding 值；
盒子的大小由元素的宽高、边框和内边距决定

盒子的宽 = width + border-width * 2 + padding-left + padding-right
盒子的高 = height + border-width * 2 + padding-top + padding-bottom

02. IE盒模型

元素的 width 和 height 不仅包含content，还包含 border 和 padding
盒子的大小取决于元素的宽和高，修改边框和内边距的值不能改变盒子的大小

盒子的宽 = width盒子的高 = height

浏览器兼容性及其他

只要设置了合适的 DTD，大多数浏览器会按照标准盒模型来显示，但是 IE5.X 和 6 在怪异模式下会根据 IE 盒子模型进行显示。

标准盒模型下元素的 box-sizing 属性（IE8+）默认值为 content-box，将它设置成 border-box 可转换为 IE 盒模型。在实际应用场景中，若想控制元素总宽高保持固定，这个设置很有用。

元素的宽（width）、高（height）、边框（border）、内边距（padding）、外边距（margin）都是盒子模型的重要组成部分，但是盒子模型的大小只与元素的宽高、边框、内间距有关，外边距只影响盒子所占外围空间的大小。

6、清除浮动的方式

清除浮动本质上是要清除浮动元素带来的一些影响（例如高度塌陷）

例如：子元素设置了float后，脱离父元素，导致父元素无法撑开？（也就是子元素的高度没有过渡到父元素）

常用以下三种方式解决：

01、额外标签法，添加一个空的div

在最后一个标签后面，新加一个<div></div>，给其设置clear:both（常用）

02、父元素增加overflow属性（这个用的比较少，因为正常功能会受到影响）

03、父元素使用after伪类元素清除浮动

添加在css上，html上没加内容（推荐）

7、水平居中、垂直居中的几种方法

水平居中的方法：

若是针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素

父元素设置 text-align:center;

绝对定位；弹性布局；grid网格布局

不定宽块状元素

设置 margin：auto;

绝对定位；弹性布局；grid网格布局；table表布局

grid网格布局：

阮一峰 CSS Grid 网格布局教程：

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

.farther {display: grid;justify-content: center;}

table表布局:

.father {display: table;
}.children {display: table-cell;text-align: center;
}

垂直居中的方法：

若为单行内联(inline-)元素：

通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中；

绝对定位；弹性布局；table表布局；grid网格布局

不定宽块状元素：

绝对定位；弹性布局；table表布局；grid网格布局

grid网格布局：

.farther {display: grid;justify-content: center;align-content: center;}

table表布局:

.father {display: table;
}.children {display: table-cell;vertical-align: middle;text-align: center;
}

8、CSS3动画（帧动画及原理）

使用动画（js实现动画，css3实现动画）时两者的区别？

js实现的是帧动画、css实现的是补间动画（transition animation）
帧动画：使用定时器，每隔一段时间，更改当前的元素
补间动画：过渡（加过渡只要状态发生改变产生动画）动画(多个节点来控制动画)性能会更好
在支持css3的浏览器尽可能的使用css3动画（适用于移动端开发）

9、如何使用媒体查询

@media 媒体类型 and （媒体特性）{你的样式}

@media screen and (max-width:480px){.ads {display:none;}
}

使用关键词"and"将多个媒体特性结合在一起

@media screen and (min-width:600px) and (max-width:900px){body {background-color:#f5f5f5;}
}

在智能设备上，例如 iPhone、iPad 等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

使用关键词 “not” 是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not 关键词表示对后面的表达式执行取反操作，如：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

@media not print and (max-width: 1200px){样式代码}

only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

10、页面导入样式时，使用link和@import有什么区别?

1) 从属关系的区别：link属于XHTML标签，而@import是CSS提供的语法规则；link除了加载CSS，还可以定义RSS等，而@import就只能加载CSS

2) 加载顺序的区别：页面加载时，link会同时被加载，而@import引用的CSS会等页面被加载完之后再加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)

3）兼容性的区别：link是XHTML标签，无兼容问题；而@import是CSS2.1提供的，只有IE5以上才能支持

4）DOM可控性区别：link支持使用Javascript控制DOM去改变样式，由于DOM方法是基于文档的，所以无法使用@import方式改变样式。

具体可参考：https://xiangshuo.blog.csdn.net/article/details/52885924

11、简述下html5的离线储存原理，同时说明如何使用？

原理：

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

①　页面头部像下面一样加入一个manifest的属性。

<!DOCTYPE HTML>
<html manifest = "cache.manifest">...
</html>

在cache.manifest文件的编写离线存储的资源。

CACHE MANIFEST#v0.1CACHE:js/index.jscss/index.cssNETWORK:images/logo.pngFALLBACK:*.html /404.html /* / /404.html 或 /html/ /404.html 也可*/

以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更新manifest以实现浏览器重新下载新的文件，可以是版本号，时间戳或md5码等。

离线存储的manifest一般由三个部分组成：

①　CACHE：必选，表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。

②　NETWORK：可选，可以使用通配符，表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

③　FALLBACK：可选，表示如果访问第一个资源失败，那么就使用第二个资源来替换他，如/html/ /404.html表示用 “404.html” 替代 /html/ 目录中的所有文件，/ /404.html表示用 “404.html” 替代当前目录中的所有文件，*.html /404.html表示用 “404.html” 替代所有html文件。