那些年我们遇到过的面试问题总结

写这篇文档主要记录我们常见的一些面试问题，并附上一些答案（仅供参考，部分答案来源网络，文末可留言，一起讨论学习） 本文为笔者所遇到过的一些问题，做个记录备忘！！！
本文地址：http://tigerliu.site/2017/06/interview/

• CSS篇
  • 常见3栏布局方式有几种
  • CSS3不定宽高水平垂直居中
  • 如何解决1px问题
• JavaScript篇
  • get/post区别
  • 为何要使用json格式
  • 浏览器内核都有那些
  • setTimeout/setInterval区别
  • npm中dev-save与save的区别
  • 写一个方法clone; 实现js五种数据类型(string, number, boolean, array, object)的复制
  • AMD(requirejs)/CMD(seajs)区别
• HTML篇
  • 如何禁止微信横屏
  • html5除了video/audio还有其他媒体标签？
  • video支持的视频格式有那些
• 浏览器篇
  • 浏览器内核都有那些
  • IE下是如何兼容HTML5新属性
  • localStorage 与cooice 有什么区别

CSS篇

1. 常见3栏布局方式有几种

• 绝对定位
  css:

  html,body{margin:0; height:100%;}
  #left,#right{position:absolute; top:0; width:200px; height:100%;}
  #left{left:0; background:#a0b3d6;}
  #right{right:0; background:#a0b3d6;}
  #main{margin:0 210px; background:#ffe6b8; height:100%;}

  html:

  <div id="left"></div>
  <div id="main"></div>
  <div id="right"></div>

• margin负值

  css:

  html,body{margin:0; height:100%;}
  #main{width:100%; height:100%; float:left;}
  #main #body{margin:0 210px; background:#ffe6b8; height:100%;}
  #left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
  #left{margin-left:-100%;}
  #right{margin-left:-200px;}

  html:

  <div id="main">
  	<div id="body"></div>
  </div>
  <div id="left"></div>
  <div id="right"></div>

• 自身浮动

  css:

  html,body{margin:0; height:100%;}
  #main{height:100%; margin:0 210px; background:#ffe6b8;}
  #left,#right{width:200px; height:100%; background:#a0b3d6;}
  #left{float:left;}
  #right{float:right;}

  html:

  <div id="left"></div>
  <div id="right"></div>
  <div id="main"></div>

• 弹性盒子

  css:

  html,body{margin:0; height:100%;padding:0}
  body{display:flex;flex-flow:row wrap;}
  #left,#right{width:200px; height:100%;background:#a0b3d6;flex:1}
  #main{background:#ffe6b8;width:100%;height:100%;flex:2}

  html:

  <div id="left"></div>
  <div id="main"></div>
  <div id="right"></div>

• 圣杯布局

  css:

  html,body{margin:0; height:100%;padding:0}
  body{padding-left:100px;padding-right:200px}
  #left,#right{position:relative; top:0; width:200px; height:100%;background:#a0b3d6;float:left;}
  #left{margin-left:-100%;left:-100px;}
  #right{margin-left:-200px;right:-200px}
  #main{background:#ffe6b8;width:100%;height:100%;float:left}

  html:

  <div id="main"></div>
  <div id="left"></div>
  <div id="right"></div>

源自：
http://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%BD%91%E9%A1%B5%E5%AE%BD%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95/
https://juejin.im/post/58481bf8ac502e006ce8c361

2. CSS3不定宽高水平垂直居中

• Flex
  1.justify-content:center;//子元素水平居中
  2 align-items:center;//子元素垂直居中
  3 display:-webkit-flex;
  在父级元素上面加上上面3句话，就可以实现子元素水平垂直居中。

• Transforms
  div绝对定位水平垂直居中【Transforms 变形】
  这是最简单的方法，不近能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上top: 50%; left: 50%;

.div1{
    width: 200px;
    height: 200px;
    background-color: pink;
    position: absolute;
    text-align: center;
    left:50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
 }

3. 如何解决1px问题

实现1PX边框的方法有很多，各有优缺点，比如通过背景图片实现、通过transform: scale(0.5)实现。本次实现的是通过VIEWPORT+rem实现的，优点是可以自适应已知的各类手机屏幕,且不存在其它方法存在的变颜色困难、圆角阴影失效问题。缺点嘛，这方法适全新项目，如果老项目想用这种方法，改动量估计会比较大

/*transform: scale(0.5)实现代码*/
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);

源自：http://blog.csdn.net/bbnbf/article/details/51580569

JavaScript篇

1. get/post区别

• get是从服务器上获取数据，post是向服务器传送数据。
• get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。
• post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
• 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
• get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
• get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

建议：

• get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
• 在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

2. 为何要使用json格式

• 方便于传输，较少冗余的字符。当然直接传二进制是最好的，但面临难解析的问题。亦可以是xml、纯字符串的方式，但json有其独到的好处。google有个自己的协议，叫protobuf，有兴趣可了解一下。

• 方便转换。有很多的json api提供了json字符串转成对象、对象转换成json串的方法。

• 易于阅读。json代码的良好结构，可以很直观地了解存的是什么内容。

3. 浏览器内核都有那些

Trident内核代表产品Internet Explorer，又称其为IE内核
Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的 FF内核
WebKit内核代表作品Safari、Chromewebkit 是一个开源项目 safari/chrome
Presto内核代表作品OperaPresto opera内核

4. setTimeout/setInterval区别

• setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout() 只执行 code 一次

• setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval()
  方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作
  clearInterval() 方法的参数。

5. npm中dev-save与save的区别

• dev-save:放在package.json的devDependencies里面 开发环境用devDep

• save:一个放在package.json 的dependencies 生产环境用dependencies

6. 写一个方法clone; 实现js五种数据类型(string, number, boolean, array, object)的复制

function clone(Obj){
	var buf;
	if(Obj instanceof Array){  //数组
		buf=[];
		var i=Obj.length;
		while(i--){
			buf[i]=clone(Obj[i]);
		}
		return buf;
	}else if(Obj instanceof Object){  //对象类型
		buf={};
		for(var k in Obj){
			buf[k]=clone(Obj[k]);
		}
		return buf;
	}else{  //普通变量
		return Obj;
	}
}
//test	
console.log(clone(true));
console.log(clone(12));
console.log(clone('abc'));
console.log(clone(null));
console.log(clone([1,2,3]));
console.log(clone({name:'zh',age:'18'}));

7. AMD(requirejs)/CMD(seajs)区别

• 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0
  开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
• AMD 推崇依赖前置,CMD 推崇依赖就近。
• AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。
  比如 AMD 里，require 分全局 require 和局部 require，都叫 require。
  CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹

HTML篇

1.如何禁止微信横屏

• 通过js或者html5来设置，不让手机页面横屏
• 使用QQ浏览器私有meta属性

  <!-- QQ浏览器私有属性：强制竖屏 -->
  <meta name="x5-orientation" content="portrait">

微信应该不是调用的QQ浏览器，所以不知道有没有效，没见过能限制微信竖屏浏览的代码

2. html5除了video/audio还有其他媒体标签？

<video>  标记定义一个视频
<audio>  标记定义音频内容
<source> 标记定义媒体资源
<canvas> 标记定义图片
<embed>  标记定义外部的可交互的内容或插件 比如flash

3. video支持的视频格式有那些

一共支持三种格式： Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。
注释：Internet Explorer 8 以及更早的版本不支持 <video>标签。

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

浏览器篇

1. 浏览器内核都有那些

Trident内核代表产品Internet Explorer，又称其为IE内核
Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的 FF内核
WebKit内核代表作品Safari、Chromewebkit 是一个开源项目 safari/chrome
Presto内核代表作品OperaPresto opera内核

2. IE下是如何兼容HTML5新属性

• Coding JavaScript

  <!--[if lt IE9]> 
  <script> 
     (function() {
       if (! 
       /*@cc_on!@*/
       0) return;
       var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
       var i= e.length;
       while (i--){
           document.createElement(e[i])
       } 
  })() 
  </script>
  <![endif]-->

• 使用Google的html5shiv包（推荐）

  <!--[if lt IE9]> 
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

但是不管使用以上哪种方法,都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的”白板”网页,我们该怎么解决呢?
我们可以参照facebook的做法，即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面，用 html4 标签替换 html5 标签，这要比为了保持兼容性而写大量 hack 的做法更轻便一些。

<!--[if lte IE 8]> 
<noscript>
     <style>.html5-wrappers{display:none!important;}</style>
     <div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
     </div>
</noscript>
<![endif]-->

这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。

来自：http://www.cnblogs.com/Capricornus/archive/2013/03/26/2982122.html

3. localStorage 与cooice 有什么区别

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦