ma 发布的文章

通常我们业务实际开发中离不开加密，比如密码加密、token加密、敏感信息加密等，下面介绍一些常用的加密方法。

  1. Base64加密
    Base64是基于64个可打印字符来表示二进制数据的一种方法。
    const btoa = window.btoa('zhang123') // 编码
    console.log('加密后', btoa)
    const atob = window.atob('emhhbmcxMjM=') // 解码
    console.log('解密后', atob)

总结：
优势：
1.base64 适合不同平台、不同语言的传输；
2.页面中内嵌使用 base64 格式的小图片，可减少了服务器访问次数；
3.二进制位转换 base64 算法简单，对性能影响不大；

缺点：
1.二进制文件转换为 base64 后，体积大概增加 1/3；
2.base64 无法缓存，要缓存只能缓存包含 base64 的文件，比如 js 或者 css；
3.面对大文件时，会消耗一定的 CPU 进行编解码。

  1. MD5加密(不可逆)
    MD5是一种单向哈希算法，即将任意长度的“消息”经过哈希运算，生成一个128位的“指纹”。

使用MD5加密可以将原始的字符串转化为不可逆的密文，从而保证数据在传输中不被篡改，提高安全性。在前端中，我们可以通过JS库调用md5加密函数进行字符串加密，以保护用户信息。

安装：
// 下载依赖
npm install js-md5 -s

// 引入
import { md5 } from 'js-md5';

// 打印
console.log('md5加密', md5('zhang123'))

加盐：
console.log('md5加密', MD5('zhang123'));
const salt = "A1B2C3";
// 加盐
console.log('md5加密加盐', MD5('zhang123' + salt));

多次加密：
console.log('md5加密', MD5('zhang123'));
const salt = "A1B2C3";
// 加盐
console.log('md5加密加盐', MD5('zhang123' + salt));
// 多次加密
console.log('md5加密加盐', MD5(MD5('zhang123')));

*{
    padding: 0px;
    margin: 0px;
}
.test{
    border: 1px solid red;
    width: 600px;
}
<div class="test">
    <img src="test.jpg" />
</div>

img与div之间存在着一个间隙，这个间隙是怎么产生的？应该怎么解决？下面我们一点点的探寻这个问题背后的一些原理：
请输入图片描述

baseline只是在内联元素中才有的概念，在块元素中并没有这种概念，也就是说只有在ifc下才会有这一概念，并且内联元素的vertical-align的默认值就为baseline，也就是根据基线对齐。
对应着baseline还有两条标准线，分别为bottom和top，下面这张图说明了三条线所处的位置：
请输入图片描述
img是一内联元素，其根据baseline对齐，那条间隙就是baseline到bottom的距离，既然现在问题搞清楚了，下面就来解决它：

解决问题：
解决这个问题有4种方法（欢迎大家补充，我只想到这4种）：
.line-height
给div.test添加样式line-height: 0px;就可以解决这个问题，这个原理很简单，因为line-height指的是bottom到top的距离，将其设置为0也就是代表着baseline与bottom之间的距离为0，自然那条间隙就消失啦；同理我们可以得出的就是指定font-size: 0px;也是可以解决，因为line-height在不指定时值默认为font-size * 一个系数(1.2 or other)，但是这种情况下不能有文字出现。
.img变成块元素
文章前部分讲到了baseline只是对于内联元素而言，自己的给img添加样式display: block;将其转为块元素自然间隙就会消失，不过这样也会产生一些副作用。
.给div.test添加height
这种方式比较简单那就让div.test只有图片那么高，这样也会有副作用，文字可能会移除
.改变vertical-align
改变垂直对齐方式，比如指定vertical-align: bottomorvertical-align: toporvertical-align: middle，可以很完美的解决这个问题。

其他解决方法 找到上面的div中的图片代码所在位置，为其设定属性style="display:block"，问题解决。
或者img下边有div（中有图片）设置img（div上面的object）‍其设定属性style="display:block"，问题ok。
display:block 意思是：让对象成为块级元素(比如a，span等)。

一般的块级元素诸如段落<p>、标题<h1><h2>...、列 表<uL><ol><dl> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。
而内联元素 则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........
块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。
  1. 1
  2. ...
  3. 12
  4. 13
  5. 14
  6. 15