前端面试题目汇总

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});