yy

来源：互联网发布：分销系统源码编辑：程序博客网时间：2024/06/09 21:37

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

@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 = 10pxrem的值也不是固定的，相对于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默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

阅读全文

0 0

yy