每日思考（2020/05/05）

题目概览

• 怎样禁止表单记住密码自动填充？
• 请说说*{box-sizing: border-box;}的作用及好处有哪些？
• 对base64的理解，它的使用场景有哪些？

题目解答

怎样禁止表单记住密码自动填充？

• 原理：

  • display:none; 隐藏用，隐藏后不占位置
  • visibility:hidden; 隐藏用，隐藏后占原来的位置
  • position:absolute;z-index:-1; 隐藏用，隐藏与否取决于z-index相对的值
  • autocomplete:"off"; 这个属性有时失效，有个解决办法是将off改为new-password

• 实现

  <input type="text" value="admin" style="position: absolute;z-index: -1;" disabled autocomplete = "off"/><!-- 这个username会被浏览器记住，随便用个admin-->
  <input type="password" value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/>
  <p><input type="text" maxlength="20" placeholder="用户名" id="name" name="name" autocomplete = "off"/></p>
  <p><input type="password" maxlength="20" placeholder="密码" id="pwd" name="pwd" autocomplete = "off"/></p>
  <p><input type="text" maxlength="4" placeholder="验证码" id="vcode" name="vcode" autocomplete = "off"/><img id="vcode" title="点击更换验证码" /></p>
  <p><input type="button" value="登录" id="login"/></p>
  <p style="visibility: hidden;"><input type="password" value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/></p><!-- 这个password的值会被浏览器记住，随便用个空格 -->
  

• 参考：

  • web安全：防止浏览器记住或自动填写用户名和密码(表单)的终极解决方案
  • 如何关闭表单自动填充

请说说*{box-sizing: border-box;}的作用及好处有哪些？

• 作用: 将padding和border包括在width内
• 好处: 更符合我们通常对一个「盒子」尺寸的认知,省掉一些计算

对base64的理解，它的使用场景有哪些？

• 理解：base64 最早就是用来邮件传输协议中的，原因是邮件传输协议只支持 ascii 字符传递，因此如果要传输二进制文件，如：图片、视频是无法实现的。因此 base64 就可以用来将二进制文件内容编码为只包含 ascii 字符的内容。
• 使用场景：
  • 上传图片时 先将图片转化为base64 然后上传
  • 对于小质量的图片 我们可以转化为base64 在页面展示
  • url 通过base64加密