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
內聯元素和塊元素的區別是 （ ） 。
【換行】
塊級元素會獨占一行.
行內元素不會獨占一行,相鄰的行內元素會排列在同一行里,直到一行排不下,才會換行,其寬度隨元素的內容而變化.
| 塊級元素 | 可設置 | 可設置 |
| 行內替換 | 可設置 | 可設置 |
| 行內非替換 | 不能設置，由實際內容決定 | 只在水平方向上有效 |
塊級元素對應于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() { } // 得到鏈表headinsertHead(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默認屬性 瀏覽器的品種不同，樣式不同，然后重置，讓他們統一
總結
- 上一篇： Redis 复制、Sentinel的搭建
- 下一篇： WIN10远程连接时提示内部错误