面试题（1）

css

盒模型

所有元素都是长方形的盒子

三种盒模型

1. content-box(默认)
   Width = width + padding-left + padding-right + border-left + border-right
2. border-box
   Width = width(包含padding和border)

Width:盒子最终显示出的宽度， width:css中指定的宽度

外边距叠加

当垂直方向上的块级元素相邻时，margin会取最大的那个margin值，只形成一个外边距。

三种情况：

1. 元素自身叠加（空元素）
2. 相邻元素叠加 相邻的两个元素， 如果它们的上下边距相遇，即会产生叠加。
3. 包含（父子）元素叠加 包含元素的外边距隔着 父元素的内边距和边框， 当这两项都不存在的时候， 父子元素垂直外边距相邻， 产生叠加。 添加任何一项即会取消叠加。

解决方法

1. 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）
2. 创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠（注意这里指的是创建了BFC的元素和它的子元素不会发生折叠）

未知大小图片垂直居中

法一：绝对居中

        .parent {
            position: relative;
        }

        .child {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

法二：flex

        .parent {
            display: flex;
            justify-content: center;
            align-items: center;
        }

法三：transform

        .parent {
            position: relative;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

js

变量声明提升是什么

在js的编译阶段，变量声明，函数声明，函数表达式都会被提升到当前作用域的顶部，并且函数声明优先于变量声明和函数表达式。

js数据类型

string、number、boolean、undefined、null、object、symbol
typeof null 返回 'object'

call与apply区别

第二个参数不同，apply接受一个数组作为参数，call接受多个值作为参数。

JSON是什么

JSON是一种数据格式，本身是JS的一个严格子集。
用JS的语法表示对象、数组、数值、字符串、布尔值、和null，不支持undefined。

JQ的链式操作是什么

JQ中的方法的返回值是this，也就是当前的JQ对象，这样就可以通过返回值再次调用其他方法。

DOMContentLoaded是什么事件

当初始HTML文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架完成加载。另一个不同的事件 load
应该仅用于检测一个完全加载的页面。 在使用 DOMContentLoaded 更加合适的情况下使用 load
是一个非常流行的错误，所以要谨慎。

cookie localStorage sessionStorage

特性	cookie	localStorage	sessionStorage
数据的生命周期	由服务器设置过期时间，如果是在浏览器设置默认关闭浏览器失效	除非手动删除，否则一直存在	仅在当前会话下有效，关闭会话或浏览器后失效
存放数据的大小	一般4K，且有数量限制	一般5M	一般5M
与服务器通信	每次都会被携带在http头中	不参与与服务器通信	不参与与服务器通信
易用性	原生接口很差，交互很不方便	接口良好	接口良好

其他

GET请求与POST请求区别

1. get后退刷新无害，post要重新提交数据
2. get只能使用url编码，post可以使用其他编码
3. get数据显示在url中，post数据在request body中
4. get对数据长度有限制，因为数据在url中，而URL的长度的有限制。
5. get的语义是请求指定的资源，是安全的方法（只读），是幂等的（多次请求结果一样）
6. post的语义是对请求的资源进行处理，不安全，不幂等