面试题
一、隐藏一个盒子的几种方式 以及他们的区别
面试经常会问到，我总结了下面这个表格，大家也可以自己写写代码试试。当然这是比较常见的五种方式，还有一些设置什么margin负值等等操作的隐藏盒子，我认为在实际开发中不太实用，就没有写到下面。
| 方式 | 占位 | 对子元素的影响 | 绑定的事件能否触发 |
| display:none | 否 | 子元素隐藏 | 否 |
| opacity:0 | 是 | 子元素隐藏 | 否 |
| visibility:hidden | 否 | 子元素隐藏 | 否 |
| background-color:rgba(,,,0) | 是 | 子元素显示 | 能 |
| background-color:transparent | 是 | 子元素显示 | 能 |
二、CSS常用单位以及他们的区别
1.px
px（像素）是网页设计的基本单位，可以设置固定的布局或元素大小，他的值一旦被设定就是固定的。
2.rpx
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。可以根据屏幕宽度进行自适应。微信小程序规定屏幕的宽度为750rpx。可以与px等单位进行换算。换算链接
3.em
em的大小是根据父元素的font-size确定的（如果自身定义了font-size，以自身为准）。页面内部的em并不是一个固定的值，他会继承父元素字体的大小。1em=1父元font-size。
4.rem
rem的大小是相对于根元素html的字体大小，css3新增的一个相对单位，目前，除了ie8及更早版本外，所有浏览器均已支持rem。
5.百分比%
相对于父元素的大小，对于普通定位元素就是我们理解的父元素，对于position: absolute;的元素是相对于已定位的父元素，对于position: fixed;的元素是相对于ViewPort（可视窗口），
6.vw
css3新单位，view width的简写，是指可视窗口的宽度。1vw=视窗宽度的1%
7.vh
css3新单位，view height的简写，是指可视窗口的高度。1vh=视窗高度的1%
8.vmax
vw和vh中较大的那个。
9.vmin
vw和vh中较小的那个。
ps:rem、vh、vw、vmax、vmin是有兼容性问题的，使用时需要注意。
三、浏览器标准模式和怪异模式
1.什么是标准模式？什么是怪异模式
浏览器解析css的两种模式：标准模式(strict mode)和怪异模式(quirks mode)。
标准模式：浏览器按w3c标准解析执行代码；
怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。
2.怎么产生的？
浏览器解析时使用标准模式还是怪异模式，与网页中的dtd声明直接相关，dtd声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相关的方式加载网页并显示，忽略dtd声明，将使网页进入怪异模式（quirks mode）。
3.区别在哪里
（1）盒子模型
标准模式：总宽度=width+padding(左右)+border(左右)+margin(左右)
怪异模式：总宽度=width+margin(左右)（width直接包括了padding(左右)+border(左右) ）
ps：width是你设置的宽度
（2）可以设置行内元素的高宽
在标准模式下，给span等行内元素设置wdith和height都不会生效
在怪异模式下，则会生效。
（3）可设置百分比的高度
在标准模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
在怪异模式下，百分比高度被准确应用
（4）用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在标准模式下可以使元素水平居中，但在怪异模式下却会失效; 怪异模式下的解决办法，用text-align属性: body{text-align:center};#content{text-align:left}
（5）元素中的字体
css中，对于font的属性都是可以继承的。怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素继承中的得到，特别是font-size属性。
（6）图片元素的垂直对齐方式
对于inline元素和table-cell元素，标准模式下vertical-align属性默认取值是baseline；在怪异模式下，table单元格中的图片的vertical-align属性默认取值是bottom。因此在图片底部会有及像素的空间。
（7）元素溢出的处理
标准模式下，overflow取值默认为visible；在怪异模式在，该溢出会被当做扩展box来对待，即元素的大小由内容决定，溢出不会裁剪，元素框自动调整，包含溢出内容。
四、css如何启动浏览器硬件加速
transform:transition3d(0,0,0)或transform:translateZ(0);，这两个属性都会开启GPU硬件加速模式，我们设置值为0后，并没有真正使用3d效果，但浏览器却因此开启了gpu硬件加速模式。
通过transform:transition3d/translatez开启gpu硬件加速的适用范围：
使用很多大尺寸图片(尤其是png24图)进行动画的页面。
页面有很多大尺寸图片并且进行了css缩放处理，页面可以滚动时。
使用background-size:cover设置大尺寸背景图，并且页面可以滚动时。(详见:https://coderwall.com/p/j5udlw)
编写大量dom元素进行css3动画时(transition/transform/keyframes/abstop&left) 使用很多png图片拼接成css sprite时
注意：
通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题，但使用仍需谨慎，使用前一定要进行严谨的测试，否则它反而会大量占用浏览网页用户的系统资源，尤其是在移动端，肆无忌惮的开启GPU硬件加速会导致大量消耗设备电量，降低电池寿命等问题。
五、CSS和CSS3的区别
CSS3是CSS技术的升级版本，增加了很多新特性，例如：圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。
六、清除浮动的几种方式
1.额外标签法（不推荐）
给谁清除浮动，就在其后额外添加一个空白标签（块级标签），并给这个标签设置clear：both属性
缺点：添加许多无意义的标签，结构化比较差
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent{
height: 1000px;
width: 100%;
}
.left{
width: 400px;
height: 400px;
background-color: red;
float: left;
}
.right{
width: 200px;
height: 200px;
background-color: blue;
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
2.父元素加overflow:hidden/auto（不推荐）
给父元素加overflow:hidden/auto，通过触发bfc的方式，实现清除浮动效果。（慎重使用，若该父盒子里还有position定位会引起麻烦）
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。而且对于浮动元素的兄弟元素仍然有影响，只是父元素的兄弟元素不受影响
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent{
overflow: hidden;
width: 100%;
}
.left{
width: 400px;
height: 400px;
background-color: red;
float: left;
}
.right{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right">你是看不见我的</div>
</div>
<div class="right">你能看见我</div>
</body>
</html>
3.父元素定义高（不推荐）
给父元素定义高度
缺点：父元素高度固定可能影响布局，对于浮动元素的兄弟元素仍然有影响，只是父元素的兄弟元素不受影响
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent{
height: 800px;
width: 100%;
}
.left{
width: 400px;
height: 400px;
background-color: red;
float: left;
}
.right{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right">你是看不见我的</div>
</div>
<div class="right">你能看见我</div>
</body>
</html>
4.父元素定义伪类:after和zoom（推荐）
ie8以上和非ie浏览器才支持:after，原理和方法1有点类似，zoom(ie转有属性)可解决ie6,ie7浮动问题
缺点：代码多，要两句代码结合使用，才能让主流浏览器都支持
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent{
width: 100%;
}
.left{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.clearfix{
*zoom:1;/* 触发ie haslayout */
}
.clearfix:after{
content: "";
display: block;/* 使生成的元素以块级元素显示,占满剩余空间; */
clear: both;
visibility:hidden; /* 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互; */
height:0;/* 避免生成内容破坏原有布局的高度。 */
}
.right{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="left"></div>
</div>
<div class="right"></div>
</body>
</html>
5.双伪元素法
上面方法的改进版，代码更简洁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent{
width: 100%;
}
.left{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.clearfix{
*zoom:1;/* 触发ie haslayout */
}
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.right{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="left "></div>
</div>
<div class="right"></div>
</body>
</html>
七、原生ajax交互
function ajax_get(url,params,success,error) {
//1.创建异步请求对象
var ajaxObj=new XMLHttpRequest();
//2.判断url 是否存在 并利用正则判断路径是否合法
if(!url){
//手动抛出一个错误 终止当前程序 后面代码 不执行
throw new Error("服务器地址非法!");
}
//3.判断是否有参数需要提交
if(params){
//有参数 就拼接上参数
url=url+"?"+params;
}
ajaxObj.open("get",url)
//4.发起网络请求
ajaxObj.send()
ajaxObj.onreadystatechange=function () {
if(ajaxObj.readyState===4 && ajaxObj.status===200){
if(typeof success=="function"){
success(ajaxObj);
}
}else{
if(typeof error=="function"){
error(ajaxObj);
}
}
}
}
//针对ajax 的post请求的封装
function ajax_post(url,params,success,error) {
var ajaxObj=new XMLHttpRequest();
//判断是否有服务器地址
if(!url){
throw new Error("服务器地址非法!");
}
ajaxObj.open("post",url);
//拼接请求头
ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//判断是否有参数需要提交
if(params){
ajaxObj.send(params);
}else{
ajaxObj.send();
}
ajaxObj.onreadystatechange=function () {
if(ajaxObj.readyState===4 && ajaxObj.status===200){
if(typeof success=="function"){
success(ajaxObj);
}
}else{
if(typeof error=="function"){
error(ajaxObj);
}
}
}
}
八、前端页面有哪三层构成，分别是什么？作用是什么？
最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。
网页的结构层（structural layer）由 html 或 xhtml 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，p 标签表达了这样一种语义：“这是一个文本段。”
网页的表示层（presentation layer） 由 css 负责创建。 css 对“如何显示有关内容”的问题做出了回答。
网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 javascript 语言和 dom 主宰的领域。
九、js本地对象 内置对象 寄生（宿主）对象分别是什么
寄生对象：宿主就是寄生，就是寄生在javascript里的对象。即对象不是javascript语言本身的，但是可以在javascript中使用的对象，如dom，bom。
内置对象：内置对象，就是不用创建，可以直接使用的对象，如：Math。函数中的arguments和this；事件处理函数中的event对象等等，都是直接使用，而不用new的。
本地对象：代码编写者自己创建的对象，例如：Date、Array、XMLHttpRequest等
十、HTML5新特性 兼容性处理 如何区分HTML和H5
1.H5的新特性
语义化标签：<hrader></header> 、<footer></footer>、<nav></nav>、<section></section>、<article></article>、<aside></aside>、<video></video>、<audio></audio>
新增表单元素：email、month、number、range、search、tel、url、week、time、date、datatime、datetime-local
新增表单属性：placeholder、required、autofocus、autocomplete、maxlength、novalidate、max、min、step、multipe、disabled、checked
新增的视频和音频标签：<video></video>、<audio></audio>
canvas绘图 svg绘图 拖拽 webworker、webstorage、websocket
2.兼容性处理
IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式；当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
3.如何区分
在文档类型声明上，h5为<!doctype html>，之前版本比较长。或根据使用标签进行区分
