html5、js、css（3）面试

    HTML5新特性，语义化

视频、音频、画布、地理定位、离线缓存（或者叫 web存储？）、应用缓存、svg
    浏览器的标准模式和怪异模式
    xhtml和html的区别
    使用data-的好处
    meta标签
    canvas
    HTML废弃的标签
    IE6 bug，和一些定位写法

(1) 双边距  float引起  用display：inline

(2) 3px  margin-right: - 3px

(3)超链接hover 伪类样式，点击后 失效

按照 L（link）-V( visited )-H( hover )-A( active) 顺序来写

(4)z-index

最好给父级 设z-index，并且 relative 定位

(5)overflow

overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。

    css js放置位置和原因
    什么是渐进式渲染
    html模板语言
    meta viewport原理

CSS

    盒模型，box-sizing

定义：允许以特定的方式，匹配某个区域的 特定元素
    CSS3新特性，伪类，伪元素，锚伪类

圆角（border-radius）、阴影（box-shadow）、文字特效（text-shadow）、媒体查询、图片边框（border-image）、变换（transform），有旋转（rotate）、缩放（scale）、translate（移动）、skew（倾斜）、景深、preserve-3d、transform-style、animation、@keyframe、弹性布局

tranisition（过渡），一种效果 到 另一种效果，时间、转速曲线
    CSS实现隐藏页面的方式
    如何实现水平居中和垂直居中。
    说说position，display
    请解释*{box-sizing:border-box;}的作用，并说明使用它的好处

设置了 指定宽度和高度的框，当有 padding和border时，这两个也会被容纳在 盒子里面，不会增大 盒子面积。
    浮动元素引起的问题和解决办法？绝对定位和相对定位，元素浮动后的display值

position relative 和 absolute 相对谁定位？

relative 相对父级 和 兄弟节点定位，如果父级 元素有padding，相对于 content定位。如果 没有 有定位的父级 和兄弟 节点，相对 body的 原始点定位；

absolute 相对 有定位的 定位，一级级向上找，最后都没有，就 body起始点定位。
    link和@import引入css的区别

（1）link 是xhtml的标签，不仅可以 加载css，还可以加载 rss等；@import  只能引入 css

（2）link 在页面载入时，加载css;@import 是 页面加载完，再加载 css
    解释一下css3的flexbox，以及适用场景
    inline和inline-block的区别
    哪些是块级元素那些是行级元素，各有什么特点

块级元素：p、ul、li、ol、form、h1、h6、div、table、hr、br、

特点：独占一行  块级元素 可以嵌套 块和行，设置宽、高

行级元素：a、span、em、strong、input、image、textarea、select、option

特点：行内显示  不能设置宽高，宽高由内容撑开  只能嵌套行 

br 是单标签，空标签    p 是闭合标签
    grid布局

网格布局
    table布局的作用
    实现两栏布局有哪些方法？
    css dpi
    你知道attribute和property的区别么
    css布局问题？css实现三列布局怎么做？如果中间是自适应又怎么做？

    display:flex;   justify-content:center;       align-items:center;

    实现垂直水平居中
    流式布局如何实现，响应式布局如何实现

• 静态布局（static layout）：

• 网页上 所有元素的尺寸 一律用 px做单位（固定 尺寸）

• 通常采用 居中布局，中间的内容 设置min-width，当小于 min-width时，会有 滚动条

• 流式布局（liquid layout）：

• 页面元素 的宽度 按照 屏幕分辨率 调整，总体 布局不变。代表作：栅格系统（网格系统）

• 网页中 主要划分区域的尺寸 使用百分数，搭配 max-*、min-*使用。

• 例如，网页主体宽度 80%，max-width为960px；图片 width：100%，max-width  设为 图片本身的尺寸，防止 被拉伸而失真。

• 布局特点：当屏幕分辨率 变化时，页面元素 大小会变，但布局 不会变

• 设计方法：用 百分比 定义宽度，高度 用px 固定住。

• 缺点：如果屏幕尺度 跨度过大，在相对原始设计而言 过大或过小的屏幕 不能正常显示。

• 因为宽度 使用百分比 定义，但高度 和 文字大小 都是用 px固定，所以 在大屏幕手机下，页面元素 宽度被拉得很长，但高度和文字大小 很原来一样，很不协调。

• 自适应布局（Adaptive layout）

• 为不同的 屏幕分辨率 定义布局，就是 创建多个 静态布局，每个静态布局 对应一个屏幕分辨率范围。但在每个静态页面中，页面元素不随 窗口大小的调整 发生变化。

• 可以把 自适应布局 看作是 静态布局的一个系列。

• 设计方法：用@media

• 响应式布局（responsible  layout）：

• 目标：确保一个页面，在所有终端上，都能有满意的 效果呈现。

糅合了 流式布局、弹性布局和媒体查询。分别为 不同的屏幕分辨率 定义布局（自适应），同时，在每个布局中，用流式布局的 理念，即 页面元素宽度 随着窗口调整 而自动适配。

• 即 创建多个流式布局，分别对应 一个屏幕分辨率 范围。

• 可以把 响应式布局 看作是 流式布局 和 自适应布局的 融合。

• 弹性布局（rem/ em布局）

• rem、em  都是顺应 不同网页字体大小 展现。

• em 相对其 父元素，rem 始终相对于 html大小，即 页面根元素。

• 使用 em、rem 进行布局，比百分比 更加灵活，可以 支持浏览器  字体大小调整和缩放。

• 这类布局特点：包裹文字的 各元素尺寸采用 em/rem 做单位，但页面的 主要划分区域 仍然用  百分数 或 px（流式布局 或 静态/固定布局）

• 浏览器 默认字体 高度 16px，即 1em：16px。为了使 em/rem 单位更直观，CSS编写者常常将页面跟节点字体设为62.5%，选择用 rem控制 字体时，需要先设置 根节点 html  字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。

• 【可以看做  1rem =1fontsize  fontsize改变，rem也变    1em=16px，这个不能变】

为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？

因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}   =》10px
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

使用 em/rem 的另一个好处是  更能适应缩进/  以字体单位padding或margin。p{ text-indent: 2em; }

结论：

1.只做 pc端，静态布局；

2.只做 移动，对 高度和元素间距 要求不高，弹性布局（rem + js）最好。一份css+一份js调节font-size搞定

    移动端布局方案
    实现三栏布局（圣杯布局，双飞翼布局，flex布局）
    清除浮动的原理
    overflow:hidden有什么缺点？
    padding百分比是相对于父级宽度还是自身的宽度

父容器的宽度
    css3动画，transition和animation的区别

都是通过 改变元素属性值  实现动画。animation 有关键帧，百分比控制，可以实现更复杂的动画。

两个都有 timing-function、delay、duration，transition有的animation 都有，而且 animation还可以设置  动画次数。

    animation的属性，加速度，重力的模拟实现
    CSS 3 如何实现旋转图片（transform: rotateY\rotateX\rotateZ）
    sass less
    对移动端开发了解多少？（响应式设计、Zepto；@media、viewport、JavaScript 正则表达式判断平台。）
    什么是bfc，如何创建bfc？解决什么问题？
    CSS中的长度单位（px,pt,rem,em,ex,vw,vh,vh,vmin,vmax）
    CSS 选择器的优先级是怎样的？
    雪碧图
    svg
    媒体查询的原理是什么？
    CSS 的加载是异步的吗？表现在什么地方？
    常遇到的浏览器兼容性问题有哪些？常用的hack的技巧
    外边距合并
    解释一下“::before”和“:after”中的双冒号和单冒号的区别
：伪类  ：：伪元素

单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。

所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。

浏览器解析过程

解析html，形成domTree，期间，如果遇到 img，就 立刻 挂到树上，异步 下载。domTree形成后，解析 css，形成 cssTree，两个一起合成 renderTree。

对 dom 增加、删除、改变宽高、位置、display，都会 让 渲染树 重排（reflow）并重绘，效率 很低；

但是 改变背景色、字体色，只是 重绘（repaint）。

js异步加载

js 会阻断html、css加载，要等 js加载完并执行完 才能继续。因为 js会修改 html 和 css。

同步加载 js缺点：

加载 工具类的方法，或者 对数据的处理，没必要 要同步加载，一旦 js过多，会影响 页面效率，网不好时，js不先完事，网站 将始终等待它 不进行渲染 工作。

js异步 加载三种方案

script标签加上defer    ie用  但发生在 页面解析完毕，dom树形成时，js 执行

可以 把src去掉，代码写在 <script>标签里。

async  只能加载 外部js，也就是 不能把   代码写在 <script>标签里。ie9 以下，禁止。加载完立刻 执行。

兼容性  创建script，插入到 dom中。

背 叙述题的 方法：

用 自己的话 背着 总结一遍；

整理成 一条条的 或者 关键点，简洁的

• js的基本类型有哪些？引用类型有哪些？

js  数据类型 分 原始数据  和 引用数据。

原始数据类型  也叫 基本数据类型 （5）

number  string boolean  null  undefined

引用数据类型 

object ：object、function、array、date、RegExp（正则表达式）

null和undefined的区别

Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。
Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
• 
  Object是引用类型嘛？    是
• 引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

（1）基本类型存在 栈（stack），引用类型 存在 堆（heap）

（2）基本类型值 不可改变

声明一个变量  再给它赋值   就相当于  把1001号房间  重命名 为 a，放进去 值；再把这个变量   的值  改变，就要 开 1002号房间，把 新值 进去，原来 a  房间名字 又变回  1001，里面 还有 原先的值，但它 不是 a 房间了。

这就叫 值不可改变  因为 都成 野房间了 原来的值还在

（3）引用数据  是 栈内存 放 堆内存地址，堆内存 放值。

当 声明 一个数组 等于 另一个数组时，这个 声明的数组，栈内存  里 放上 那个值的堆内存地址，所以 打印出来的值 相等。

而 原始值 相等，是重新 开个房间，在里面  把值放进去

两者 复制值、存放值、重新赋值 的 原理 不一样。

如果数组 push 一个值，就把值 接着放进 堆内存，不会 换一个 堆内存 地址

（3）引用数据 重新赋值  再开一个 堆内存，放进去 新值，指向 的堆内存地址 也换成 如今这个。

但是  那个 复制 arr的 arr1  栈内存还是 指向原先 堆内存，值 不变。
JS常见的dom操作api

dom结构操作之

获取父元素   xx.parentElement

获取子元素  xx.childNodes

删除节点  xx.removeChild(xx)

https://www.cnblogs.com/DCL1314/p/10393128.html
解释一下事件冒泡和事件捕获
事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

以 ul、li为例：

		var ul=document.getElementsByTagName("ul")[0];
		ul.onclick = function(e){
			var target=e.target || window.event.srcElement;

			//先获取到 事件
			var event=e || window.event;
			//再找到 事件源
			var target=event.target || event.srcElement;
			console.log(target.innerText);
		}
		//这个事件委托 父级元素只有一个用，就是把本该 绑定在子元素上的 点击事件，绑在 自己身上
		//但是onclick函数 里面，获取到的事件 和 事件源，都是子元素的，跟父元素没有关系
		
		// innerText里的东西 就是 <li>123</li>里的 123

对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？
call，apply，bind
显示原型和隐式原型，手绘原型链，原型链是什么？

原型：

一个 函数的属性 （就是 可以 xx.prototype）,它 是构造函数制造出的  对象的公有祖先，（所有 通过一个构造函数 制造出的 函数 都有一个相同的prototype），通过该构造函数产生的对象，可以继承该原型的属性和方法，原型也是对象。

为什么要有原型链
创建对象的多种方式
实现继承的多种方式和优缺点
new 一个对象具体做了什么

通过 构造函数 创建的对象（）
手写Ajax，XMLHttpRequest
变量提升
举例说明一个匿名函数的典型用例
指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？
attribute和property的区别

attribute是html 标签上的特性，是dom节点 自带的属性，只能是 字符串，比如 class、title、id等。

property是dom元素作为对象附加的属性，如childnodes、firstchild。

div.getAttribute('title');  div.setAttribute('class', 'a');

div1.className = 'a';

div1.BBBBB = [1, 2, 3];

document load和document DOMContentLoaded两个事件的区别
=== 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined

==:

number 与 boolean、string 比较，先将 boolean、string转换成 数值

number 与 undefined、null 比较，false

两个字符串 比较，比较 字符序列

两个对象比较，比较 对象的引用地址

两个NaN比较， false

null == undefined，  true

===：

值、类型都相等 才相等；换句话说，长得一模一样

（5）如果两个值都引用同一个对象或是函数，那么相等，否则不相等

[] === []        //false

[] == []       //false

（6）如果两个值都是null，或是undefined，那么相等

undefined === undefined    //true

undefined == undefined         //true
typeof能够得到哪些值

string、number、boolean、undefined、object、function
什么是“use strict”,好处和坏处

严格模式，使 js运行时 实行 更严格解析 和 错误处理的方法。
函数的作用域是什么？

每个函数都是对象 对象中有些属性不能访问  [[scope]]就是作用域，存放着执行期上下文 的集合

作用域链：

这些 执行期上下文 集合 链式连接

js 的作用域有几种？

什么是闭包？闭包形成原理？闭包应用？闭包危害？

一个内部函数 被 保存到外部 一定会形成闭包

a函数 里有 b函数，b 函数 被return 到外部，通过 b 可以拿到 a函数 的作用域，里面包括 a函数 的 变量、函数声明。

原理：因为 b的作用域 包含了 a的作用域

作用：

（1）函数累加器

写法：a函数 里 定义个 b函数，还声明 自己的 变量；b函数里 写对a中变量操作的 步骤，肯定 有一句 console.log( x );

a函数 最后一句 肯定是 return b函数

再用一个变量 var x = a();

x执行，相当于 b函数执行：x()

(2)缓存（做 存储 结构）

（1）的改编，a函数 里 多了一个 c函数。c函数 也操作 a的变量，并且 console.log,最后 return [a,b];

找个变量接收，执行时候 array[0]()   和  array[1]()

(3)p82  懒得写

(4)实现封装，属性私有化（高级应用）

(5)命名空间、模块化开发、防止污染全局变量

内存泄露：作用域 不被释放，内存 被占用，剩下的内存 就变少。
JS如何实现重载和多态
常用的数组api，字符串api

https://blog.csdn.net/huangpb123/article/details/76861748
原生事件绑定（跨浏览器），dom0和dom2的区别？

给定一个元素获取它相对于视图窗口的坐标

div.getBoundingClientRect()  可以获取到元素的 height、width、top、left、bottom、right、x、y。

其中，left 和 top代表 元素左上角位置 距离 浏览器可视区 的 x和y 距离；right和 bottom代表 元素右下角 距离 浏览器可视区 的 x和y 距离。

另外，dom.offsetWidth 和 dom.offsetHeight 求的是 元素 width+padding+border 的宽和高；dom.getBoundingClientRect()  求到的 height、width、right、bottom 也是 width+padding。

dom.offsetLeft  和 dom.offsetTop  忽略自己是否为 定位元素，求得是 自己和有定位的父级  之间的距离。不管这段距离 是用 margin 还是 position定位 出来的。

但如果 它的父级没有 定位，它求得 就是 自己和文档 之间的 距离，如果它的 父级 有定位，求的是 自己和父级 间的距离。dom.offsetLeft  算上 未初始化的8px，dom.offsetTop 不用算上 8px（margin 塌陷）。

dom.offsetParent  返回最近有定位的父级

如何实现图片滚动懒加载

js 的字符串类型有哪些方法？ 正则表达式的函数怎么使用？
深拷贝
编写一个通用的事件监听函数
web端cookie的设置和获取
setTimeout和promise的执行顺序
JavaScript 的事件流模型都有什么？

捕获流 和 冒泡流。
navigator对象，location和history
js的垃圾回收机制
内存泄漏的原因和场景
DOM事件的绑定的几种方式
DOM事件中target和currentTarget的区别
typeof 和 instanceof 区别，instanceof原理
js动画和css3动画比较
JavaScript 倒计时（setTimeout）
js处理异常
js的设计模式知道那些
轮播图的实现，以及轮播图组件开发，轮播10000张图片过程
websocket的工作原理和机制。
手指点击可以触控的屏幕时，是什么事件？
什么是函数柯里化？以及说一下JS的API有哪些应用到了函数柯里化的实现？(函数柯里化一些了解，以及在函数式编程的应用，最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。)
JS代码调试