前端基础面试题分享

这篇博客是我在复习时回顾的一些问题 答案在我认为可以说是比较完整的答案了 所以会整理的比较慢 虽然对于大佬们来说都是一些基础题 这个将会持续更新随时补充 毕竟学无止境嘛 如果有不对的 我也欢迎指正呀

开发过程中一般有些什么布局?

1.静态布局（Static Layout） 在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 意思就是不管浏览器尺寸具体是多少，
网页布局就按照当时写代码的布局来布置
2.弹性布局（Elastc Layout）
是CSS3引入的布局方式，其中flex-flow是flex-direction和flex-wrap属性的简写方式，
3.自适应布局（Adaptive Layout） 分别为不同的屏幕分辨率定义布局.可以看作是静态布局的一个系列。简言之看到的结果是页面里面元素
的位置会变化而大小不会变化；
4.流式布局（Liquid Layout） 页面元素的宽度按照屏幕进行适配调整。看到的结果是页面中元素的大小会变化而位置不会变化——这就
导致如果屏幕太大或者太小都会导致元素无法正常显示
5.响应式布局(Responsive Layout)
1)例如做到移动端网站时就必须要在头部head标签中写入如下的meta标签
2)每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变，就会用到媒体查询（media query）媒体查询是响应式布局的核心

清除浮动的方法

浮动对页面的影响：
　　　　如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.
　　　　由于父盒子的高度为0，
　　　　下面的元素会自动补位，所以这个时候要进行浮动的清除。
关于清除浮动的方式:
　　方式一:使用overflow属性来清除浮动
　　　　.ovh{
　　　　　　overflow:hidden;
　　　　　}
　　　　先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.
　　　　注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.
　　方式二:使用额外标签法
　　　　.clear{
　　　　　　clear:both;
　　　　　}
　　　　在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
　　　　　　a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.
　　　　　　b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.
　　　　注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.
　　方法三:使用伪元素来清除浮动(after意思:后来,以后)
　　　　.clearfix:after{
　　　　　　content:"";//设置内容为空
　　　　　　height:0;//高度为0
　　　　　　line-height:0;//行高为0
　　　　　　display:block;//将文本转为块级元素
　　　　　　visibility:hidden;//将元素隐藏
　　　　　　clear:both//清除浮动
　　　　　}
	　　　　.clearfix{
	　　　　　　zoom:1;为了兼容IE
	　　　　}
　　方法四:使用双伪元素清除浮动
　　　　.clearfix:before,
　　　　.clearfix:after {
					content: "";
					display: block;
					clear: both;
				}
				.clearfix {
					zoom: 1;
				}

apply，call和bind的使用及区别

1）apply，call和bind都是 用来改变this的指向，用于改变上下文的指向
2）apply和call会让当前函数立即执行，而bind会返回一个函数，后续需要的时候再调用执行
3)call其实是apply的一个语法糖，他们的作用都是用于改变上下文的指向，
区别在于，call  和bind接受多个参数，而apply接受的是一个数组 

什么是闭包（closure），为什么要用它？(这个想要说的更多可以更详细的可以看看我之前的博客十分钟简单理解闭包)

简单的理解是函数的嵌套形成闭包，闭包包括函数本身以及它的外部作用域
使用闭包可以形成独立的空间，延长变量的生命周期，保存中间状态值

常见用处

1.	使用闭包来解决：下面这个ul，如何点击每一列的时候alert其index？
(5分  必须使用闭包来做才得分  否则不得分)
<ul id="test">
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>
//js
 window.onload = function() {
        var lis = document.getElementById('test').children;
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = (function(i) {
                return function() {
                    alert(i)
                };
  
  第二种：
    window.onload = function() {
    var lis = document.getElementById('test').children;
    for (var i = 0; i < lis.length; i++) {
        (function(i) {
            lis[i].onclick = function() {
                alert(i);
            }
        }(i))
      
    };
}

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤：
1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，
浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。
这能使浏览器获得请求对应的 IP 地址。
2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。
该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。
该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经
被接受的报文。
3 .一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。
远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
4. 此时，Web 服务器提供资源服务，客户端开始下载资源。
这是一个比较简单的
如果觉得这个还不是很清楚或者不够深入可以看看下面的

列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个 （5分 全部写出来达到要求才得分 否则不得分）

对象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close() 

filter map foreach some every

什么是浏览器的同源策略? 跨域问题? 怎么解决? 跨域是如何产生的?

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，
则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，
它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。
所谓同源是指：域名、协议、端口相同。

跨域的解决方法
从上面我们了解到了浏览器同源策略的作用，也正是有了跨域限制，才使我们能安全的上网。但是在实际中，
有时候我们需要突破这样的限制，因此下面将介绍几种跨域的解决方法。

CORS（跨域资源共享）
CORS（Cross-origin resource sharing，跨域资源共享）是一个 W3C 标准，定义了在必须访问跨域资源时，
浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应
是应该成功，还是应该失败。
CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。
整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，
代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

JSONP 跨域
由于 script 标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建 script 标签，
然后利用 src 属性引入不同的脚本进行跨域，这也就是 JSONP 跨域的基本原理。

前端页面性能优化

1.避免页面中空的href和src：
  当<link>标签的href属性为空，或<script>、<img>、<iframe>标签的src属性为空时，
  浏览器在渲染过程中仍会将href属性或者src属性中的空内容进行加载，直至加载失败，这
  样就阻塞了页面中其他资源的下载进程，而且最终加载到的内容是无效的，因此要尽量避免
2. 减少 HTTP请求数
　在前端页面中，通常建议尽可能合并静态资源图片、JavaScript或CSS代码，减少页面请求数和资源请求消耗，
　这样可以缩短首屏加载时间，通过构建工具合并雪碧图、CSS、JavaScript文件等都是为了减少HTTP资源请求
　次数
3.避免使用CSS import引用加载CSS：
	CSS中的@import可以从另一个样式文件中引入样式，但应该避免这种用法，因为这样会增加CSS资源加载
	的关键路径长度，带有＠import的CSS样式需要在CSS文件串行解析到＠import时才会加载另外的CSS文件，
	大大延后CSS渲染完成的时间；
	
<!--不推荐-->
<style>
@import "path/main.css";
</style>

<!--推荐-->
<link rel="stylesheet" href="//cdn1.domain.com/path/main.css" >


   4.从设计实现层面简化页面
　　如果你的页面像百度首页一样简单，那么接下来的规则基本上都用不着了。
　　保持页面简洁、减少资源的使用时最直接的。如果不是这样，你的页面需要华丽的皮肤，则继续阅读下面的内容。

new 的四个功能

1.	创建一个空对象
2.	创建原型链, 将构造函数的原型指向
3.	将this指向这个对象
4.	返回新对象

库，插件和框架的区别

框架:
	提供了前端项目整体的解决方案，一系列定义好的数据结构和函数，一般用于作为一个软件的骨架，
	但程序真正的功能还需要开发者实现

库：
	是一系列预先定义好的数据结构和函数(对于面向对象语言来说，是类)的集合，程序员通过使用这些数据结构
	和函数实现功能，为解决某种特定需求的程序功能集合

插件：
	一般指软件系统的一部分，可以独立于整个系统进行开发与测试，具有可复用性

库和框架最大的区别在于：
	”控制反转“，当你使用一个库，你会调用库中的代码，当你使用一个框架，框架会调用你的代码，
	很多框架都是以库的形式发布的

库和矿机的区别(上个的补充)

参考库和矿机的区别
首先总结一下
其实框架和库的联系是很紧密的，我的理解就是不论是框架还是库都是为了提高我们开发的效率而存在的。库的使用上会简单一些，但是功能不是很全面，而框架的功能很全面但是需要我们按照它的规定去使用。
库和框架都是一种有别于软件、面向程序开发者的产品形式。正因为如此，也有很多人误以为库就是框架，或者认为指定语言的库就是框架。

库的英语为 Library ( 简写 Lib )，框架的英语为 Framework。
以jQurey为例，这就是轻量级的库，我们可以利用这个封装好的库区完成我们的想要的一些功能，甚至是我们可以去改写一些代码，库的使用几乎是没有什么约束的。
库是将代码集合成的一个产品，供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。
在函数库中的可直接使用的函数叫库函数。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。

框架则是为解决一个(一类)问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。可以说，框架是库的升级版。
我们依照框架的规定就可以很简单的完成一些事情，但是呢，我们不能去改变他只能按照他的要求去使用它。比如Vue，Angular等。
开发者在使用框架的时候，必须使用这个框架的全部代码。

框架和库的比较可以想像为:

假如我们要买一台电脑。框架为我们提供了已经装好的电脑，我们只要买回来就能用，但你必须把整个电脑买回来。这样用户自然轻松许多，但会导致
很多人用一样的电脑，或你想自定义某个部件将需要修改这个框架。而库就如自己组装的电脑。库为我们提供了很多部件，我们需要自己组装，如果某个部件
库未提供，我们也可以自己做。库的使用非常灵活，但没有框架方便。

swiper     jquery      fullpage     bootstrap    express      mui      字体图标

库 :  swiper   jquery     字体图标   fullpage   zepto    一般是专注于某一个功能

框架 :      bootstrap    mui    express    一般是提供一整套的解决方案

什么是面向对象?

面向对象是一种编程思想 js本身就是基于面向对象构建出来的，而js内有很多内置对象类，比如Promise就是es6
新增的内置类 js中的面型对象，和其他编程语言还是略有不同的 js中的类和实例是基于原型和原型链机制来处理的
二.面向对象的三大特征分别为：封装，继承和多态
1. 封装：低耦合高内聚
我们平时所用的方法和类都是一种封装，当我们在项目开发中，遇到一段功能的代码在好多地方重复使用的时候，我们可以 把他单独封装成一个功能的方法，这样在我们需要使用的地方直接调用就可以了。
优点：封装的优势在于定义只可以在类内部进行对属性的操作，外部无法对这些属性指手画脚，要想修改，也只能通过你定义的封装方法
2.多态：重载和重写
重载：方法名相同，形参个数或类型不一样(js中不存在真正意义上的重载，js中的重载指的是同一个方法，
根据传参不同，实现出不同的效果)
3. 继承 :
子类继承父类中的方法(目的是让子类的实例调取父类中的属性和方法)
优点：继承减少了代码的冗余，省略了很多重复代码，开发者可以从父类底层定义所有子类必须有的属性和方法，以达到耦合的目的；

理解es6中的暂时性死区?

   	ES6 规定，如果代码区块中存在 let 和 const 命令声明的变量，这个区块对这些变量从一开始就形成了
封闭作用域，直到声明语句完成，这些变量才能被访问（获取或设置），否则会报错ReferenceError。
这在语法上称为“暂时性死区”（英temporal dead zone，简 TDZ），即代码块开始到变量声明语句完成之间的区域
通过 let 声明的变量没有变量提升、拥有暂时性死区，作用于块级作用域：
	当进入变量的作用域（包围它的语法块），立即为它创建（绑定）存储空间，不会立即初始化，也不会被赋值
	访问（获取或设置）该变量会抛出异常 ReferenceError
	当执行到变量的声明语句时，如果变量定义了值则会被赋值，如果变量没有定义值，则被赋值为undefined
	  通过 const 声明的常量，需要在定义的时候就赋值，并且之后不能改变，暂时性死区与 let 类似。

异步加载的几种方式

1.<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element方法
但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作
所以还是会阻塞部分页面的初始化处理。

2.onload时的异步加载
这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，
这样就解决了阻塞onload事件触发的问题。
注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，
但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源
全部加载完毕。

3.$(document).ready()
需要引入jquery，兼容所有浏览器  
$(document).ready(function() {
     alert("加载完成！");
 });
 
4.<script>标签的defer="defer"属性
defer属性规定是否对脚本执行进行延迟，直到页面加载为止
如果脚本不会改变文档的内容，可将defer属性加入到<script>标签中，以便加快处理文档的速度
兼容所有浏览器
此方法可以确保所有设置了defer属性的脚本按顺序执行

5.es6模块type="module"属性
浏览器对于带有type=”module”的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，
再执行模块脚本，
等同于打开了<script>标签的defer属性 。如下：
<script type="module" src="XXX.js"></script>
ES6模块允许内嵌在网页中，语法行为与加载外部脚本一致，如下：
<script type="module">
   import utils from "./utils.js";
</script>

image和canvas在处理图片的时候有什么区别？

(1)	image是通过对象的形式描述图片的
(2)	canvas通过专门的API将图片绘制在画布上

写一个函数可以计算 sum(5,0,-5);输出0; sum(1,2,3,4);输出10; sum(“111”, 3, 4);输出7

function sum() {
    var result = 0;
    var arr = arguments;
    for (var i = 0; i < arr.length; i++) {
        var num = arguments[i];
        if (typeof num=='number') {
            result += num;
        };
    };
    return result;
}

Bootstrap中最多可以分多少列？lg、md、sm、xs这几个屏幕宽度的界限是多少？

12列
.col-xs- 超小屏幕手机 (<768px)
.col-sm- 小屏幕平板 (≥768px)
.col-md- 中等屏幕桌面显示器 (≥992px)
.col-lg- 大屏幕大桌面显示器 (≥1200px)

在Javascript中什么是伪数组？有哪些是伪数组, 列举两个例子? 如何将伪数组转化为标准数组？

伪数组（类数组）：
无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。
典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,
它们都返回NodeList对象都属于伪数组。
可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

请写出一个程序，在页面加载完成后动态创建一个form表单，并在里面添加一个input对象并给它任意赋值后义post方式提交到

window.onload=function(){
    var form=document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "http://127.0.0.1/save.php");
    var input=document.createElement("input");
    form.appendChild(input);
    document.body.appendChild(form);
    input.value="cxc";
    form.submit();//提交表单

}

CSS3有哪些新特性？

1. CSS3实现圆角（border-radius），阴影（box-shadow），
2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4. 增加了更多的CSS选择器  多背景 rgba 
5. 在CSS3中唯一引入的伪元素是 ::selection.
6. 媒体查询，多栏布局
7. border-image

请解释GET/POST的区别，以及请求参数放到url里和放到body里面的区别？ Post与Get区别：

GET请求，请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。URL的编码格式采用的是ASCII编码，而不是uniclde，
即是说所有的非ASCII字符都要编码之后再传输。
POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=bandsaw就是实际的传输数据。
因此，GET请求的数据会暴露在地址栏中，而POST请求则不会。

传输数据的大小
在HTTP规范中，没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中，对于GET，特定的浏览器和服务器对URL的长度有限制。							
在使用GET请求时，传输数据会受到URL长度的限制。
对于POST，由于不是URL传值，理论上是不会受限制的，但是实际上各个服务器会规定对POST提交数据大小进行限制，Apache、IIS都有各自的配置。

安全性
Get是Form的默认方法，安全性相对比较低。
请求参数放到url里和放到body里面的区别
首先，参数的存放位置我们无法直接指定，而是不同的请求方法参数传递的方式不同。
常用的HTTP请求主要为GET请求和POST请求两种，GET请求的参数会通过以跟随在URL后边以键值对的方式进行传递（例：key1=a&key2=b&key3...)；而POST请求的参数会通过HEADER进行传递。考虑到安全性的问题，可以确定两者都不安全，原因是HTTP请求可以被轻易抓包和截获，其中的请求参数值自然会很容易被获取。

ajax请求的时候get 和post方式的区别( 重点（查询与提交, 及安全性和长度限制）

get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url地址当中，
如果传递中文参数，需要自己进行编码操作，安全性较低。
post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，
数据不会暴漏在url地址中。

css有个content属性是属于什么属性？有什么作用？有什么应用？

css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动
	//一种常见利用伪类清除浮动的代码
	.clearfix:after {
	    content:"."; //这里利用到了content属性
	    display:block; 
	    height:0;
	    visibility:hidden; 
	    clear:both; }
	.clearfix { 
	    *zoom:1; 
	}
after伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动

解释jsonp的原理，以及为什么不是真正的ajax

Jsonp并不是一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，
具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，
该脚本的内容是一个函数调用，参数就是服务器返回的数据，
为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术

AJAX请求数据步骤是什么？传输的数据是用的暗文还是明文？

var xhr；
xhr = new XMLHttpRequest()； //创建一个异步对象
xhr.open("Get"，"test.ashx"， true)；//Get方式括号中的三个参数分别为：1.发送请求的方式 2.样请求的页面 3.是否异步
//xhr.open("post"，"test.ashx"，true)；
//xhr.setRequestHeader("Content-Type"，"application/x-www-form-urlencoded")； Post方式发送数据

//这个回调函数主要用来检测服务器是否把数据返回给异步对象
xhr.setRequestHeader("If-Modified-Since"，"0")；//设置浏览器不使用缓存
xhr.onreadystatechange = function () {
if (xhr.readystate == 4) {
//readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
//0：未初始化。对象已经创建，但还未初始化，即还没调用open方法；
//1：已打开。对象已经创建并初始化，但还未调用send方法；
//2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
//3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
//4：已加载。所有数据接收完毕
if(xhr.status==200){ //检测服务器返回的响应报文的状态码是否为200
	alert(xhr.responseText)；//服务器返回的Response数据
	//解析服务器返回的jason格式的数据
	var s=xhr.responseText；
	var json=eval("("+s+")")；
	alert(jason.data)；
	}
}；
}；
xhr.send(null)；//异步对象发送请求
//xhr.send("txtName=roger&txtPwd=123")； 以post方式发送数据

ajax中get和post方式请求数据都是明文的。

谈谈js作用域和闭包？

简单的说，作用域是针对变量的，比如我们创建一个函数a1，函数里面又包了一个子函数a2。此时就存在三个作用域：
全局作用域－a1作用域－a2作用域；即全局作用域包含了a1的作用域，a2的作用域包含了a1的作用域。
当a1在查找变量的时候会先从自身的作用域区查找，找不到再到上一级a2的作用域查找，如果还没找到就到全局作用域区查找，
这样就形成了一个作用域链。
理解闭包首先要理解，js垃圾回收机制，也就是当一个函数被执行完后，其作用域会被收回，如果形成了闭包，执行完后其作用域就不会被收回。
如果某个函数被他的父函数之外的一个变量引用，就会形成闭包。
闭包的作用，就是保存自己私有的变量，通过提供的接口（方法）给外部使用，但外部不能直接访问该变量。

什么是原型链？

Javascript是面向对象的，每个实例对象都有一个__proto_属性，该属性指向它原型对象，
这个实例对象的构造函数有一个原型属性prototype，
与实例的__proto__属性指向同一个对象。当一个对象在查找一个属性的时，自身没有就会根据__proto__ 向它的原型进行查找，
如果都没有，则向它的原型的原型继续查找，直到查到Object.prototype._proto_为nul，这样也就形成了原型链。

实现继承的方法有什么 至少写三种？我之前的博客写的更为详细可以参考js的继承

（1）借用构造函数。也叫伪造对象或经典继承。
思路：在子类构造函数的内部调用超类型构造函数。可以通过使用apply（）和call()方法在新创建的对象上执行构造函数。
缺点：方法都在构造函数中定义，函数的复用就无从谈起。在超类型的原型中定义的方法，对子类而言也是不可见的，结果所有的类型都只能
使用构造函数模式。
 
（2）组合继承。也叫伪经典继承。指的是将原型链和借用构造函数的技术组合到一起，从而发挥二者之长。
思路：使用原型链实现对原型属性属性和方法的继承，通过借用构造函数来实现实例属性的继承。
优点：既通过在原型上定义方法实现了函数复用，又能保证每一个实例都有它自己的数组。
组合继承避免了原型链和借用构造函数的缺陷，融合了他们的优点，成为JavaScript中常用的继承模式。

（3）原型链继承。
思路：借助原型可以基于已有的对象创建对象，同时还不必因此创建自定义类型。
在object()函数内部，先创建一个临时的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例。

Function object(o){
Function  F(){}；
F.prototype=o；
Return new F()；
}

（4）寄生式继承。
思路：创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真的是它做了所有的工作一样返回对象。

Function createAonter(original){
Var clone=object(original)；//通过调用函数创建一个新对象
Clone.sayHi=function(){   //以某种方式来增强这个对象
Alert(“hi”)；
}
Return clone； //返回这个对象
}
缺点：使用寄生式继承来为对象添加函数，会由于不能做到函数复用二降低效率，这一点和构造函数模式类似。
（5）寄生组合式继承。是JavaScript最常用的继承模式。
思路：通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。
本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。
开发人员普遍认为寄生组合式继承时引用类型最理想的继承范式。
Extend（）方法才用了这样的方式。

Axios是什么

Axios是基于promise用于浏览器和nodejs的HTTP客户端，本质上是对原生XHR的封装，只不过这是promise的实现版本，符合最新的ES规范
特征：
	1.在浏览器中发送 XMLHttpRequests 请求；
	2.在 node.js 中发送 http请求；
	3.基于 promise 的 HTTP 库，支持promise所有的API
	4.拦截请求和响应；（修改请求数据，只能用在'PUT','POST'和'PATCH'这几个请求方法）
	5.转换请求和响应数据,响应回来的内容自动转换；
	6.自动转换 JSON 数据；
	7.客户端支持保护安全免受 XSRF 攻击

Vue实现数据双向绑定的原理

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，
getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，
Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter，用户看不到 getter，但是在内部它们让 Vue 追踪依赖，
在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化
通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，
达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

什么是MVVM？

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，
也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，
ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 
因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，
因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。
mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
 场景：数据操作比较多的场景，更加便捷

MySQL和mongoDB的区别

mysql
特点：
类型：关系型数据库
查询语句：查询语句是使用传统的sql语句
存储方式：在不同的引擎上有不同 的存储方式
数据处理：在不同的引擎上有不同 的存储方式
架构特点：常见的有单点、M-S、MHA、MMM、Cluster等架构方式

优势：
关系型数据库

缺点：
在海量数据处理的时候效率会显著变慢。

mongodb
特点：
类型：非关系型数据库（nosql文档型数据库）。
查询语句：是独特的Mongodb的查询方式。
存储方式：虚拟内存+持久化。
数据处理：数据是存储在硬盘上的，只不过需要经常读取的数据会被加载到内存中，将数据存储在物理内存中，从而达到高速读写。
架构特点：可以通过副本集，以及分片来实现高可用。

优点：
快速：在适量级的内存的Mongodb的性能是非常迅速的，它将热数据存储在物理内存中，使得热数据的读写变得十分快。高扩展性，
存储的数据格式是json格式！
高扩展：Mongodb的高可用与集群架构有高扩展性，可以通过物理机器的增加，以及 sharding的增加。
failover机制：副本集配置中，当主库遇到问题，副本集就会选取一个新的主库来提供服务。
json存储格式：适合文档格式的存储与查询

缺点：
不支持事务。

使用场景
mongodb
适合：
（1） 表结构不明确且数据不断变大
MongoDB是非结构化文档数据库，扩展字段很容易且不会影响原有数据。内容管理或者博客平台等，例如圈子系统，存储用户评论之类的。
（2）更高的写入负载
MongoDB侧重高数据写入的性能，而非事务安全，适合业务系统中有大量“低价值”数据的场景。本身存的就是json格式数据。例如做日志系统。
（3）数据量很大或者将来会变得很大
Mysql单表数据量达到5-10G时会出现明细的性能降级，需要做数据的水平和垂直拆分、库的拆分完成扩展，MongoDB内建了sharding、
很多数据分片的特性，容易水平扩展，比较好的适应大数据量增长的需求。
（4）高可用性
自带高可用，自动主从切换（副本集）

不适合：
（1）MongoDB不支持事务操作，需要用到事务的应用建议不用MongoDB。
（2）MongoDB目前不支持join操作，需要复杂查询的应用也不建议使用MongoDB。

实际使用场景
关系型数据库适合存储结构化数据，如用户的帐号、地址：
（1）这些数据通常需要做结构化查询，比如join，这时候，关系型数据库就要胜出一筹
（2）这些数据的规模、增长的速度通常是可以预期的
（3）事务性、一致性
　　
NoSQL适合存储非结构化数据，如文章、评论：
（1）这些数据通常用于模糊处理，如全文搜索、机器学习
（2）这些数据是海量的，而且增长的速度是难以预期的，
（3）根据数据的特点，NoSQL数据库通常具有无限（至少接近）伸缩性
（4）按key获取数据效率很高，但是对join或其他结构化查询的支持就比较差

将 mongodb 作为类似 redis，memcache 来做缓存 db，为 mysql 提供服务，或是后端日志收集分析；亦或是仅作日志收集分析。

HTML、XML、XHTML 有什么区别?

HTML即是超文本标记语言（Hyper Text Markup Language），是最早写网页的语言，但是由于时间早，规范不是很好，大小写混写且编码不规范,是语法较为松散的、不严格的Web语言

XHTML是升级版的html（Extensible Hyper Text Markup Language），对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言。实际上XHTML 与 HTML 4.01 标准没有太多的不同。

XML是可扩展标记语言（Extensible Markup Language），是一种跨平台语言，编码更自由，可以自由创建标签（
比如像下面这样创建：

<note><to>Tove</to><from>Jani</from><heading>Reminder</heading>
<body>Don't forget me this weekend!</body></note>

），主要用于存储数据和结构，可扩展

HTML和XML的区别：
XML 被设计用来传输和存储数据，其焦点是数据的内容。
HTML 被设计用来显示数据，其焦点是数据的外观。
HTML 旨在显示信息，而 XML 旨在传输信息。
XML在定义标记时区分大小写，而HTML标记不区分大小写。
HTML和XHTML的区别：
XHTML 元素必须被正确地嵌套。

例如：XHTML必须要这样<b><i>This text is bold and italic</i></b>
而在 HTML 中，某些元素可以像这样彼此不正确地嵌套：
<b><i>This text is bold and italic</b></i>

XHTML 元素必须被关闭。

例如<p>This is a paragraph</p>===>>这是正确的
<p>This is a paragraph===>>这是错误的

标签名必须用小写字母。

例如: <p>This is a paragraph</p>==>>这是正确的
<P>This is a paragraph</P>===>>这是错误的

XHTML 文档必须拥有根元素。
所有的 XHTML 元素必须被嵌套于 根元素中

行内元素有哪些？块级元素有哪些?css的盒模型?

块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
CSS盒模型:内容，border ,margin，padding

.CSS引入的方式有哪些？limk和@import的区别是？

1.内联样式（行内样式/行间样式）：直接写在HTML标签中的style属性中添加CSS。

	<p style="color: #00AFC7; font: arial;"></p>

2.内部样式：在 HTML 头部中的

3.外部样式：需要引用才能生效
1.链接方式：指的是使用 HTML 头部的 标签引入外部的 CSS 文件。

		<head>
    		<link rel="stylesheet" type="text/css" href="style.css">
		</head

2.导入方式：指的是使用 CSS 规则引入外部 CSS 文件。

		<style>
		@import url(style.css);
		</style

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

position包含几种属性？absolute和relative的区别

static(默认属性)：当没有给元素设置position时默认为static
absolute（绝对定位）相对于父级第一个设置了position属性进行定位（没有则相对于body，static除外），
top，left，bottom，right均是相对于这个父元素的偏移量
relative（相对定位）：在元素原来的位置上进行定位，top，left，bottom，right的值相当于原来位置的
偏移量
fixed（固定定位）：相对于浏览器视口的定位，不会随着滚动条的滚动而滚动，top，left，
bottom，right的值相当于浏览器窗口的定位

区别
1.absolute和relative都会使元素脱离文档流，但不同的是，absolute脱离文档流后不会占用原来的位置，而relative会在原来的位置上留下一个副本占用原来文档流的位置
2.absolute的父元素设有position时，top,left,bottom,right会忽略父级元素的padding值，即始终与父级元素的左上角进行定位，且其层级会始终比父级高，无论父级设置多大的z-index，但relative的定位会受父元素padding值影响
3.absolute是以第一个设置了position的父元素或祖先元素进行定位，而relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式

JavaScript的typeof返回哪些数据类型

	Undefined
	string
	boolean
	number
	symbol(ES6)
	Object
	Function

例举3种强制类型转换和2种隐式类型转换？

强制（parseInt,parseFloat,number）
	隐式（== – ===）

split() join() 的区别

（1）split()用于分割字符串，返回一个数组
（2）join()用于连接多个字符或字符串，返回值为一个字符串；

事件绑定和普通事件有什么区别？代码表示并说明

普通事件：
	var btn = document.getElementById("hello");
	btn.onclick = function(){
    		alert(1);
	}
	btn.onclick = function(){
    		alert(2);
	}
	//执行上面的代码只会alert 2
事件绑定：	
	var btn = document.getElementById("hello");
	btn.addEventListener("click",function(){
    		alert(1);
	},false);
	btn.addEventListener("click",function(){
   		alert(2);
	},false);

//执行上面的代码会先alert 1 再 alert 2
区别：
普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式
添加事件可以添加多个。addEventListener不兼容低版本IE
普通事件无法取消
addEventLisntener还支持事件冒泡+事件捕获

ajax请求时，如何解释json数据？

前端在解析后端发来的数据,使用JSON.parse()方法把字符串转为json对象.
前端在向后端发送数据,使用JSON.stringify()方法把json对象转为字符串.

html语义化的好处

1.有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
4.支持多终端设备的浏览器渲染。

事件委托是什么？

事件代理（event delegation）：事件代理又称事件委托，是javaScript中绑定事件的常用技巧。
顾名思义，‘事件代理’就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听。
事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能

添加 删除 替换 插入到某个接点的方法？

js：
appendChild()	//添加
RemoveChild()  //删除节点
insertBefore（插入节点，被插节点）//插入（前插后）
replaceChild（新节点,旧节点）//替换（前替换后）
jq：
append() （旧节点添加新节点后面）
appendTo() （新节点添加到旧节点后面）
prepend() （旧节点添加新节点的前面）
prependTo() （新节点添加到旧节点的前面）
//添加
remove()	//删除
empty()  //清空

after() ______// 旧节点后面插入 新节点
before() ______ //旧节点前面插入 新节点
insertAfter() ________//新节点插到旧节点后
insertBefore() _________//新节点插到旧节点前
//插入
replaceWith()

“ == ”和“===”的不同？

== 抽象相等，比较时，会先进行类型转换，然后再比较值。
=== 严格相等，会比较两个值的类型和值。
在明确知道操作数的数据类型情况下，建议使用===；否则，使用 ==。

编写一个数组去重的方法

function unique (arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
     if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i]);
     }
    }
    return newArr;
   }
    unique(['c','a','s','a','d','c','a'])

简述同步和异步的区别

同步就相当于是 当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。
当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。

异步就是，当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，
这样节约了时间，提高了效率。

存在就有其道理 异步虽然好 但是有些问题是要用同步用来解决，比如有些东西我们需要的是拿到返回的
数据在进行操作的。这些是异步所无法解决的。

什么是事件冒泡/捕获？

事件冒泡：子元素事件的触发会影响父元素事件；
     开关事件冒泡：
     A，开启事件冒泡：element.addEventListener(eventName，handler，false)；
     B，关闭事件冒泡：假设传统方式事件的返回值为e，就可以通过e.stopPropagation()来关闭事件冒泡；
事件捕获：父元素的事件会影响子元素的事件；
     开启事件捕获：element.addEventListener(eventName，handler，true)

如何判断一个数组是数组 至少写三种？

1.[] instanceof Array   true/false
2. arr.constructor == Array   true/false
3. ES5：Array.isArray()   true/false
4.Object.prototype.toString.call([])==="[object Array]"true/false
5.目前完美方法
function isArray(value){
if (typeof Array.isArray === "function") {
return Array.isArray(value)；
    }else{
return Object.prototype.toString.call(value) === "[object Array]"；
    }
}

Jquery .on这个方法怎么看？

jQuery.on()方法是官方推荐的绑定事件的一个方法。
$(selector).on(event，childSelector，data，function，map)
多个事件绑定同一个函数
$(document).ready(function(){
  $("p").on("mouseover mouseout"，function(){
    $("p").toggleClass("intro")；
  })；
})；
多个事件绑定不同函数
$(document).ready(function(){
  $("p").on({
    mouseover：function(){$("body").css("background-color"，"lightgray")；}，
    mouseout：function(){$("body").css("background-color"，"lightblue")；}，
    click：function(){$("body").css("background-color"，"yellow")；}  
  })；
})；
绑定自定义事件
$(document).ready(function(){
  $("p").on("myOwnEvent"， function(event， showName){
    $(this).text(showName + "! What a beautiful name!").show()；
  })；
  $("button").click(function(){
    $("p").trigger("myOwnEvent"，["Anja"])；
  })；
})；
传递数据到函数
function handlerName(event) 
{
  alert(event.data.msg)；
}
$(document).ready(function(){
  $("p").on("click"， {msg："You just clicked me!"}， handlerName)
})；
适用于未创建的元素(事件委托)
$(document).ready(function(){
  $("div").on("click"，"p"，function(){
    $(this).slideToggle()；
  })；
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button")；
  })；
})

如何查找构造函数和原型中的属性？

构造函数.prototype  查看构造函数的原型属性
实例对象.__proto__ 查看实例对象的构造函数的原型
实例对象.__proto__.constructor 查看实例对象的构造函数

说说你对this的理解？

this是一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
1.作为纯粹的函数调用 this指向全局对象
2.作为对象的方法调用 this指向调用对象
3.作为构造函数被调用 this指向新的对象（new会改变this的指向）
4.apply调用 this指向apply方法的第一个参数
5.箭头函数中，this指向父级执行上下文中的this

原生JS的window.onload与Jquery的$(document).ready(function())，$(function () {})有什么不同？

1.	执行时间 
		window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
		$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 
  	2.编写个数不同 
		window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 
		$(document).ready()可以同时编写多个，并且都可以得到执行  
	3.简化写法 
		window.onload没有简化写法 
		$(document).ready(function(){})可以简写成$(function(){})；

简述在jQuery中.eq()和.get()的异同？

相同：
get() ：取得其中一个匹配的元素。数字序号表示取得第几个匹配的元素
eq()：获取第N个元素，下标都是从0开始， 用法基本相同。

不同：
get返回的是一个html 对象数组；不能调用jQuery的其他方法；
eq返回的是一个jquery对象； 返回的是jQuery对象，就可以继续调用其他方法。

简述for in 循环的特点及使用场景

for...in 语句用于对数组或者对象的属性进行循环操作。
for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。
for (变量 in 对象){
    在此执行代码
}
“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。
注意：for in循环不会按照属性的下标来排列输出。

Javascript内置的常用对象有哪些？并列举四个, 并列举出该对象常用的四个

Arguments 函数参数集合
arguments[ ] 函数参数的数组 
Arguments 一个函数的参数和其他属性 
Arguments.callee 当前正在运行的函数 
Arguments.length 传递给函数的参数的个数
Array 数组
length属性：动态获取数组长度
join()：将一个数组转成字符串。返回一个字符串。
reverse()：将数组中各元素颠倒顺序
delete运算符：只能删除数组元素的值，而所占空间还在，总长度没变(arr.length)。
Date 日期时间
Date.getDate( ) 返回一个月中的某一天 
Date.getDay( ) 返回一周中的某一天 
Date.getFullYear( ) 返回Date对象的年份字段 
Date.getHours( ) 返回Date对象的小时字段 
Error 异常对象
Error.toString( ) 把Error对象转换成字符串 
EvalError 在不正确使用eval()时抛出 
SyntaxError 抛出该错误用来通知语法错误 
RangeError 在数字超出合法范围时抛出 
ReferenceError 在读取不存在的变量时抛出 
TypeError 当一个值的类型错误时，抛出该异常 
Math 数学对象
Math对象是一个静态对象
Math.PI：圆周率。
Math.abs()：绝对值。
Math.ceil()：向上取整(整数加1，小数去掉)。
Math.floor()：向下取整(直接去掉小数)。
Math.round()：四舍五入。
正则  字符串   布尔都可以

Html5重要的新的表单元素有哪些(至少举例5个)？

email 输入email格式
tel 手机号码
url 只能输入url格式
number 只能输入数字
search 搜索框
range 范围
color 拾色器
time	时间
date 日期 不是绝对的
datetime 时间日期
month 月份
week 星期
部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

HTML5中的本地存储概念是什么？生命周期有多长？有些什么方法?

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，
会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有
4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。HTML5 storage提供了
一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，
区别是它是为了更大容量存储设计的。
1特性
1、设置、读取方便
2、容量较大，sessionStorage约5M、localStorage约20M
3、只能存储字符串，可以将对象JSON.stringify() 编码后存储
2window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享
3window.localStorage
1、永久生效，除非手动删除
2、可以多窗口共享
4相关的一些方法详解
setItem(key， value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容

’data-’属性的作用是什么？如何获取’data-’属性的值？

data-属性是H5中的，用来自定义属性，通过dataset属性获取。
不是所有的浏览器都支持，不支持用getAttribute获取。

请描述一下cookie，sessionStorage和localStorage的区别？

cookies兼容所有的浏览器，Html5提供的storage存储方式。
①　Document.cookie
②　Window.localstorage
③　Window.sessionstorage
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以
cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，
但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期
时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有
同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

浏览器兼容问题以及css hack

CSS兼容
1.不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
css 里增加通配符 * { margin: 0; padding: 0; }
2.图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加上问题一中提到的
通配符也不起作用。
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道
3.opacity多浏览器透明度兼容问题
pacity是css3里的属性，只有部分浏览器支持
4.margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍，
由于下划线_width只有IE6可以识别
.kwstu{margin-left:20px;_margin-left:20px;}
所以此样式在IE6中实际设置对象的宽度为200px
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

前端性能优化-重绘与回流

HTML加载时发生了什么
　　在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。
　　浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体
　　DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree，但区别很大，因为render tree能识别样式，render tree中每个NODE都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。我自己简单的理解就是DOM Tree和我们写的CSS结合在一起之后，渲染出了render tree.

回流
　　当render tree中的一部分或全部因为元素的规模尺寸、布局、隐藏等改变时，浏览器重新渲染部分DOM或全部DOM的过程
　　称为回流。

每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

重绘
　　当页面元素样式改变不影响元素在文档流中的位置时（如background-color，border-color，visibility），浏览器只会将新样式赋予元素并进行重新绘制操作。

回流必将引起重绘，而重绘不一定会引起回流。

一般项目流程

先和甲方拿需求,开会,产品经理和后端进行逻辑的磨合确认,后端开始写接口,
写原型图和ui图,就可以开 始写前端页面了