（1）浏览器将自己支持的一套加密规则发送给网站。
（2）网站从中选出一组加密算法与HASH算法，并将自己的身份信息以证书的形式发回给浏览器。证书里面包含了网站地址，加密公钥，以及证书的颁发机构等信息。
（3）获得网站证书之后浏览器要做以下工作：
a) 验证证书的合法性（颁发证书的机构是否合法，证书中包含的网站地址是否与正在访问的地址一致等），如果证书受信任，则浏览器栏里面会显示一个小锁头，否则会给出证书不受信的提示。
b) 如果证书受信任，或者是用户接受了不受信的证书，浏览器会生成一串随机数的密码，并用证书中提供的公钥加密。
c) 使用约定好的HASH计算握手消息，并使用生成的随机数对消息进行加密，最后将之前生成的所有信息发送给网站。
（4）网站接收浏览器发来的数据之后要做以下的操作：
a) 使用自己的私钥将信息解密取出密码，使用密码解密浏览器发来的握手消息，并验证HASH是否与浏览器发来的一致。
b) 使用密码加密一段握手消息，发送给浏览器。
（5）浏览器解密并计算握手消息的HASH，如果与服务端发来的HASH一致，此时握手过程结束，之后所有的通信数据将由之前浏览器生成的随机密码并利用对称加密算法进行加密。
这里浏览器与网站互相发送加密的握手消息并验证，目的是为了保证双方都获得了一致的密码，并且可以正常的加密解密数据。其中非对称加密算法用于在握手过程中加密生成的密码，对称加密算法用于对真正传输的数据进行加密，而HASH算法用于验证数据的完整性。由于浏览器生成的密码是整个数据加密的关键，因此在传输的时候使用了非对称加密算法对其加密。非对称加密算法会生成公钥和私钥，公钥只能用于加密数据，因此可以随意传输，而网站的私钥用于对数据进行解密，所以网站都会非常小心的保管自己的私钥，防止泄漏。TLS握手过程中如果有任何错误，都会使加密连接断开，从而阻止了隐私信息的传输。
html代码
文本元素设置 display:inline-block position: relative;top:50%;transform: translateY(-50%)
容器元素设置 display: flex;align-items: center
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border值是另外计算的；即在标准模式下的盒模型，盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高=width/height+padding+border+margin。
在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和.在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
box-sizing: content-box;//宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。（标准盒模型）
box-sizing: border-box;// 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。（怪异盒模型）
box-sizing: inherit;// 规定应从父元素继承 box-sizing 属性的值。
浏览器不会生成属性为display: none;的元素。display: none;不占据空间，不响应事件，所以动态改变此属性时会引起重排。
元素会被隐藏，但是不会消失，依然占据空间。
会被子类继承，子类也可以通过显示的设置visibility: visible;来反隐藏。
visibility: hidden;不会触发该元素已经绑定的事件。
visibility: hidden;动态修改此属性会引起重绘。
transition无效。(会延迟n秒后hidden，但不会渐变)
opacity:0只是透明度为100%,元素隐藏，依然占据空间。
opacity:0 会被子元素继承,且子元素无法反隐藏。
opacity:0的元素依然能触发已经绑定的事件。
transition有效。
background：rgba(R, G, B, 0)，只是背景颜色透明，元素透明，依然占据空间。
background：rgba(R, G, B, 0)不会被子元素继承
依然能触发已经绑定的事件。
transition有效。
在元素当前dom脱离文档流(position:absolute)的前提下，设置z-index才起作用。
设置z-index：-1本质是改变当前dom的层叠上下文，使器置于其他元素之下，达到被隐藏的目的。
部分重排，不影响其他图层布局
修改对象的某一属性值，页面数据更新，且能被watch监听到。新增、删除对象属性页面数据不更新，对象的值改变，watch无法监听到。替换整个对象页面数据改变，watch能够监听到。
改变数组某一元素的值，页面数据不刷新，但是数组的值改变,watch无法监听。替换整个数组页面数据改变，watch能够监听。