yy - 代码天地

请写出一个让元素旋转一周的动画关键帧。

@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

说说你所知道解决跨域问题的方案，越多越好。

flash，iframe，jsonp，本地代理，postMessage，http请求头设置Access-Control-Allow-Origin

有如下一段css和html结构，最终#box的宽度和高度分别是多少？

Html部分：
<div id="box"></div>
CSS部分：
#box { width: 100px; height: 50px; margin: 5px 2px 3px; padding:
  3px 2px 1px; border: 3px solid #000; }

width: 110px; height: 60px

从视觉上隐藏一个dom元素，既不考虑隐藏后是否占位，说说你所知道的所有方法。

① display: none;
② visibility: hidden;
③ position: absolute; left: -99999px; top: -99999px;
④ width: 0; height: 0; overflow: hidden;
margin: -99999px 0 0 -99999px;
⑤ opacity: 0;
⑥ transform: scale(0);

px、em、rem的区别是什么？

px的值是固定的，是指像素单位。
 - 使用px会在浏览器放大或缩小的页面布局被打破

em的值不是固定的，相对于父元素的字体大小。
 - 浏览器默认字体大小是16px
 - 默认会在一开始全局设定font-size: 62.5%，这样以后1em = 10px

rem的值也不是固定的，相对于html节点的字体大小；

用CSS分别定义IE6、7、8的width属性，使其在IE6下的值为10px，IE7为20px，IE8为30px？

:root { width: 10px\0; +width: 20px; _width: 10px; } 注意顺序不可颠倒

请写出一个立即调用的匿名函数（）。

(function(){})()

Gecko、Webkit、Tridentr的私有样式前缀分别是（）。

-moz、-webkit、-ms

圆角的CSS3代码是：（）

border-radius

使用（）可以将JSON格式的数据转换为字符串格式。

JSON.stringify

请写出获取客户端系统当前时间时间戳的代码：_（）。

new Date().getTime()

在页面的head标签内，使用可以让移动设备的页面宽度等于设备的宽度。

width=device-width

内联元素和块元素的区别是（）。

【换行】
块级元素会独占一行.
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.

元素种类	width/height	padding/margin
块级元素	可设置	可设置
行内替换	可设置	可设置
行内非替换	不能设置，由实际内容决定	只在水平方向上有效

块级元素对应于display:block
行内元素对应于display:inline

用CSSHack写出IE6、7、8下的width:10px？

_width:10px\9;*width:10px;_width:10px;

前端页面分别由哪三层构成？

结构HTML，表现CSS，行为JS

请用html和css实现以下效果（移动设备），要求①三个圆形icon大小为80px，固定不变，②被三个圆形icon划分的四个间距相等，③黑色背景需要占满移动设备的宽度

这里写图片描述

①、插入四个空标签，设置flex:1
<ul class="share-list">
    <li class="gap"></li>
    <li class="share-item"></li>
    <li class="gap"></li>
    <li class="share-item"></li>
    <li class="gap"></li>
    <li class="share-item"></li>
    <li class="gap"></li>
</ul>
.share-list{
    display: flex;
}
.share-item{
    width: 80px;
    height: 80px;
}
.gap{
    flex: 1;
    width: 1%;
}

双边框

用box-shadow或outline
Box-shadow: background:yellow;
Box-shadow: 0 0 0 5px red,
0 0 0 10px black;
Outline: background:yellow;
border: 5px solid red,
outline:5px solid black;

简单陈述下你对MVC框架的理解

MVC 是一种使用 MVC（模型-视图-控制器）设计创建 Web 应用程序的模式：
Model（模型）：表示应用程序核心；
View（视图）：显示数据；
Controller（控制器）：处理业务；
这里写图片描述
所有通信都是单向的；
本质是：将数据展示和数据进行隔离，提高代码的复用性和扩展性。
MVC 模式的这三个部分的职责非常明确，而且相互分离，因此每个部分都可以独立的改变而不影响其他部分，从而大大提高了应用的灵活性和重用性；

简单陈述下你对MVVM的理解

当controller（控制器）变得很大，混杂了各种逻辑，越来越难以维护：
这里写图片描述
① 一切都和ViewModel交流
② View和Model之间没有联系；
① 视图中数据的变化会同步到数据源；
② 数据源的修改会反应到视图中。

那些操作会造成内存泄漏？

会造成内存泄漏的操作：
1、闭包引起的内存泄漏；
2、意外的全局变量引起的内存泄漏；
3、没有清理的DOM元素引起的内存泄漏；
4、被遗忘的定时器或者回调函数；
5、子元素存在引用引起的内存泄漏；

ECMAScript和javaScript的关系

javaScript包含核心（ECMAScript）、文档对象模型（DOM）、游览器对象模型（BOM）
ECMAScript是JavaScript的规范，JavaScript是ECMAScript的实现。

sass是什么？它有哪些好处和坏处？

是CSS预处理器。
比CSS多出很多功能：变量、函数、嵌套、运算、颜色处理等；
缺点：
1 css的文件大小、复杂度不可控制；
2 调试难度增加等

background-position:top left,其中top，left对应的css盒子模型中的哪个矩形框的左上角，可以修改它的默认值吗？如果可以如何修改

1.对应border（边框）矩形的左上角。
2.可以。使用background-origin.
background-origin:border-box | padding-box | content-box.
padding-box：背景图下相对于内边距定位。
border-box：背景图像从边框开始显示。
content-box：背景图像从内容开始显示。

null和undefined的区别，null == undefined的结果是？

null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。
当声明的变量还未被初始化时，变量的默认值为undefined。
null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。

Doctype 严格模式与混杂模式的区别在哪里?

解析方式不同
严格模式：按照w3c标注解析渲染页面，以浏览器支持的最高标准运作。（如果页面上有完整的dtd声明则是严格模式）
混杂模式：页面以宽松的向后兼容的方式显示。（即可实现IE5.5以下版本浏览器的渲染方式）

请使用CSS3画出一个线性渐变，渐变的方向是从右上角到左下角，起点颜色是从白色到黑色，请写出标准的写法 1

background: linear-gradient(to bottom left, #fff, #000)

请写出HTML5新增的布局标签

header、hgroup、nav、aside、section、article、footer、figure、menu

在ES6中提供了_ 1 _用于二进制的操作。

ArrayBuffer、TypeArray、DataView

请用HTML5+CSS3实现左中右的三列布局（图1），默认内容宽度为960px并居中，里面的六种颜色可自由配色，但不能超过七种色彩；当窗口宽度小于960px并大于768px时，变成（图2）的布局；当窗口宽度小于768px时，变成（图3）的布局。（10分）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise</title>
<style>
html,body{
width: 100%;
margin: 0;
padding: 0;
font-size: 0;
}
.left{
background: green;
}
.right{
background: purple;
}
.pink-color{
background: pink;
box-sizing: border-box;
border: gray 10px solid;
}
.yellow-color{
background: yellow;
box-sizing: border-box;
border: gray 10px solid;
}
.black-color{
background: black;
box-sizing: border-box;
border: gray 10px solid;
}
.container{
width: 100%;
margin: 0 auto;
}
@media (min-width: 960px){
.container{
width: 960px;
}
.left{
width: 16.6%;
height: 300px;
display: inline-block;
}
.center{
display: inline-block;
width: 74.999%;
font-size: 0;
height: 300px;
}
.right{
display: inline-block;
width: 8%;
height: 300px;
}
.pink{
width: 100%;
display: inline-block;
height: 33.3%;
}
.yellow{
width: 25%;
display: inline-block;
height: 33.3%;
}
.black{
width: 50%;
display: inline-block;
height: 33.3%;
}
}
@media (min-width: 768px) and (max-width: 960px) {
.container{
width: 960px;
margin: 0 auto;
}
.pink,.yellow,.black{
width:100%;
height: 100px;
}
.center{
float: left;
width: 33.3%;
border: 10px white solid;
border-top: 0;
}
.left{
float: left;
width: 30%;
height: 100px;
}
.right{
float: left;
width: 33.3%;
height: 100px;
}
}
@media (max-width: 768px){
.container{
width: 100%;
height: 100px;
}
.left,.right{
width: 100%;
display: block;
height: 100px;
}
.center{
width: 100%;
}
.pink,.yellow,.black{
width: 100%;
height: 100px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center">
<div class="pink pink-color "></div>
<div class="yellow yellow-color"></div>
<div class="yellow yellow-color"></div>
<div class="black black-color"></div>
<div class="black black-color"></div>
<div class="yellow yellow-color"></div>
<div class="yellow yellow-color"></div>
</div>
<div class="right"></div>
</div>
</body>
</html>

请用js实现一个简单的双向循环链表，定义出类的成员变量和主要方法，并实现从链表头部插的方法，尽量用ES6完成。

class Chain {
 constructor() {
 this.size = 0;
 this.head = null;
 }
 travel() { } // 遍历
 getHead() { } // 得到链表head
 insertHead(data) {
 let node = new Node();
 this.size++;
 if (this.head === null) {
 node.prev = node;
 node.next = node;
 this.head = node;
 } else {
 let p = this.head;
 node.prev = p.prev;
 node.next = p;
 p.prev.next = node;
 p.prev = node;
 }
 }
}
class Node {
 constructor(data) {
 this.next = null;
 this.prev = null;
 this.data = data;
 }
}

请实现一个闭包，并说明它的作用。

function getCounter(){
var i = 0;
return function(){
i++;
console.log(i);
}
}
var counter=getCounter();
counter();

你觉得https和http的区别是什么？有什么优点和缺点？

区别：【能答对一半即可】
1. http 的URL 以http:// 开头，https以https:// 开头
2. http 标准端口是80 ，https是443
3.https 协议需要到ca申请证书，http不需要。
4.http 是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议
5.http 的连接很简单,是无状态的，https协议是由SSL+http协议构建的可进行加密传输、身份认证的网络协议要比http协议安全
优点：
1. 通过证书可以更信任服务器
2. 更安全，防篡改
缺点：
1. https 需要证书。
2. 因为对传输进行加密，会一定程度增加cpu消耗。
3. 由于https 要还密钥和确认加密算法的需要，所以首次建立连接会慢一些。
4. 带宽消耗会增加。

什么是TCP中的RTT和RTO？

RTT，客户端到服务器往返时间。RTO，重传超时时间。

请问当执行这句代码var jay = new Person();时new运算符所做的工作，请尽量详细描述。

（1）创建一个新对象；
（2）将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
（3）执行构造函数中的代码（为这个新对象添加属性）；
（4）返回新对象。

==和===的区别是

是否会进行强制类型转换

HTML5的设计目的

为了在移动设备上支持多媒体

CSS属性position有哪些属性值？

static、fixed、relative、absolute

浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构的进程叫做

重排（也叫回流，reflow）

写出4个正则表达式中的特殊字符

$ * () + . [ ? \ ^ | {

css reset的作用和用途

reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

yy