2018前端面试题(三 )

1.两个div标签,如何控制标签左边固定,右边自适应,左边div宽度为100px.

(1)左边设置浮动,右边不设置宽度自定布局到右边

[html]  view plain  copy
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6.     <style>  
  7.         .container{  
  8.             width: 1000px;  
  9.             height: 500px;  
  10.             border: 1px solid #ccc;  
  11.         }  
  12.         .left{  
  13.             width: 100px;  
  14.             height: 100%;  
  15.             background: red;  
  16.             float: left;  
  17.         }  
  18.         .right{  
  19.             overflow: hidden;/*解决左右两个块之间的重叠的问题,或者用margin-left:100px;来解决*/  
  20.             background: green;  
  21.             height: 100%;  
  22.         }  
  23.     </style>  
  24. </head>  
  25. <body>  
  26.     <div class="container">  
  27.         <div class="left">我是左边,固定宽度</div>  
  28.         <div class="right">我是右边,自适应</div>  
  29.     </div>  
  30. </body>  
  31. </html>  

这种方法是存在兼容问题的,如果只是在手机上用这种完全没有问题,但是如果在PC上会有兼容问题,在IE7下这种方法会出现问题,如果右边格子没有内容就不会出现问题,但是如果右边格子有内容并且是inline的,那么左边格子就会出现一条无法控制的分割线。

    最好的解决办法就是左右都浮动,然后右边用负的margin-left把它拉回来,如果左右都浮动,左边100px,右边百分之百正常来说就是右边就被挤到了下面,所以用负的margin值把它拉回来,但是这样就会带来一个问题,左右会出现重叠的部分,解决办法就是在右边div里面再套一层,加一个正的margin-left,大小和左边相同,这种方法是所有的方法里面兼容性最好的,IE5都会支持,在没有table-cell和flex等方法的时候,流体布局都是用这种方式来做的。

    具体代码如下:

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">  
  7.     <style>  
  8.         html, body {  
  9.             margin: 0;  
  10.             font-family: Helvetica;  
  11.             font-size: 16px;  
  12.         }  
  13.         #page {  
  14.             border-bottom: 1px solid #000;  
  15.             height: 100px;  
  16.         }  
  17.         #page .left,  
  18.         #page .right {  
  19.             float: left;  
  20.         }  
  21.         #page .left {  
  22.             width: 100px;  
  23.             background-color: #f00;  
  24.         }  
  25.         #page .right {  
  26.             width: 100%;  
  27.             margin-left: -100px;  
  28.              
  29.         }  
  30.         #page .content {  
  31.             margin-left: 100px;/*解决左右出现重叠的情况*/  
  32.             background-color: #ccc;  
  33.             height: 50px;  
  34.         }  
  35.     </style>  
  36. </head>  
  37. <body>  
  38. <div id="page">  
  39.     <div class="left">左边</div>  
  40.     <div class="right">  
  41.         <div class="content">右边</div>  
  42.     </div>  
  43. </div>  
  44. </body>  
  45. </html>  

(2)Flex布局

[html]  view plain  copy
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6.     <style>  
  7.         .container{  
  8.             width: 1000px;  
  9.             height: 500px;  
  10.             border: 1px solid #ccc;  
  11.             display: flex;  
  12.         }  
  13.         .left{  
  14.             width: 100px;  
  15.             height: 100%;  
  16.             background: red;  
  17.             flex:none;  
  18.         }  
  19.         .right{  
  20.             background: yellow;  
  21.             height: 100%;  
  22.             flex:1;  
  23.         }  
  24.     </style>  
  25. </head>  
  26. <body>  
  27.     <div class="container">  
  28.         <div class="left">我是左边,固定宽度</div>  
  29.         <div class="right">我是右边,自适应</div>  
  30.     </div>  
  31. </body>  
  32. </html>  

这种方式是兼容性最差的,安卓5.0不支持,需要写前缀-webkit-box,ios8上也不支持。

(3)table布局

[html]  view plain  copy
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6.     <style>  
  7.         .container{  
  8.             width: 1000px;  
  9.             height: 500px;  
  10.             border: 1px solid #ccc;  
  11.             display: table;  
  12.         }  
  13.         .left{  
  14.             width: 100px;  
  15.             height: 100%;  
  16.             background: red;  
  17.             display: table-cell;/* 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) */  
  18.         }  
  19.         .right{  
  20.             background: orange;  
  21.             height: 100%;  
  22.             display: table-cell;  
  23.         }  
  24.     </style>  
  25. </head>  
  26. <body>  
  27.     <div class="container">  
  28.         <div class="left">我是左边,固定宽度</div>  
  29.         <div class="right">我是右边,自适应</div>  
  30.     </div>  
  31. </body>  
  32. </html>  

兼容性是IE10以上才完美的支持,IE678不支持,IE9支持的不好,但这种方式在手机上是最好的,最方便的流体布局方式

(4)css动态计算宽度,clac

[html]  view plain  copy
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6.     <style>  
  7.         .container{  
  8.             width: 1000px;  
  9.             height: 500px;  
  10.             border: 1px solid #ccc;  
  11.             overflow: hidden; /* 清除浮动 */  
  12.         }  
  13.         .left{  
  14.             width: 100px;  
  15.             height: 100%;  
  16.             background: red;  
  17.             float: left;  
  18.         }  
  19.         .right{  
  20.             background: orange;  
  21.             height: 100%;  
  22.             width: calc(100% - 100px);  
  23.             float: right;  
  24.         }  
  25.     </style>  
  26. </head>  
  27. <body>  
  28.     <div class="container">  
  29.         <div class="left">我是左边,固定宽度</div>  
  30.         <div class="right">我是右边,自适应</div>  
  31.     </div>  
  32. </body>  
  33. </html>  

注:calc用法


兼容性是IE9开始支持,必须加前缀,但也会有各种各样的bug,手机上市安卓4.0以上才支持,但是兼容也不好

(5)利用定位

[html]  view plain  copy
  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4.     <meta charset="UTF-8">    
  5.     <title>Document</title>    
  6.     <style>    
  7.         .container{    
  8.             width: 100%;    
  9.             height: 500px;    
  10.             border: 1px solid #ccc;    
  11.             position:relative;    
  12.         }    
  13.         .left{    
  14.             width: 100px;    
  15.             height: 100%;    
  16.             background: red;    
  17.             position:absolute;    
  18.             left:0;    
  19.             top:0;    
  20.         }    
  21.         .right{    
  22.             background: orange;    
  23.             height: 100%;    
  24.             position:absolute;    
  25.             left:100px;    
  26.             top:0px;    
  27.             right:0px;    
  28.         }    
  29.     </style>    
  30. </head>    
  31. <body>    
  32.     <div class="container">    
  33.         <div class="left">我是左边,固定宽度</div>    
  34.         <div class="right">我是右边,自适应</div>    
  35.     </div>    
  36. </body>    
  37. </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

作者:知乎用户

链接:https://www.zhihu.com/question/19786827/answer/28752144

(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变量将会导致代码不可读而且不好维护。


猜你喜欢

转载自blog.csdn.net/qq_36192099/article/details/80227301
今日推荐