面试题 第7和8天

iframe框架都有哪些优缺点

优点
重载页面时不需要重载整个页面，只需要重载页面中的一个框架页
技术易于掌握，使用方便，可主要应用于不需搜索引擎来搜索的页面
方便制作导航栏
缺点
会产生很多页面，不容易管理
*不容易打印
对浏览器搜索引擎不友好
多框架的页面会增加服务器的http请求

简述你对BFC规范的理解

是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它。

形成条件（任意一条）

1. float的值不是none
2. position 的值不是static或者relative
3. display的值是inline-block,table-cell,flex,table-caption或者inline-flex

• overflow的值不是visible

特性

• 内部的盒子会在垂直方向上一个接一个的放置
• 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
• 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

统计某一字符或字符串在另一个字符串中出现的次数

function strCount(str, target) {
  let count = 0
  if (!target) return count
  while(str.match(target)) {
    str = str.replace(target, '')
    count++
  }
  return count
}

console.log(strCount('abcdef abcdef a', 'abc'))

清除浮动的方式有哪些及优缺点？

什么是盒子塌陷？
外部盒子本应该包裹住内部的浮动盒子，结果却没有。

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

解决方案

1. 上面分析了问题出现的原因，不难找到第一种解决方案（既然孩子丢了，那就去找呗）——给外部盒子也添加浮动

把外部盒子也从标准文档流中抽离，让它和孩子们见面。
缺点：可读性差，不易于维护（别人很难理解为什么要给父元素也添上float），而且可能需要调整整个页面布局。

2. 在外部盒子内最下方添上带clear属性的空盒子

可以是div也可以是其它块级元素，把

放在盒内底部，用最下面的空盒子清除浮动，把盒子重新撑起来。
缺点：引入了冗余元素

3. 用overflow:hidden清除浮动

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

4. 用after伪元素清除浮动

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

写一个加密字符串的方法

function strEncrypt(str) {
  var sault = 3;
  return str
    .split("")
    .map(c => {
      return String.fromCharCode(c.charCodeAt(0) + sault);
    })
    .join("");
}
function strDecrypt(str) {
  var sault = 3;
  return str
    .split("")
    .map(c => {
      return String.fromCharCode(c.charCodeAt(0) - sault);
    })
    .join("");
}

var str = "hello, world";
console.log(strEncrypt(str));
console.log(strDecrypt(strEncrypt(str)));