面经练习（四）

1. h5新特性了解多少

1. h5新特性：
   ①语义化标签：header、footer、section、nav、aside、article

②音频视频：audio、video

③canvas画布

④localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除

⑤websocket：单个 TCP 连接上进行全双工通讯的协议，WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。经过tcp连接三次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

⑥input 新增的type属性：
h5之前常见有：button，file，submit，checkbox，image，password
h5新增：data，color，email，url，search

⑦h5新增表单属性：
autofocus 属性规定在页面加载时，域自动地获得焦点。
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
multiple规定 input 元素中可选择多个值
placehoder简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失

⑧h5新事件：
onresize 当调整窗口大小时运行脚本
ondrag 当拖动元素时运行脚本
onscroll 当滚动元素滚动元素的滚动条时运行脚本
onmousewheel 当转动鼠标滚轮时运行脚本
onerror 当错误发生时运行脚本
onplay 当媒介数据将要开始播放时运行脚本
onpause 当媒介数据暂停时运行脚本

2.CSS3新特性了解多少

1. 选择器
   css各阶段的选择器
   
2. 背景：
   background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
3. 边框：
   border-radius：圆角
   box-shadow / text-shadow：阴影
4. 文本效果：
   text-shadow 向文本添加阴影
   text-overflow 规定当文本溢出包含元素时发生的事情
   text-wrap 规定文本的换行规则
5. 2D3D
   
6. 动画过渡：
   
   还有 rem

3. CSS实现单行、多行文本溢出显示省略号

4.箭头函数和普通函数的区别

箭头函数和普通函数的区别

5.JS异步编程的方法

JS异步编程的方法
Generator函数

6.什么是盒模型

分为IE盒模型 box-sizing：border-box 高度宽度为内容的高度宽度加上padding+border的宽度
W3c盒模型box-sizing： content-box高度宽度为内容的高度宽度

可以设置背景颜色

7.position 值

1. position: relative;相对定位

1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）

2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）

3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）

4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。） （两个都为定位元素，后面的会覆盖前面的定位）

2. position: absolute;绝对定位

1> 使元素完全脱离文档流（在文档流中不再占位）

2> 使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）

3> 使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）

4> 相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）

5> 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）

6> 提升层级（同相对定位）

3. position: fixed;固定定位

fixed生成固定定位的元素，相对于浏览器窗口进行定位。

4. position:static：默认值

默认布局。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

5. position: sticky 粘性定位

粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。

6. position: inherit

规定应该从父元素继承 position 属性的值。

8.img是行内元素还可以设置宽高

9.重绘和重排（display:none和visibility:hidden，opacity：0区别）

什么是回流(重排 reflow)？

回流（重排 reflow）：对DOM树进行渲染，只要修改DOM或修改元素的形状大小，就会触发reflow，reflow的时候，浏览器会使已渲染好受到影响的部分失效，并重新构造这部分，完成reflow后，浏览器会重新绘制受影响的部分到屏幕中
什么是重绘(repaint)？

重绘(repaint)：当我们对DOM的修改导致的样式变化，但未影响几何属性时，浏览器不需要重新计算元素的几何属性，直接可以为该元素绘制新的样式，跳过了回流环节，这个过程就叫重绘。

结论：回流必定会发生重绘，重绘不一定发生回流

在页面交互中存在频繁的回流与重绘，这个过程，会很大程度的影响性能，因为回流所需成本比重绘高的多，so，能用重绘就不要用回流了。

每日一题：display:none和visibility:hidden 当display显示及隐藏元素时，显示时占据空间，隐藏时不占空间，隐藏前后DOM结构发生变化，所以会重排也会重绘； 当visibility显示及隐藏元素时，不论是显示还是隐藏，都占据空间，因此隐藏前后DOM结构未发生变化，所以不只重绘。

三者区别：
一、空间占据

display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。

二、子元素继承

display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~

visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来

opacity: 0 不会被子元素继承，不能通过设置子元素opacity: 1使其重新显示

三、过渡动画

transition对于display肯定是无效的，大家应该都知道；

transition对于visibility是有效的

transition对于opacity是有效的

10.有关flex布局，基线

flex布局
什么是基线
align-items和align-content的区别

11.块元素，行内元素水平垂直居中

见笔记

12.flex：1指什么

flex：1