iframe框架都有哪些优缺点
优点
重载页面时不需要重载整个页面,只需要重载页面中的一个框架页
技术易于掌握,使用方便,可主要应用于不需搜索引擎来搜索的页面
方便制作导航栏
缺点
会产生很多页面,不容易管理
*不容易打印
对浏览器搜索引擎不友好
多框架的页面会增加服务器的http请求
简述你对BFC规范的理解
是CSS中的一个渲染机制,BFC就相当于一个盒子,内部的元素与外界的元素互不干扰。它不会影响外部的布局,外部的布局也不会影响到它。
形成条件(任意一条)
- float的值不是none
- position 的值不是static或者relative
- 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属性会把元素从标准文档流中抽离,直接结果就是外部盒子丢了两个孩子,因为内部没有其它盒子了,所以外部盒子只包裹文本节点内容,却把两个内部盒子扔在外面了。
解决方案
- 上面分析了问题出现的原因,不难找到第一种解决方案(既然孩子丢了,那就去找呗)——给外部盒子也添加浮动
把外部盒子也从标准文档流中抽离,让它和孩子们见面。
缺点:可读性差,不易于维护(别人很难理解为什么要给父元素也添上float),而且可能需要调整整个页面布局。
- 在外部盒子内最下方添上带clear属性的空盒子
可以是div也可以是其它块级元素,把
放在盒内底部,用最下面的空盒子清除浮动,把盒子重新撑起来。缺点:引入了冗余元素
- 用overflow:hidden清除浮动
给外部盒子添上这个属性就好了,非常简单。
缺点:有可能造成溢出元素不可见,影响展示效果。
- 用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)));