100道前端面试题系列01

第一部分

基础题：

01.常用哪几种浏览器测试？有哪些内核？

答：

浏览器

IE，Chrome，FireFox，Safari，Opera。

内核
Trident，Gecko，Presto，Webkit。

 

02.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding

 

03.行内元素和块级元素的区别？

行内元素：会在水平方向排列，设置宽高及内外边距无效，可以设置行高。不可以包含跨级元素。

块级元素：各占据一行，垂直排列，可以包含行内元素，支持上面不支持的属性。

 

04.清除浮动常用方式有哪些？

1.给父级高度。

2.结尾处添加空的div，清除其浮动clear:both。

3.为父级设置伪类:after，为其添加清除浮动。

 

05.为什么h5只需要写 ？

HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

 

Js题：

01.解释一下下面代码的输出：

console.log(0.1 + 0.2); //0.30000000000000004
console.log(0.1 + 0.2 == 0.3); //false

Javascript 中的浮点数采用IEEE-754 格式的规定，这是一种二进制表示法，但是，二进制浮点数表示法并不能精确的表示类似0.1这样的简单的数字，会有舍入误差。

由于采用二进制，Javascript 也不能有限表示 1/10、1/2 等这样的分数。在二进制中，1/10(0.1)被表示为 0.00110011001100110011…… 注意 0011 是无限重复的，这是舍入误差造成的，所以对于 0.1 + 0.2 这样的运算，操作数会先被转成二进制，然后再计算：

0.1 => 0.0001 1001 1001 1001…（无限循环）
0.2 => 0.0011 0011 0011 0011…（无限循环）
双精度浮点数的小数部分最多支持 52 位，所以两者相加之后得到这么一串 0.0100110011001100110011001100110011001100…因浮点数小数位的限制而截断的二进制数字，这时候，再把它转换为十进制，就成了 0.30000000000000004。

常用方法：使用内置的 toPrecision() 和 toFixed() 方法，注意，方法的返回值字符串。

function add(x, y) {
    return x.toPrecision() + y.toPrecision()
}
console.log(add(0.1,0.2)); //"0.10.2"

02.split() join() 的区别
前者是将字符串切割成数组的形式，后者是将数组所有值转换成一个字符串。

 

03.”==”和“===”的不同
前者会自动转换类型，后者不会。

04.添加 删除 替换 插入到某个接点的方法。
obj.appendChidl

obj.removeChild

obj.replaceChild
obj.inersetBefore

 

05.下面代码会输出什么？如何输出期望值？

for (var i = 0; i < 5; i++) {
    setTimeout(function() { console.log(i); }, i * 1000 );
}

输出的都是5，并不是从0输到了5，需要用立即执行解决这个问题。

for (var i = 0; i < 5; i++) {
    (function (i){
        setTimeout(function() { console.log(i); }, i * 1000 );
    })(i);
}

因为，如果没有外面那个括号它是声明式的函数，要等到函数运行完才会输出。详细请自行百度IIFE。
更多文章请关注公众号：FE学习笔记