面试题——1

1.什么是盒模型

  盒模型的属性：content(内容区）+padding(填充区）+border(边框区)+margin（外边界区）

标准盒子模型：元素宽度：width+padding+border+margin

怪异盒模型：属性：box-sizing:border-box(怪异盒模型）/content-box(标准盒模型）

元素宽度：width+左右外边距

padding:在盒子里面，盒子和内容之间，内边距

特点：padding属性对背景图片不起作用，控制同辈元素之间位置关系

           margin是元素边框以外的空白区，控制父子元素之间的位置关系

2.简单描述cookies,sessionStorage和localStorage的区别

cookies：网站为了标示用户身份而存储到用户本地终端上的数据（通常经过加密）

sessionStorage,localStorage仅在本地保存

存储大小：

cookie数据大小不能超过4k

sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

有期时间：

• localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
• sessionStorage 数据在当前浏览器窗口关闭后自动删除
• cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关

存储类型：

cookie存储的是字符串，字符串，字符串

localStorage存储的是对象，对象，对象

用法：

localStorage.setItem(key,value)

localStorage.getltem(key)

document.cookie=...

3.什么是跨域？如何解决跨域问题？

跨域：当一个请求url的协议，域名，端口三者之间任意一个与当前页面url不同

解决跨域：

1.JSOP

与后端协商好，在请求数据返回数据的时候以字符串的格式返回

原理：<script src="xxx"></script>不受同源策略的影响

window.callback=function(data){
  console.log('data',data)
}

2.CORS（跨资源共享）

后端设置响应头

   res.setHeader('Access-Control-Allow-Origin','xxx')

示范：

后端：

 前端：

 3.nginx代理跨域

4.什么是MVVM？

模型-视图-视图模型

M模型：后端传递的数据

V视图：所看到的页面DOM

VM视图模型：作为桥梁负责View和Model通信（Vue实例对象）

它有两个方向：一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

shi

 5.Vue是如何实现数据双向绑定？