一些面试题整理

html行内元素、块级元素和行内块元素的区别

•行内元素有：title lable span br a em b i strong

•块级元素有：body form select textarea h1-h6 table button hr p ol ul dl div

•行内块元素常见的有： img input td

1.行内元素大致有b, big, i, small, tt，abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var，a, bdo, br, img, map, object, q, script, span, sub, sup, input, label, select, textarea
a,img,span,input,select,textarea
2.块级元素有div、p、dl,dt,dd,nav、aside、header、footer、section、article、ul-li、address等。
3.行内块级：button

区别如下：
行内元素
从左往右排列，不占据一行；
对其设置宽高及margin的上下距离无效

块级元素
单独占据一行

行内块级元素
不会自动换行，相比行内可以设置宽高，具有行内块级共同特性。

为什么行内块会有间隙

会出现间隙，其实是行内块元素之间的换行带来的影响。只要解决了换行的问题，也就解决了间隙的问题。
方案一
<span>行内元素</span><span>行内元素</span><span>行内元素</span>

二

<span>行内元素</span
    ><span>行内元素</span
    ><span>行内元素</span>

三

<span>
    行内元素</span><span>
    行内元素</span><span>
    行内元素</span>  

四

<span>行内元素
    <span>行内元素
    <span>行内元素 

方案五（把父级font-size设置为0）
tip：方案四在IE7,及IE7下还是会出现间隙。在safari浏览器下也会出现间隙。

display: none与visibility: hidden的区别

display: none隐藏后的元素不占据任何空间，
而visibility: hidden隐藏后的元素空间依旧保留
visibility是一个非常有故事性的属性
1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

CSS优先级算法如何计算

优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为:
同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
important 比 内联优先级高
标签div权重为：1；class的权重为：10；id的权重为：100
1.内联样式表的权值为 1000，就是在元素内写style

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

类选择器和属性选择器优先级相同，谁在后面谁的优先级较高

注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+），他们的权值是0，所以两个通配符选择器和一个通配符选择器的权值是相同的

两个超出边界的数字相加求和

JavaScript 能表示的最大安全整数是 9007199254740991，可以用API Number.MAX_SAFE_INTEGER 看一下
超出范围就会发生精度丢失
不能简单的把两个数字，转为Number类型，进行相加。
需要取两个数字的每一位，进行相加，大于10，就进1，把结果保存在一个字符串中。

描述一下 cookies，sessionStorage 和 localStorage 的区别

cookies 存储大小 不能超过4k 设置的cookie过期时间之前一直有效 网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）,始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递

sessionStorage 可以大于5M 数据在当前浏览器窗口关闭后自动删除 仅在本地保存 不会自动把数据发给服务器

localStorage 可以大于5M 浏览器关闭后数据不丢失除非主动删除数据 仅在本地保存 不会自动把数据发给服务器

ES6的了解

es6是一个新的标准，它包含了许多新的语言特性和库，是JS最实质性的一次升级。
比如’箭头函数’、’字符串模板’、’generators(生成器)’、’async/await’、’解构赋值’、’class’等等，还有就是引入module模块的概念

什么是单页应用？

整个webapp就一个HTML文件，里面的各个功能页面是JavaScript通过hash或者history api来进行路由，并通过ajax 拉取数据实现响应功能。

优点：
分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起；
减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；

缺点：
SEO问题，现在可以通过Prerender等技术解决一部分；
前进、后退、地址栏等，需要程序进行管理；
书签，需要程序来提供支持；

数组常用的几种方法

push：向数组的末尾增加一项 返回值是数组的新长度
unshift：向数组开头增加一项 返回值是数组的新长度
pop:删除数组的末尾项 返回值是删除的数组项
shift:删除数组开头项 返回被删除的开头项目
splice：删除数组中的任意项 返回值是被删除的数组项
slice:复制数组 返回值是复制到的新数组 写上数值之后 不包含被复制的最后一项

拼接：
concat:把一个数组和另一个数组拼接在一起 返回拼接好的数组
join:把数组中的每一项 按照指定的分隔符拼接成字符串

排序：
reverse:倒序数组 返回值倒序数组 原有数组改变
sort:根据匿名函数进行冒泡排序 b-a倒序 a-b升序

兼容性不好：
indexOf:返回获取项在数组中的索引
lastIndexOf:返回获取项在数组中出现的最后一次索引
forEach: 循环遍历数组 参数是一个匿名函数 默认返回为undefined
map：循环遍历数组 参数是一个匿名函数

使用CSS3绘制一个实心三角形

1、先创建一个盒子

1

2、为这个盒子添加样式

#triangle {
height: 0;
width: 0;
border-right: 50px solid transparent;
border-bottom: 50px solid yellow;
border-left: 50px solid transparent;
}
设置四条边框的大小,不设置宽高
选择我们所需要的那一部分,相邻两边设置为透明色，对面边不设置