【前端每日知识3_第8天

最新推荐文章于 2023-09-07 00:04:48 发布

祭夜醉美

最新推荐文章于 2023-09-07 00:04:48 发布

阅读量57

点赞数

分类专栏：前端求职文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_44665456/article/details/127065750

版权

前端求职专栏收录该内容

50 篇文章 0 订阅

订阅专栏

第8天 (2019-04-24)  
    - [html] [简述下html5的离线存储原理，同时说明如何使用？](https://github.com/haizlin/fe-interview/issues/22)
    - [css] [清除浮动的方式有哪些及优缺点？](https://github.com/haizlin/fe-interview/issues/23)
    - [js] [写一个加密字符串的方法](https://github.com/haizlin/fe-interview/issues/24)

html:

原理：

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

①　页面头部像下面一样加入一个manifest的属性。

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
	...
</html>
在cache.manifest文件的编写离线存储的资源。

CACHE MANIFEST
    	#v0.1
    	CACHE:
   	 		js/index.js
    		css/index.css
    	NETWORK:
    		images/logo.png
    	FALLBACK:
    		*.html /404.html /* / /404.html 或 /html/ /404.html 也可*/
以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更新manifest以实现浏览器重新下载新的文件，可以是版本号，时间戳或md5码等。

离线存储的manifest一般由三个部分组成：

①　CACHE：必选，表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。

②　NETWORK：可选，可以使用通配符，表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

③　FALLBACK：可选，表示如果访问第一个资源失败，那么就使用第二个资源来替换他，如/html/ /404.html表示用 “404.html” 替代 /html/ 目录中的所有文件，/ /404.html表示用 “404.html” 替代当前目录中的所有文件，*.html /404.html表示用 “404.html” 替代 所有html文件。 

原文链接：https://blog.csdn.net/zhouziyu2011/article/details/58588546

css:

这个问题刚好有思考整理过，今天刚好复习一下。
原文链接：https://xiangshuo.blog.csdn.net/article/details/52749993

回答前的唠叨：

在现在的实际工作当中我已经很少用浮动来布局了，真的很少，刚开始学习的时候用的还蛮多，现在Flex布局，标准文档流以及 定位 已经可以满足大部分的布局需求了。
浮动带来的问题是盒子塌陷问题，所以我们就来解决这个问题吧
什么是盒子塌陷？
外部盒子本应该包裹住内部的浮动盒子，结果却没有。

问题出现的原因
父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto，就会出现这种情况，如果父元素不包含任何的可见背景，这个问题会很难被注意到。
因为子元素设置了float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，因为内部没有其它盒子了，所以外部盒子只包裹文本节点内容，却把两个内部盒子扔在外面了。

解决方案

上面分析了问题出现的原因，不难找到第一种解决方案（既然孩子丢了，那就去找呗）——给外部盒子也添加浮动
把外部盒子也从标准文档流中抽离，让它和孩子们见面。
缺点：可读性差，不易于维护（别人很难理解为什么要给父元素也添上float），而且可能需要调整整个页面布局。

在外部盒子内最下方添上带clear属性的空盒子
可以是div也可以是其它块级元素，把 <div style="clear:both;"></div>放在盒内底部，用最下面的空盒子清除浮动，把盒子重新撑起来。
缺点：引入了冗余元素

用overflow:hidden清除浮动
给外部盒子添上这个属性就好了，非常简单。
缺点：有可能造成溢出元素不可见，影响展示效果。

用after伪元素清除浮动
给外部盒子的after伪元素设置clear属性，再隐藏它
这其实是对空盒子方案的改进，一种纯CSS的解决方案，不用引入冗余元素。

.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}
这也是bootstrap框架采用的清除浮动的方法。

题外话

其实还有一种最直接的办法：给每个盒子规定width和height，要多大给多大即可。但这并不算什么解决方案，因为这样的布局不是内容自适应的，但如果页面内容极少发生变动，这也是一个不错的方案，因为它的兼容性是毋庸置疑的。

JS:

// 方法一：

仅支持浏览器端：

function encode (str) {
	return btoa(encodeURIComponent(str));
}

function decode (str) {
	return decodeURIComponent(atob(str));
}
源自阮一峰《JavaScript 标准教程》

// 方法二：
// 利用 base64, 浏览器环境自带 btoa / atob 方法
// Node.js 需要引入相关库
const str = "abcdefg";

console.log(btoa(str));
console.log(atob(btoa(str)));

// 凯撒密码
const encodeCaesar = ({str = "", padding = 3}) =>
  !str
    ? str
    : str
        .split("")
        .map((s) => String.fromCharCode(s.charCodeAt() + padding))
        .join("");

const decodeCaesar = ({str = "", padding = 3}) =>
  !str
    ? str
    : str
        .split("")
        .map((s) => String.fromCharCode(s.charCodeAt() - padding))
        .join("");

console.log(encodeCaesar({str: "hello world"}));
console.log(decodeCaesar({str: "khoor#zruog"}));