web前端开发面试题(七)
前端面试题第七天
一、HTML 部分
1.1 iframe框架都有哪些优缺点
在讲iframe框架之前 先聊聊iframe吧
定义：iframe是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架）
<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
1.2 iframe一些常用的属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | left right top center bottom | HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 。 |
| frameborder | 0 | HTML5 不支持。规定是否显示 周围的边框。 |
| height | px | 规定 的高度。 |
| longdesc | url | url5 不支持。规定一个页面，该页面包含了有关 的较长描述。 |
| marginheight | pixels | HTML5 不支持。规定 的顶部和底部的边距。 |
| marginwidth | pixels | HTML5 不支持。规定 的左侧和右侧的边距。 |
| name | name | 规定 的名称。 |
| sandbox(#) | allow-forms allow-same-origin allow-scripts allow-top-navigation | 对 的内容定义一系列额外的限制。 |
| scrolling | yes no auto | HTML5 不支持。规定是否在 中显示滚动条。 |
| seamles(#)() | seamless | 规定 看起来像是父文档中的一部分。 |
| src | URL | 规定在 中显示的文档的 URL。 |
| srcdoc(#) | HTML_code | 规定页面中的 HTML 内容显示在 中。 |
| width | pixels | 规定 的宽度。 |
1.3 iframe小案例
01.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Documenttitle>
<style>
html,
body {
position: relative;
height: 100%;
}
iframe {
display: none;
position: absolute;
width: 50%;
height: 50%;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
a {
margin: 200px 0 0 480px;
}
style>
head>
<body>
<a class="btn btn-success" href="javascript:;">添加信息a>
<iframe src="./02.html" frameborder=0>iframe>
<script>
document.querySelector('a').addEventListener('click', () => {
let iframe = document.querySelector('iframe').style.display = 'block'
})
script>
body>
html>
02.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
body {
background-color: #eee;
}
style>
head>
<body>
<input type="text" placeholder="请输入内容">
body>
html>
示例动图：
1.4 总结
优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
缺点：
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。 分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。
二、CSS 部分
2.1 对BFC规范的理解
概念：BFC全称Block Formatting Context ，中文直译为块级格式上下文。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
通俗的来说：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
浮动元素会创建 BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。
<div class="a">div>
<div class="b">div>
菜鸡理解: a盒子里边的元素不会影响b盒子里的元素
2.2 如何触发BFC
- 浮动元素 ：float 除 none 以外的值 .
- 绝对定位元素：position（absolute，fixed）
- display ：inline-block, table-cell, table-caption, flex, inline-flex
- overflow ：除了 visible 以外的值（hidden，auto，scroll）
三、 JS 部分
3.1 某一字符或字符串在另一个字符串中出现的次数
<script>
function num(str, parentStr){
// 字符串分割成数组
// 因为下标从0开始 所以分割几次 长度就需要-1
return parentStr.split(str).length - 1
}
console.log(num('c','web_chicken form CSDN'))
</script>
若：
return parentStr.split(str) // 输出结果为 ["web_", "hi", "ken form CSDN"]
我们可以看到 数组长度为3 数组长度-1 就是我们要的c 也就是出现的次数