刷面经笔记2019.01.28

1.CSS的盒子模型

包含元素内容content、内边距padding、边框border、外边距margin

box-sizing:border-box;content-box;inherit;

1)content-box:总宽度=margin+border+padding+width，即为标准模型；

2)border-box:总宽度=margin+width，即为IE模型；

3)inherit:继承父元素的border-sizing属性。

2.AJAX的readyState几种状态

0——初始化

1——载入

2——载入完成

3——解析

4——完成

3.常见的post提交数据方式对应的content-type取值

4种

1)application/x-www-form-urlencoded:数据被编码为名称/值对,这是标准的编码格式。

2)multipart/form-data:数据被编码为一条消息，页上的每个控件对应消息中的一个部分。

3)application/json:告诉服务端消息主体是序列化后的 JSON 字符串.

4)text/xml

4.清除浮动的几种方法

1)父级div定义伪类：after和zoom

.clearfloat::after {display:block; clear:both; content:" "; visibility:hidden; height:0;}

.clearfloat {zoom:1}

2)在结尾处添加空div标签clear：both

3)父级div定义height

4)父级div定义display:table

5)父级div也一起浮动

6)父级div定义overflow:auto/hidden（必须定义width或zoom:1，同时不能定义height，浏览器会自动检查浮动区域的高度）

5.Webpack解析ES6用的插件

babel-loader

6.移动端上click事件在某些浏览器有没有遇到延迟的问题

1)静止缩放

<meta name="viewport" content="width=device-width user-scalable='no' "> 或

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

2)引入fastclick.js

window.addEventListener(function(){

    FastClick.attach(document.body);

1},false)

7.HTTP的缓存机制

1)强制缓存：当所请求的数据在缓存数据库中尚未过期时，不与服务器进行交互，直接使用缓存数据库中的数据。

Expire / Cache-Control

2)协商缓存：从缓存数据库中取出缓存的标识，然后向浏览器发送请求验证请求的数据是否已经更新，如果已更新则返回新的数据，若未更新则使用缓存数据库中的缓存数据。

etag / last-modifind