前端面试题目汇总

2017/12/14

1. HTML语义化

根据内容的结构化，选择合适的标签，便于开发者阅读和写出优雅的代码，同时让浏览器的爬虫能更好的解析。

• 在没有CSS时，能让页面呈现更好的内容结构和代码结构
• 用户体验
• 有利于SEO和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签确定上下文和关键字的权重。
• 方便其他设备解析
• 便于团队开发和维护，语义化更有可读性。

2.css布局

1)单列布局

• inline-block和text-align实现

  .parent{
      text-align: center;
  }
  .child{
      display: inline-block;
  }

  优点：兼容性好
  不足：需要同时设置父元素和子元素

• margin：0 auto；实现

  .child{
          margin:0 auto;
          width: 200px;
      }

  优点：兼容性好

• table实现

  .child{
          display: table;
          margin:0 auto;
      }

  优点：只需要对自身进行设置
  不足：IE6,7需要调整结构

• 绝对定位实现

  .parent{
          position: relative;
      }
  .child{
  position: absolute;
  left: 50%;
  transform:translate(-50%);
  }

  不足：兼容差IE9以上可用

• 使用flex布局实现

 .parent{
            display: flex;
            justify-content: center;
        }

 .parent{
            display: flex;
        }
        .child{
            margin:0 auto;
        }

垂直居中

• 使用绝对定位实现

 .parent{
            position: relative;
            height: 200px;
            width: 100px;
            background-color: green;
        }
.child{
    position: absolute;
    top:50%;
    transform:translate(0,-50%);
}

• flex布局实现

 .parent{
            display: flex;
            align-items: center;
        }

水平垂直全部居中

• 绝对定位实现

.parent{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: green;
        }
.child{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

• flex布局实现

.parent{
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            justify-content:center;
            align-items: center;
        }

2)多列布局

左列定宽，右列自适应

• 利用float+margin实现

.left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
.right{
    margin-left: 100px;
}

• 利用float+margin（fix）实现

.left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
.right-fix{
    width: 100%;
    margin-left: -100px;
    float: right;
}
.right{
    margin-left: 100px;
}

• 利用float+overflow实现

.left{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
.right{
    overflow: hidden;
}

• 使用table实现

.parent{
            display: table;
            table-layout: fixed;
            width: 100%;
        }
.left{
    width: 100px;
}
.right,.left{
    display: table-cell;
}

• 使用flex实现

.parent{
            display: flex;
        }
.left{
    width: 100px;
}
.right{
    flex:1;
}

2017/12/18

3、清除浮动的方式

文章转载于：http://www.jianshu.com/p/09bd5873bed4
浮动元素会脱离文档流向左或向右浮动，直到碰到父元素或者另一个浮动元素。浮动不会影响普通元素的布局。浮动可以设置宽高，并且一行能够多个，是介于block和inline之间的存在。

浮动元素会导致父元素坍塌

文章转载于：// css
.box-wrapper {
  border: 5px solid red;
}
.box-wrapper .box {
  float: left; 
  width: 100px; 
  height: 100px; 
  margin: 20px; 
  background-color: green;
}

// html
<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开。
- clear清除浮动
clear属性不允许被清除浮动的元素的左右或右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div style="clear:both;"></div>
</div>

clear清除浮动的最佳实践方案

// 现代浏览器clearfix方案，不支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

• BFC清除浮动
  BFC全称是块状格式化上下文，它是按照块级盒子布局的，BFC容器是一个隔离的容器，和其它元素互不干扰，可以用触发两个元素的BFC来解决垂直边距折叠问题。BFC可以包含浮动。
  BFC的触发方式：
  我们可以给父元素添加以下属性来触发BFC：
  ✦ float 为 left | right
  ✦ overflow 为 hidden | auto | scorll
  ✦ display 为 table-cell | table-caption | inline-block | flex | inline-flex
  ✦ position 为 absolute | fixed
  2017/12/19

4、JSON和JSONP

转载来源：https://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
- JSON是一种基于文本的数据交换方式，优点如下：
1、基于纯文本，跨平台传递及其简单
2、JavaScript原生支持，后台语言几乎全部支持
3、轻量级数据格式，占用字符数量极少，特别适合互联网传递
4、可读性较强，虽然比不上XML那么一目了然，但是在合理的一次缩进之后还是很容易识别的
5、容易编写和解析
JSON实例：

// 描述一个人
var person = {
    "Name": "Bob",
    "Age": 32,
    "Company": "IBM",
    "Engineer": true
}
// 获取这个人的信息
var personAge = person.Age;
// 描述几个人
var members = [
    {
        "Name": "Bob",
        "Age": 32,
        "Company": "IBM",
        "Engineer": true
    },
    {
        "Name": "John",
        "Age": 20,
        "Company": "Oracle",
        "Engineer": false
    },
    {
        "Name": "Henry",
        "Age": 45,
        "Company": "Microsoft",
        "Engineer": false
    }
]
// 读取其中John的公司名称
var johnsCompany = members[1].Company;
// 描述一次会议
var conference = {
    "Conference": "Future Marketing",
    "Date": "2012-6-1",
    "Address": "Beijing",
    "Members": 
    [
        {
            "Name": "Bob",
            "Age": 32,
            "Company": "IBM",
            "Engineer": true
        },
        {
            "Name": "John",
            "Age": 20,
            "Company": "Oracle",
            "Engineer": false
        },
        {
            "Name": "Henry",
            "Age": 45,
            "Company": "Microsoft",
            "Engineer": false
        }
    ]
}
// 读取参会者Henry是否工程师
var henryIsAnEngineer = conference.Members[2].Engineer;

• JSONP

原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。
由于同源策略的限制，XMLHttpRequest值允许请求当前源的资源，为了实现跨域请求，当前阶段如果想通过纯web端跨域访问数据可以通过script标签实现，然后在服务器端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。该协议的要点就是允许用户传递一个callback参数给服务器，然后服务器端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来处理返回数据。
优点是兼容性好，简单易用，支持与浏览器与服务器双向通信。缺点是只支持GET请求。

<script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    };
    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script); 
    </script>

不再直接把远程js文件写死，而是编码实现动态查询，而这也正是jsonp客户端实现的核心部分，本例中的重点也就在于如何完成jsonp调用的全过程。我们看到调用的url中传递了一个code参数，告诉服务器我要查的是CA1998次航班的信息，而callback参数则告诉服务器，我的本地回调函数叫做flightHandler，所以请把查询结果传入这个函数中进行调用。OK，服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html

flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

5、new的实例化过程

1、创建一个空对象obj：var obj={};
2、设置新对象的constructor属性指向构造函数的prototype对象：
obj.proto=ClassA.prototype;
3、使用新对象调用函数，函数中的this被指向新实例化对象：
ClassA.call(obj);
4、将初始化完毕的新对象地址保存到等号左边的变量中。