- 行内元素与块级元素的区别
行内元素设置width、height无效，margin、padding仅左右有效，上下无效。 - 前端的三层结构
结构层html，表示层css，行为层js - CSS的引入方式，区别是什么
link和@import
- 从属关系：link是HTML提供的标签，@import是CSS提供的语法规则
- 加载顺序：link在页面加载过程中会和内容同时加载出来，@import引入会在页面加载完成后才被加载。
- 需要js控制DOM改变演示时只能使用link，DOM不能控制@import
- link无兼容性问题，@import只在IE5以上才能识别
- link样式权重高于@import
- CSS选择器有哪些
id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器
伪类选择器 - display:none和visibility:hidden的区别
display:none隐藏对应元素，在文档布局中不给它分配空间，相当于不存在
visibility:hidden隐藏对应元素，但在文档布局中仍保留原来的空间 - position的absolute与fixed共同点与不同点
共同点：改变行内元素的呈现方式，让元素脱离普通流，不占据空间
不同点：absolute是根元素可以设置的，fixed的根元素固定为浏览器窗口 - 显示
block：像块类型元素一样显示
inline：像行内元素一样显示
inline-block：像行内元素一样显示，但内容像块类元素一样显示
list-item：像块类元素一样显示，并添加样式列表标记 - absolute、fixed、relative、static
absolute：绝对定位，相对static以外的第一个祖先元素
fixed：绝对定位，相对浏览器窗口
relative：相对定位，相对普通流中 的位置
static：默认值，没有定位，处于正常流中 - CSS3中的新特性
圆角border-radius
阴影box-shadow
文字阴影text-shadow
线性渐变gradient
旋转transform - 清除浮动技巧
- 使用空标签定义css clear:both;缺点添加了无意义的标签
- overflow:hidden;
- 减少页面加载时间的方法
压缩CSS、JS文件
优化图片
图片格式选择
优化CSS
标明宽高
减少http请求
减少DOM操作 - undefined和null的区别
undefined表示无，null表示尚未存在
- 变量声明未赋值为undefined
- 调用函数，函数参数未提供为undefined
- 函数没返回值，默认返回undefined
- null系统会回收，可用于释放内存
- 优雅降级和渐进增强
优雅降级：最开始针对新式浏览器进行完整功能构建，再对低版本浏览器进行兼容。
渐进增强：针对低版本浏览器进行构建，逐步添加新式浏览器才支持的功能，当浏览器支持时自动呈现并发挥作用。 - 下面三条语句的区别
function show(){}
var show=function(){}
var show=new Function()
函数，函数表达式，函数对象 - JS输出数据的方式
使用 window.alert() 弹出警告框
使用 document.write() 方法将内容写到 HTML 文档中
使用 innerHTML 写入到 HTML 元素
使用 console.log() 写入到浏览器的控制台 - 下面的代码输出什么
var y = 1;
if (function f(){}) {
y += typeof f;
}
console.log(y);//1undefined
var k = 1;
if (1) {
eval(function f(){});
k += typeof f;
}
console.log(k); //1undefined
var k = 1;
if (1) {
function f(){};
k += typeof f;
}
console.log(k); //1function
- JavaScript 中 undefined 和 not defined 的区别
未声明的变量直接使用会抛出异常var name is not defined，如果没有异常处理，代码就会停止运行。
但是使用typeof并不会产生异常，会直接返回 undefined。
var x;// 声明 x
console.log(x); //undefined
console.log(typeof y); //undefined
console.log(z); //抛出异常:ReferenceError: z is not defined
- JavaScript怎么清空数组
var arr=['a','b','c']
//方法1
arr=[]
//方法2
arr.length = 0;
//方法3
arr.splice(0,arr.length)
- 判断一个object是否是数组(array)
方法1：使用 Object.prototype.toString精确判断对象类型
function isArray(obj){
return Object.prototype.toString.call( obj ) === '[object Array]';
}
console.log(Object.prototype.toString.call(123)) //[object Number]
console.log(Object.prototype.toString.call('123')) //[object String]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call(true)) //[object Boolean]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call([])) //[object Array]
console.log(Object.prototype.toString.call(function(){})) //[object Function]
方法2：使用原型链
function isArray(obj){
return obj.__proto__ === Array.prototype;
}
- JavaScript中如何检测一个变量是否是String类型
typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String
21.列举ES6的新特性
- 类的支持，引入class关键字
- 字符串模板``
- 解构
- 默认参数，不定参数，拓展参数
- let关键字
- for of
- 不同浏览器的兼容性区别
1.标签默认外边界和内填充不同
解决办法：margin:0;padding:0;
2.块属性float+横向margin在IE6中margin显示比设置的大
解决办法：display:inline;
3.标签高度设置较小(<10px)在IE6、7中高度显示比设置的大
解决办法：overflow:hidden;或者设置line-height<height
4.多个图片标签设置在一起，某些浏览器默认有间距
解决办法：为图片使用float
5.火狐不支持hand，ie支持pointer
解决办法：统一使用cursor:pointer;
6.small字体大小不同
解决办法：使用指定的字体大小 - JavaScript数组反转
var arr = [5,1,4,7,2];
console.log(arr.reverse())//[ 2, 7, 4, 1, 5 ]
- JavaScript数组的排序
var arr = [5,1,4,7,2];
console.log(arr.sort())//[ 1, 2, 4, 5, 7 ]
var arr = [5,1,4,7,2];
console.log(arr.sort().reverse())//[ 7, 5, 4, 2, 1 ]
- JavaScript的基本类型
字符串、数字、布尔、数组、对象、Null、Undefined - let和const的区别
- 都只在声明所在的块级作用域内有效
- let声明的变量可以改变值/类型等，const声明的变量不可改变值，const声明同时必须初始化
- relative、absolute、fixed 定位原点
- absolute：相对不是static的 第一个父元素
- relative：相对其正常位置
- fixed ：相对浏览器窗口
网友评论