2020-08-08 html的https支持 + css的position absolute与float + JS的实现变态跳台阶 + 软技能的图片压缩工具

2020-08-08 题目来源：http://www.h-camel.com/index.html

[html] H5的哪些特性需要https支持呢？

2017年1月发布的chrome 56浏览器开始把收集密码或信用卡数据的HTTP页面标记为 不安全 ，带有输入数据的HTTP页面和所有以无痕模式浏览的HTTP页面都会被标记为 不安全 。

HTTP与HTTPS

HTTP是一种超文本传输协议，基于请求与响应，无状态的应用层协议，常基于TCP/IP协议传输数据。 HTTP/2提出的多路复用：通过单一的HTTP/2请求发起多重的请求响应消息，实现多路并行而不是建立多个TCP连接。

HTTPS是一种通过计算机网络进行安全通信的传输协议，经由HTTP进行通信，利用SSL/TLS(TLS是传输层加密协议，前身是SSL协议)建立信道，加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证，同时保护交换数据的隐私与完整性。

HTTPS的特点： 内容加密；身份验证；保护数据完整性。

[css] 请说说position:absolute和float有什么不同？

元素排版布局的过程是从左到右从上到下的流式排列。脱离文档流的元素： 没有实际高度，都是块级元素。

 .firstdiv{
    background-color:rgba(125,125,235,0.4);
    height:200px;
    width: 200px;
  }
  .seconddiv{
    background-color: #faf;
    height:300px;
    width: 300px;
    border:1px solid red;
  }
  <div class="firstdiv">
     这是第一个DIV
  </div>
  <div class="seconddiv">
     这是第二个DIV
  </div>

1.position: absolute; 会完全脱离文本流。根据第一个非static定位的父级元素进行定位，一般父级定位会设置为relative。上例中设置firstdiv为absolute，那么两个div会重合。

2.float，类似于印刷中的文字环绕效果，浮动的元素依然是文档流的一部分，可以说float是一种伪脱离，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。

 

可以参考文章： https://blog.csdn.net/qq_21184771/article/details/56049662

 

[js] 使用js实现变态跳台阶

斐波那契数列

https://blog.csdn.net/zdhui_fly/article/details/81114687

[软技能] 你是如何压缩图片的？用的什么工具？

场景： 用户上传图片，随便一张就有几M大，那么交给后端区处理图片的大小、质量，不仅影响传输效率，而且会对服务器造成不必要的压力。所以，从前端开始进行图片压缩就显得非常有必要了。

这里有个框架 weui框架 https://github.com/Tencent/weui

实际使用 https://zhuanlan.zhihu.com/p/27823933