1.两个div标签，如何控制标签左边固定，右边自适应，左边div宽度为100px.
(1)左边设置浮动，右边不设置宽度自定布局到右边
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 1000px;
height: 500px;
border: 1px solid #ccc;
}
.left{
width: 100px;
height: 100%;
background: red;
float: left;
}
.right{
overflow: hidden;/*解决左右两个块之间的重叠的问题，或者用margin-left:100px;来解决*/
background: green;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是左边,固定宽度</div>
<div class="right">我是右边,自适应</div>
</div>
</body>
</html>
这种方法是存在兼容问题的，如果只是在手机上用这种完全没有问题，但是如果在PC上会有兼容问题，在IE7下这种方法会出现问题，如果右边格子没有内容就不会出现问题，但是如果右边格子有内容并且是inline的，那么左边格子就会出现一条无法控制的分割线。
最好的解决办法就是左右都浮动，然后右边用负的margin-left把它拉回来，如果左右都浮动，左边100px,右边百分之百正常来说就是右边就被挤到了下面，所以用负的margin值把它拉回来，但是这样就会带来一个问题，左右会出现重叠的部分，解决办法就是在右边div里面再套一层，加一个正的margin-left,大小和左边相同，这种方法是所有的方法里面兼容性最好的，IE5都会支持，在没有table-cell和flex等方法的时候，流体布局都是用这种方式来做的。
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<style>
html, body {
margin: 0;
font-family: Helvetica;
font-size: 16px;
}
#page {
border-bottom: 1px solid #000;
height: 100px;
}
#page .left,
#page .right {
float: left;
}
#page .left {
width: 100px;
background-color: #f00;
}
#page .right {
width: 100%;
margin-left: -100px;
}
#page .content {
margin-left: 100px;/*解决左右出现重叠的情况*/
background-color: #ccc;
height: 50px;
}
</style>
</head>
<body>
<div id="page">
<div class="left">左边</div>
<div class="right">
<div class="content">右边</div>
</div>
</div>
</body>
</html>
(2)Flex布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 1000px;
height: 500px;
border: 1px solid #ccc;
display: flex;
}
.left{
width: 100px;
height: 100%;
background: red;
flex:none;
}
.right{
background: yellow;
height: 100%;
flex:1;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是左边,固定宽度</div>
<div class="right">我是右边,自适应</div>
</div>
</body>
</html>
这种方式是兼容性最差的，安卓5.0不支持，需要写前缀-webkit-box,ios8上也不支持。
(3)table布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 1000px;
height: 500px;
border: 1px solid #ccc;
display: table;
}
.left{
width: 100px;
height: 100%;
background: red;
display: table-cell;/* 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） */
}
.right{
background: orange;
height: 100%;
display: table-cell;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是左边,固定宽度</div>
<div class="right">我是右边,自适应</div>
</div>
</body>
</html>
兼容性是IE10以上才完美的支持，IE678不支持，IE9支持的不好，但这种方式在手机上是最好的，最方便的流体布局方式
(4)css动态计算宽度，clac
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 1000px;
height: 500px;
border: 1px solid #ccc;
overflow: hidden; /* 清除浮动 */
}
.left{
width: 100px;
height: 100%;
background: red;
float: left;
}
.right{
background: orange;
height: 100%;
width: calc(100% - 100px);
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是左边,固定宽度</div>
<div class="right">我是右边,自适应</div>
</div>
</body>
</html>
注：calc用法
兼容性是IE9开始支持，必须加前缀，但也会有各种各样的bug,手机上市安卓4.0以上才支持，但是兼容也不好
（5）利用定位
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 100%;
height: 500px;
border: 1px solid #ccc;
position:relative;
}
.left{
width: 100px;
height: 100%;
background: red;
position:absolute;
left:0;
top:0;
}
.right{
background: orange;
height: 100%;
position:absolute;
left:100px;
top:0px;
right:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是左边,固定宽度</div>
<div class="right">我是右边,自适应</div>
</div>
</body>
</html>
其实定位就有两种方式可以实现，另一种是左边设置好宽度不定位，右边定位设置好left值，也可以实现就不写具体的代码了，这种方式的兼容性仅次于浮动，可以兼容到IE7以上的浏览器。
总结：从运算时间上来讲，能用盒模型解决的，绝不用float或者定位。手机上常用的布局方式是table-cell比较好。
2.浏览器地址栏输入一个url后，到页面展示出来，中间经历了什么？
①首先，在浏览器地址栏中输入url。
②浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
③在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。
④浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）
⑤握手成功后，浏览器向服务器发送http请求，请求数据包。
⑥服务器处理收到的请求，将数据返回至浏览器。
⑦浏览器收到HTTP响应。
⑧读取页面内容，浏览器渲染，解析html源码。
⑨生成Dom树、解析css样式、js交互
⑩客户端和服务器交互，ajax请求
3.get和post的区别
GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。 GET和POST还有一个重大区别，简单的说：GET产生一个TCP数据包；POST产生两个TCP数据包。
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）； 而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
GET后退按钮/刷新无害，POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
GET书签可收藏，POST为书签不可收藏。
GET能被缓存，POST不能缓存 。
GET编码类型application/x-www-form-url，POST编码类型encodedapplication/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。
GET对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST无限制。
GET只允许 ASCII 字符。POST没有限制。也允许二进制数据。
与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
GET的数据在 URL 中对所有人都是可见的。POST的数据不会显示在 URL 中。
4.本地存储cookie,sessionstorage,localstorage
作者：知乎用户
（1）由于HTTP协议是无状态的协议，所以服务端需要记录用户的状态时，就需要用某种机制来识具体的用户，这个机制就是Session.典型的场景比如购物车，当你点击下单按钮时，由于HTTP协议无状态，所以并不知道是哪个用户操作的，所以服务端要为特定的用户创建了特定的Session，用用于标识这个用户，并且跟踪用户，这样才知道购物车里面有几本书。这个Session是保存在服务端的，有一个唯一标识。在服务端保存Session的方法很多，内存、数据库、文件都有。集群的时候也要考虑Session的转移，在大型的网站，一般会有专门的Session服务器集群，用来保存用户会话，这个时候 Session 信息都是放在内存的，使用一些缓存服务比如Memcached之类的来放 Session。
（2）思考一下服务端如何识别特定的客户？这个时候Cookie就登场了。每次HTTP请求的时候，客户端都会发送相应的Cookie信息到服务端。实际上大多数的应用都是用 Cookie 来实现Session跟踪的，第一次创建Session的时候，服务端会在HTTP协议中告诉客户端，需要在 Cookie 里面记录一个Session ID，以后每次请求把这个会话ID发送到服务器，我就知道你是谁了。有人问，如果客户端的浏览器禁用了 Cookie 怎么办？一般这种情况下，会使用一种叫做URL重写的技术来进行会话跟踪，即每次HTTP交互，URL后面都会被附加上一个诸如 sid=xxxxx 这样的参数，服务端据此来识别用户。
（3）Cookie其实还可以用在一些方便用户的场景下，设想你某次登陆过一个网站，下次登录的时候不想再次输入账号了，怎么办？这个信息可以写到Cookie里面，访问网站的时候，网站页面的脚本可以读取这个信息，就自动帮你把用户名给填了，能够方便一下用户。这也是Cookie名称的由来，给用户的一点甜头。
所以，总结一下：
Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；
Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。
优缺点：
（1）cookie
优点：
①极高的扩展性和可用性，通过良好的编程，控制保存在cookie中的session对象的大小
②通过加密和安全传输技术（SSL），减少cookie被破解的可能性
③控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点：
①Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉
②安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
（2）session
优点：
①如果要在诸多Web页间传递一个变量，那么用Session变量要比通过QueryString传递变量可使问题简化。
②你可以在任何想要使用的时候直接使用session变量，而不必事先声明它，这种方式接近于在VB中变量的使用。使用完毕后，也不必考虑将其释放，因为它将自动释放。
缺点：
①Session变量和cookies是同一类型的。如果某用户将浏览器设置为不兼容任何cookie，那么该用户就无法使用这个Session变量！②当一个用户访问某页面时，每个Session变量的运行环境便自动生成，这些Session变量可在用户离开该页面后仍保留20分钟！（事实上，这些变量一直可保留至“timeout”。“timeout”的时间长短由Web服务器管理员设定。一些站点上的变量仅维持了3分钟，一些则为10分钟，还有一些则保留至默认值20分钟。）所以，如果在Session中置入了较大的对象那就有麻烦了！随着站点访问量的增大，服务器将会因此而无法正常运行！
③因为创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。