CSS盒模型
盒模型包含了content，padding，border，margin
1.一个是标准模型：盒模型的宽高只是content的宽高
2.一个是IE模型（又叫怪异模型）：盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。
如何统一模型：将模型的宽高都统一为内容(content)+填充(padding)+边框(border)的总宽高。
div{
box-sizing: border-box;
}
DOM事件流
JS中事件分为三个阶段： 事件捕获 --> 事件目标 --> 事件冒泡
栗子：给目标元素（text）绑定click事件，实际的（text）元素在捕获阶段不会接收到事件，意味着在捕获阶段，事件从document到再到
DOM层级越小，事件传播的消耗越小，在一定情况下也可以视为一种优化性能的手段
比较常见的冒泡现象：
sina
正常执行顺序
1.从document慢慢找下去，判断当前元素是否是时间的触发源
2.找到事件源，执行a元素上的onclick事件
2.事件进入冒泡阶段，包含a元素的document的onclick事件
3.事件完成，进入浏览器默认行为，即跳转。
PS：如果当使用return false会打断后续行为，所以这里不会跳转。
使用event.preventDefault取消浏览器默认行为
使用event.stopPropagation会取消冒泡，但不取消浏览器默认行为。
CSS层叠规则（视图上的显示层级）
元素居中
水平居中
行内元素:text-align: center
块级元素:margin: 0 auto
absolute + transform
flex + justify-content: center垂直居中
line-height: height
absolute + transform
flex + align-items: center
table水平垂直居中
absolute + transform
flex + justify-content + align-items
CSS选择器问题
优先级：!important > 行内样式 > #id > .class > tag > * > 继承 > 默认
css选择器原理：采用递归方式，从右往左找，如body #box1 .box2 div span a，
1.浏览器会先找所有的a标签
2.从这些a标签中找到父元素是span的
3.从这些span中找父元素是div的
4.从这些div中找父元素是.box2的
........
优化问题：
1.层级越多需要找的时间越久，耗时，尽量直接写class或者id来找，层级顶多3层。
2.尽量不要直接写div span a，因为页面上可能有很多a标签，span和div，会更耗时。
清除浮动
只介绍以下两种我用的，其他不赘述
1.（推荐）给浮动元素的父元素加上clearfix类
.clearfix{*zoom:1;}
.clearfix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
2.给浮动元素结尾处添加一个空的div,并且clear:both;
link 与 @import 的区别
1.link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css
2.当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载，从体验来说，link要由于@import
3.@import需要 IE5 以上才能使用
4.link可以使用 js 动态引入，@import不行
javascript数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
区别：
1.值类型变量是存放在栈区的（栈区指内存里的栈内存）
2.引用类型顾名思义只是引用，数据是存在堆内存中，如果内存中的值变化，那么引用它的变量也会变化
看下面栗子
var a = [1,2,3];
var b = a;
a.push(4);
console.log(b); // [1,2,3,4]
关于变量提升问题
JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
函数提升的优先级大于变量提升的优先级，即函数提升在变量提升之上
来看这一段代码
console.log(a,fun); // undefiend undefiend
var a = 1;
function fun(){}
那么，JS执行以上代码时，实际执行顺序是这样的
function fun(){}
var a;
console.log(a,fun);
a = 1;
函数声明和函数表达式的区别
- 函数声明
fn() //不会报错
function fn(){}
// 实际执行顺序为
function fn(){}
fn()
- 函数表达式 会将变量和函数拆分开来执行，存在变量提升问题
fn() //Uncaught TypeError:fn is not a function
var a = function(){}
// 实际执行顺序为
var a;
a();
a = function(){};
闭包
js常见面试题之闭包
script标签
1.
关于0.1 + 0.2 != 0.3的解决办法
parseFloat((0.1 + 0.2).toFixed(10))
关于['1','2','3'].map(parseInt)
console.log(['1','2','3'].map(parseInt)); // 1 NaN NaN
基于map方法，默认回传数组的（item,index,Arrar）。相当于执行了以下函数：
parseInt('1',0,['1','2','3'])
parseInt('2',1,['1','2','3'])
parseInt('3',2,['1','2','3'])
来看parsInt：
第一次，当我我们第一次调用的时候 是这样的：parseInt('1',0) 这个是没问题的 转十进制的 看我红框的图片返回 1
第二次，调用第二个index参数是1,也是说1作为数值的基础。规范里说的很清楚了，如果基础是非0或者小于2，函数都不会查询字符串直接返回NaN。
- 第三次，2作为基数。这就意味着字符串将被解析成字节数，也就是仅仅包含数值0和1。parseInt的规范第十一步指出，它仅尝试分析第一个字符的左侧，这个字符还不是要求基数的有效数字。这个字符串的第一个字符是“3”，它并不是基础基数2的一个有效数字。所以这个子字符串将被解析为空。函数将返回为NaN。
cookies与session有什么区别
由于http请求是无状态的，需要cookie来做身份验证
1.cookies由服务端创建，发送给浏览器端，当用户发出请求后，带上cookie发送给服务端做验证。
2.来回传递过程中，占用带宽，消耗网络资源,并且容易被中间人获取或浏览器端用户篡改十分不安全
3.cookies大小只有4k
1.session主要存在于服务端，不会被发送到浏览器所以很安全
2.如果没有设置过期时间，在会话结束后session会自动消失
3.session主要用于服务端保存请求信息的机制