比较经典的前端面试题一

一、HTML和CSS部分
1. 如何清除浮动？
clear: both;

2. 如何使一个元素垂直水平居中？

（面试官补充：元素没有固定的大小时如何垂直水平居中）
<div id="box">
    <div id="content">我是内容</div>
</div>

#box {
    width: 500px;
    height: 500px;
    position: relative;
    border: 1px solid #000;
}
/* 方法一 */
#content1 {
    /*width: 200px;
    height: 200px;*/
    top: 50%;
    left: 50%;
    /*
    margin-top: -100px;
    margin-left: -100px;
    */
    transform: translate(-50%,-50%);
    position: absolute;
    border: 1px solid #000;
}

/* 方法二 */
#content {
    width: 200px;
    height: 200px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
}

/* 方法三：flex布局 */
#box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
}
#content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

/* 方法四：table-cell布局 */
<div class="box">
    <div class="content">
        <div class="inner">
        </div>
    </div>
</div>

.box {
    background-color: #FF8C00;//橘黄色
    width: 300px;
    height: 300px;
    display: table;
}
.content {
    background-color: #F00;//红色
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
}
.inner {
    background-color: #000;//黑色
    display: inline-block;
    width: 20%;
    height: 20%;
}

https://blog.csdn.net/qq_27576607/article/details/78697812

3. 给你一个静态图片，实现一个Loading效果
方法一：ps帧动画制作gif图
方法二：css3的animation实现
<img src="../assets/loading.png" alt="loading" />

img {
    width: .7rem;    /* rem显示尺寸太小 */
    height: .72rem;

    animation: loadingRotate 1s infinite linear;
    -moz-animation: loadingRotate 1s infinite linear;
    -webkit-animation: loadingRotate 1s infinite linear;
    -o-animation: loadingRotate 1s infinite linear;
}

@keyframes loadingRotate {
    from {
        transform: translate(-50%, -50%) rotate(0);
    }
    to {
        transform: translate(-50%, -50%) ratate(360deg);
    }
}

@-moz-keyframes loadingRotate {
    from {
        transform: translate(-50%, -50%) rotate(0);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@-webkit-keyframes loadingRotate {
    from {
        transform: translate(-50%, -50%) rotate(0);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@-o-keyframes loadingRotate {
    from {
        transform: translate(-50%, -50%) rotate(0);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

CSS3 实现loading动画效果
https://www.jianshu.com/p/55372466ce70

30个使用CSS实现的loading等待加载效果
http://www.shejidaren.com/30-css-loading-effects.html

4. 标准W3C盒模型中，一个元素声明的大小不包括border和padding，如何设置css，可以使其包含border和padding呢？
不包括border和padding时，设置box-sizing: content-box

包括border和padding时，设置box-sizing: border-box

5. display: none和visibility: hidden有何区别？
a. display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 
b. visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
c. visibility: hidden不会影响计数器的计数，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
d. CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

6. 描述下”rest“ css文件的作用和使用它的好处
（1）定义：首先css reset指的是重置浏览器的默认样式
（2）作用：因为现在的浏览器很多，并且每个浏览器都有自己的默认样式，这样就会导致一个页面在多个浏览器下展示产生差异，所以我们需要做一些处理使每个浏览器下展示一致，故需要css reset
（3）内容：第一个：*{padding:0;margin:0;border:0;}第二个：你所用到的元素{padding:0;margin:0;border:0;}，然而第一个虽然写起来简单，但是它却会将所有的标签重置，而我们可能没有必要将那么多的元素都重置，浪费系统资源，降低性能，所以只给自己页面需要重置元素重置默认样式
（4）缺陷：并不是所有的标签都有默认的margin，padding，reset而且连后面有用的样式也干掉了,并且在移动端和电脑端有bug
（5）更好的替换者：Normalize.css 详细：http://jerryzou.com/posts/aboutNormalizeCss/
a.保持浏览器有用的默认样式，而不是干掉它们，某元素在各浏览器出现差异时，尽量使保持一致
b.为大部分html提供一般化的样式
c.修复浏览器bug，并保证各浏览器中样式的一致性，实现移动端和pc端一致
d.不会让调试工具变乱，不会出现大段大段的继承链
e.它是模块化的，这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）
f.Normalize.css 拥有详细的文档---》可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。

什么是css reset
https://www.cnblogs.com/maggie-pan/p/6392185.html

7. CSS引入的方式有哪些？link和@import有何区别？
有 4 种方式可以在 HTML 中引入 CSS。
（1）内联方式
内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
（2）嵌入方式
嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
（3）链接方式
链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
（4）导入方式
导入方式指的是使用 CSS 规则引入外部 CSS 文件。
示例：
<style>
    @import url(style.css);
</style>
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

补充：
RSS是一种消息来源格式规范，用以发布经常更新资料的网站，例如博客、新闻的网摘。
https://www.cnblogs.com/tuyile006/p/3691024.html

JS魔法堂：LINK元素深入详解
https://cloud.tencent.com/developer/article/1023589

[Javascript]：DOM操作之动态修改CSS样式和高级选择器
https://blog.csdn.net/fengwei4618/article/details/78025523

8. position有几个属性值，定位原则分别是什么？
position的属性值共有四个常用的：static、relative、absolute、fixed。
还有三个不常用的：inherit、initial、sticky
Static
所有元素在默认的情况下position属性均为static，而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right或者 z-index
声明在position为static的情况下无效。其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。
Relative
relative定位，又称为相对定位。relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，还占有文档空间，而且占据的文档空间不会随top / right / left / bottom 等属性的偏移而发生变动
Absolute
absolute定位，也称为绝对定位。使用absolut定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以position非static方式定位的。
Fixed
在很长的时间里，这个属性值因为兼容性问题，并没有得到非常广泛的应用（IE6未实现该属性值）。fixed和absolute有很多共同点：
1.会改变行内元素的呈现模式，使display之变更为block。
2.会让元素脱离文档流，不占据空间。
3.默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

补充：
z-index属性：
z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
Note：使用static 定位或无position定位的元素z-index属性是无效的。
什么是文档流？
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。
参考：https://www.jianshu.com/p/a116022c6c99

9. 要使2rem在屏幕上渲染成200px要如何设置？
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1rem=16px。在css中的html选择器中声明font-size=625%，这就使rem值变为 16px*625%=100px。

px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。
em单位用的也比较多，特别是国外；em单位的名称为相对长度单位，它是用来设置文本的字体尺寸的，它是相对于当前对象内文本的字体尺寸；如果没有人为设置当前对象内文本的字体尺寸，那么它相对的是浏览器默认的字体尺寸（16px）。
rem是css3新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。

移动端封装了一个rem的插件
/*手机自适应*/
(function (doc,win) {
    var docEl = doc.documentElement,//根元素html        
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',         
    //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。        
    recalc = function () {            
        var clientWidth = docEl.clientWidth;            
        if (!clientWidth) return;            
        // if(clientWidth>=560){            
        //     clientWidth=560;             
        //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。            
        // }            
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';        
    };    
    if (!doc.addEventListener) return;    
    recalc();    
    win.addEventListener(resizeEvt, recalc, false);    
    //addEventListener事件方法接受三个参数：    
    //第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔    
    doc.addEventListener('DOMContentLoaded', recalc, false);
    //绑定浏览器缩放与加载时间
})(document, window);

10. 使用流媒体查询选中宽度在768px到1366px的css代码？
@meida only screen and (min-width: 768px) and (max-width: 1366px) {}

二. Javascript部分
1. Javascript的变量和函数是否区分大小写？
区分

2. null与undefined有什么区别？
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
null表示"没有对象"，即该处不应该有值。典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
Object.getPrototypeOf(Object.prototype)
// null
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。

1、定义
（1）undefined：是所有没有赋值变量的默认值，自动赋值
（2）null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址
2、何时使用null?
当使用完一个比较大的对象时，需要对其进行释放内存时，设置为null
3、null与undefined的异同点是什么呢？
共同点：都是原始类型，保存在栈中变量本地
不同点：
   （1）undefined——表示变量声明过但并未赋过值。
它是所有未赋值变量默认值。
例如：var a;    //a自动被赋值为undefined
   （2）null——表示一个变量将来可能指向一个对象。
一般用于主动释放指向对象的引用。
例如：var emps = ['ss','nn'];
              emps = null;     //释放指向数组的引用
4、延伸——垃圾回收站
它是专门释放对象内存的一个程序。
   （1）在底层，后台伴随当前程序同时运行；引擎会定时自动调用垃圾回收期；
   （2）总有一个对象不再被任何变量引用时，才释放。

3. 实现一个对象深拷贝函数

function deepClone(obj) {
    var o = obj instanceof Array ? [] : {};
    for(var k in obj) {
        //有bug（属性的值为null时）
        //o[k] = typeof obj[k] === 'object'?deepClone(obj[k]):obj[k];
        if(typeof obj[k] === 'object' && obj[k] != undefined) {
            o[k] = deepClone(obj[k]);
        } else if(typeof obj[k] === 'object' && obj[k] == undefined) {
            o[k] = null;
        } else {
            o[k] = obj[k];
        }
    }
    return o;
}
//方法二：只能处理符合JSON格式的对象
function deepCopy(obj) {
    return JSON.parse(JSON.stringify(obj));
}

4. 以2017-1-1 10:10:10的形式，输出当前时间
function getCurrentTime() {
    var time = new Date();
    var year = time.getFullYear();
    var month = time.getMonth() + 1;
    var day = time.getDay();
    var hour = time.getHours(); 
    if (hour<10) hour = '0' + hour;
    var minute = time.getMinutes();
    if (minute<10) minute = '0' + minute;
    var second = time.getSeconds();
    if (second<10) second = '0' + second;
    return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}
5. 删除字符串'abbcbcd'中的'b'
'abbcbcd'.replace(/b/g, '');

6. 用正则表达式验证用户输入的是否是一个以.net/.cn/.com结尾的邮箱地址
var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.net|.cn|.com)$/g;

7. 实现一个将字符串反转的函数，如'ABCD'得出'DCBA'
str.split('').reverse().join('');

8. 用JS从Cookie中读取一个键为userid的cookie值？
function addCookie(name, value, expireHours) {
    var cookieStr = name + '=' + escape(value);
    if (expireHours > 0) {
        var date = new Date();
        date.setTime(date.getTime() + expireHours * 3600 * 1000);
        cookieStr += ';expires='+date.toGMTString();
    }
    document.cookie = cookisStr;
}

function getCookie(name) {
    var cookieStr = document.cookie;
    var cookieArr = cookieStr.split(';');
    for (var i=0; i<cookieArr.length; i++) {
        var arr = cookieArr[i].split('=');
        if (name == arr[0].trim()) return arr[1];
    }
    return '';
}
getCookie('userid');

9. XSS防范及原理
反射型：发出请求时，XSS代码出现在URL中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后浏览器解析并执行XSS代码，这个过程像一次反射，故叫反射型XSS。
// 如：index.html?xss=<img src ="null" οnerrοr="alert(1)">
存储型： 存储型和反射型XSS的差别在于提交的代码会存储在服务器端（数据库、内存、文件系统等），下次请求目标页面时不用再提交XSS代码。

防范措施：编码、过滤、校正
https://www.jianshu.com/p/4c69bf8e1ca3

10. 你知道那些优化SEO的方法
seo有10个方法，搜外总结告诉你：
1.保持规律更新
2.保持原创度和内容长度
3.站上添加最新发布模块/最新更新模块
4.已收录页面锚文本给未收录页面
5.绑定熊掌号（针对百度）
6.主动推送
7.sitemap提交
8.未收录页面的链接展示在首页一段时间
9.站外给未收录页面引蜘蛛
10.抓取诊断（针对百度）

三、编程题目
1. 编写一个字节格式化函数，将字节数转化为易读的单位，如123456字节得出120.56KB，12345678得出1.18MB。保留2位小数。
function convert(n) {
    var arr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
    var t = n;
    var count = 0;
    while(t > 1024 && count < 6) {
        t = t/1024;
        count++;
    }
    t = t.toFixed(2);
    return t + arr[count];
}

2. 用你认为最精简的代码实现数组去重
方法一：
var arr=[2,8,5,0,5,2,6,7,2];
function unique1(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
     if(hash.indexOf(arr[i])==-1){
      hash.push(arr[i]);
     }
  }
  return hash;
}

方法二：
function unique2(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
     if(arr.indexOf(arr[i])==i){
      hash.push(arr[i]);
     }
  }
  return hash;
}

方法三：
function unique3(arr){
  arr.sort();
  var hash=[arr[0]];
  for (var i = 1; i < arr.length; i++) {
     if(arr[i]!=hash[hash.length-1]){
      hash.push(arr[i]);
     }
  }
  return hash;
}

方法四：
优化遍历数组法（推荐）

实现思路：双层循环，外循环表示从0到arr.length，内循环表示从i+1到arr.length

将没重复的右边值放入新数组。（检测到有重复值时终止当前循环同时进入外层循环的下一轮判断）

function unique4(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
    for (var j = i+1; j < arr.length; j++) {
      if(arr[i]===arr[j]){
        ++i;
      }
    }
      hash.push(arr[i]);
  }
  return hash;
}

方法五：
Array.from(new Set(arr));

function unique5(arr){
  var x = new Set(arr);
 return [...x];
}

方法六：
数组下标去重

function unique22(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
     if(arr.indexOf(arr[i])==arr.lastIndexOf(arr[i])){
      hash.push(arr[i]);
     }
  }
  return hash;
}

https://www.cnblogs.com/baiyangyuanzi/p/6726258.html

https://www.cnblogs.com/jiayuexuan/p/7527055.html

千分位 123456

function f(n) {
    var n = '' + n;
    var arr = [];
    for (var i=n.length-1; i>=0; i-=3) {
        var str = '';
        for (j=i-2; j<=i; j++) {
            if (j>=0) str+=n.charAt(j);
        }
        console.log(str);
        arr.push(str);
    }
    return arr.reverse().join(',');
}
 

注：答案属于自己的总结，有不足之处，还请谅解。