1.媒体查询
2.兼容性问题
(1)不同浏览器的标签默认的外补丁和内补丁不同
解决方案：CSS里 *{margin:0;padding:0;}
(2)块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
(3)几个img标签放在一起的时候，有些浏览器会有默认的间距
解决方案：使用float属性为img布局
3.reflow、repaint
微信图片_20170721100104.jpg
4.em、rem
css里面的单位：em、rem有什么不同？
em是相对于父元素的font-size属性值来计算的
rem是相对于html标签的font-size属性值来计算的
手机端页面自适应解决方案—rem布局
- JS模块化
- AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
- AMD也采用require()语句加载模块，但是不同于CommonJS。
- 主要有两个Javascript库实现了AMD规范：require.js和curl.js。
- AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
- CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
- 区别：
1.对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。
2.CMD 推崇依赖就近，AMD 推崇依赖前置。
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})
- AMD和CMD最大的区别是对依赖模块的执行时机处理不同，注意不是加载的时机或者方式不同。
- 很多人说requireJS是异步加载模块，SeaJS是同步加载模块，这么理解实际上是不准确的，其实加载模块都是异步的，只不过 AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略。
- 为什么我们说两个的区别是依赖模块执行时机不同，为什么很多人认为ADM是异步的，CMD是同步的（除了名字的原因。。。）
同样都是异步加载模块，AMD在加载模块完成后就会执行改模块，所有模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行。- CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的。
这也是很多人说AMD用户体验好，因为没有延迟，依赖模块提前执行了，CMD性能好，因为只有用户需要的时候才执行的原因。
一个极为简单的requirejs实现方法_javascript技巧
- 内核
- IE：trident 内核
- Firefox：gecko 内核
- Safari：webkit 内核
- Chrome：Blink 内核（Blink内核基于webkit内核）
- Opera：Blink 内核
7.严格模式和混杂模式，区分？意义？
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码
- Doctype不存在或者格式不正确会导致文档以混杂模式呈现。
- 严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行；混杂模式是一种向后兼容的解析方法，可以实现IE5.5以下版本浏览器的渲染模式
8.媒体查询
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
@media screen and (orientation: landscape) {
// 竖屏
}
“iphone.css”样式适用于最大设备宽度为480px
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
9.css选择器
!important > 行内样式 > id > class > tag
1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul > li） 6.后代选择器（li a） 7.通配符选择器（ * ） 8.属性选择器（a[rel = "external"]） 9.伪类选择器（a: hover, li:nth-child）
- 内联样式表的权值为 1000
- ID 选择器的权值为 100
- Class 类选择器的权值为 10
- HTML 标签选择器的权值为 1
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
#xxx li 优先级 100 +1
css2 : E[foo~="bar"] : foo属性值是一个以空格符分隔的列表，其中一个列表的值为“bar”
css3 : a[src*="abc"] : 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
css3还新增了E[foo^="bar"]、E[foo$="bar"]，以^开头，以$结尾。
nth-child(n);
nth-child(3n+1) 隔两个选一个
nth-child(even)；nth-child(2n)偶数
nth-child(odd) ;nth-child(2n+1)奇数
nth-last-child(n) 倒数
first-child 正数
last-child 倒数
10.cookie，localstorage和sessionstorage
cookie与localstorage区别
- cookie的大小是受限的
- 请求一个新的页面的时候cookie都会被发送过去
- cookie指定作用域，不可以跨域调用
- cookie是http规范的一部分，localstorage在本地“存储”数据
- localstorage是html5的新特性，所以旧浏览器不一定兼容
localstorage与sessionstorage区别
- 存储在 localStorage 里面的数据没有过期时间（expiration time），而存储在 sessionStorage 里面的数据会在浏览器会话（browsing session）结束时被清除，即浏览器关闭时。
11.内联元素：span a img input font
块状元素：div h1 p ul ol li
offsetwidth = width + border + padding
clientwidth = width + padding
13.＜status-line＞状态行
- 1xx：指示信息--表示请求已接收，继续处理。
- 2xx：成功--表示请求已被成功接收、理解、接受。
- 3xx：重定向--要完成请求必须进行更进一步的操作。
- 4xx：客户端错误--请求有语法错误或请求无法实现。
- 5xx：服务器端错误--服务器未能实现合法的请求。
- 200 OK：客户端请求成功。
- 400 Bad Request：客户端请求有语法错误，不能被服务器所理解。
- 401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
- 403 Forbidden：服务器收到请求，但是拒绝提供服务。
- 404 Not Found：请求资源不存在，举个例子：输入了错误的URL。
- 500 Internal Server Error：服务器发生不可预期的错误。
- 503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常，举个例子：HTTP/1.1 200 OK（CRLF）。
301—永久移动。被请求的资源已被永久移动位置；
302—请求的资源现在临时从不同的 URI 响应请求；
305—使用代理。被请求的资源必须通过指定的代理才能被访问；
307—临时跳转。被请求的资源在临时从不同的URL响应请求；
400—错误请求；
402—需要付款。该状态码是为了将来可能的需求而预留的，用于一些数字货币或者是微支付；
403—禁止访问。服务器已经理解请求，但是拒绝执行它；
404—找不到对象。请求失败，资源不存在；
406—不可接受的。请求的资源的内容特性无法满足请求头中的条件，因而无法生成响应实体；
408—请求超时；
409—冲突。由于和被请求的资源的当前状态之间存在冲突，请求无法完成；
410—遗失的。被请求的资源在服务器上已经不再可用，而且没有任何已知的转发地址；
413—响应实体太大。服务器拒绝处理当前请求，请求超过服务器所能处理和允许的最大值。
417—期望失败。在请求头 Expect 中指定的预期内容无法被服务器满足；
418—我是一个茶壶。超文本咖啡罐控制协议，但是并没有被实际的HTTP服务器实现；
420—方法失效。
422—不可处理的实体。请求格式正确，但是由于含有语义错误，无法响应；
500—服务器内部错误。服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理；
14.为es5的Array写forEach
//其实这题非常简单，但是千万不要使用for in，因为它会把数组对象中
//的其他属性（如方法属性）都进行循环。这是一个大坑。
Array.prototype.forEach = function(cb){
for(var i = 0;i< this.length;i++){
cb(this[i],i);
}
return this;
}
15.深度复制
// 判断arr是否为一个数组，返回一个bool值
function isArray (arr) {
return Object.prototype.toString.call(arr) === '[object Array]';
}
// 深度克隆
function deepClone (obj) {
if(typeof obj !== "object" && typeof obj !== 'function') {
return obj; //原始类型直接返回
}
var o = isArray(obj) ? [] : {};
for(i in obj) {
if(obj.hasOwnProperty(i)){
o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i];
}
}
return o;
}
判断数组是数组
16.介绍一下CSS的盒子模型？
-
有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading(标准W3C盒子模型width和height不包括margin，border，padding。但是IE盒子模型包括padding和border。)
-
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
CSS3 box-sizing的作用:他的三个值content-box、inherit、border-box，改变盒模型的width
17.怎样添加、移除、移动、复制、创建和查找节点
- 创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点 - 添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
document.getElementById("myList").insertBefore(newItem,existingItem);
document.getElementById("myList").replaceChild(newnode,oldnode);
parent.appendChild(newListItem)
//创建一个<li>Water</li>
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)
- 查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
网友评论