前端面试题，3+1模式，主要是每天督促自己，多积累一些基础知识。
GitHub题目地址：https://github.com/haizlin/fe-interview
第1天：
[html] 页面导入样式时，使用link和@import有什么区别？
答案：
* link为XHTML标签，除了加载css外，还可以定义RSS等其他事务，@import为css标签，只能加载css文件
* link不存在兼容性问题，而@import是css2.1提出的，低版本的浏览器可能不支持
* 可通过js创建link标签，从而修改元素属性，但js无法操作@import
* 在页面加载过程中，遇到link标签会立即解析，但@import标签需等页面加载完成[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现
答案：https://www.jianshu.com/p/089b1512bb66
-
用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值
代码行数不超过15行，时间不超过10分钟
let arr = [];
function generate() {
if (arr.length < 5) {
let randomNumber = Math.ceil(Math.random() * 30 + 2);
if (arr.indexOf(randomNumber) > -1) {
generate();
} else {
arr.push(randomNumber);
generate();
}
}
}
generate();
console.log(arr);
第2天：
写一个方法去掉字符串中的空格
function trim(str, type) {
let map = {
left: /^\s+/g,
right: /\s+$/g,
both: /^\s+|\s+$/g,
all: /\s+/g
};
// 默认情况下，删除所有空格
let reg = type && map[type] ? map[type] : map.all;
let result = str.replace(reg, '');
if (type === 'middle') {
// 获取左边空格
let left = str.match(map.left)[0];
// 获取右边空格
let right = str.match(map.right)[0];
result = left + result + right;
}
return result;
}
第3天：
- [css] 在页面上隐藏元素的方法有哪些？
- display: none -> 元素不占据页面位置
- visibility: hidden -> 元素在页面中占据位置，但不可见
- opacity: 0 -> 透明度为0
- 利用position的absolute和relative，再结合left和top等属性
- transform: rotateX(90deg) / rotateY(90deg) / scale(0)
针对文本节点：
- font-size: 0
- text-indent: 大值
- [js] 去除字符串中最后一个指定的字符
function deleteChar(str, char) {
if (!str || !char) {
alert('传入的字符不合法');
}
let index = str.lastIndexOf(char);
if (index > -1) {
return str.substring(0, index) + str.substring(index+1);
}
return str;
}
这里主要考察字符串相关一些方法。
- str.length：获取字符串长度
获取某个字符： - str.charAt(number) ：获取索引为number的字符
- str.charCodeAt(number)：获取索引为number的ASCII码
- str[number]：含义与str.charAt(number)相同
截取字符串：(均不改变原始字符串)
str.substr(start， length)，若start为负值，则从末尾开始数
str.substring(start, end?)，不包含end的字符串；有负数直接转为0；无end，则默认到字符串结束；end值小于start值，则自动交换位置
-
str.slice(start, end?)：有负数表示从字符串末尾开始，-1表示最后一位，无end，默认到字符串结束
与正则相关：
1）str.replace(substr / RegExp, str)：
它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。2）str.search(substr / RegExp)：
str中第一个与 regexp 相匹配的子串的起始位置。
search() 方法不执行全局匹配，它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性，并且总是从字符串的开始进行检索，这意味着它总是返回 stringObject 的第一个匹配的位置。
3）str.match(RegExp)：
说明：若正则表达式中无g，则无论执行多少次match，都只匹配首次出现的子串，返回结果为类数组。matches[0]为匹配项，matches[1]为捕获组1，依次类推。
如果正则中有g，则返回所有的匹配项。
第4天
[html] HTML5的文件离线储存怎么使用，工作原理是什么？
[css] CSS选择器有哪些？哪些属性可以继承？
CSS选择器：
通配符*
id #container
class .container
标签名 div
相邻兄弟节点 +
直接子代元素 >
子孙元素 div p
伪类 :firstChild
伪元素::after ::before
可以继承的属性：
字体系列
文本系列
伪类扩展：
- :first-of-type // 表示一组兄弟元素中其类型的第一个元素，而不管其在兄弟节点中的位置如何
DOM结构：
<div>
<h1>HEAD1</h1>
<p>第一个P元素</p>
<p>第二个P元素</p>
<p>第三个P元素</p>
<p>第四个P元素</p>
</div>
style样式：
p:first-of-type {
color: #f00;
}
<div>
<p>第一个P元素<em>p里面的em元素</em></p>
<em>第二个em元素</em>
</div>
div em:first-of-type {
color: #f00;
}
- :last-of-type // 表示一组兄弟节点中某类型的最后一个元素
如果写成
parentNode ele:first-of-type的格式，则选中的元素既包括父元素的子元素的最后一个选定类别的元素，也包括子元素最后一个选定类别的元素，依次类推
DOM结构和样式表：
<p>
<em>我没有颜色 :(</em><br>
<span><em>我有颜色!</em></span><br>
<strong>我没有颜色 :(</strong><br>
<em>我有颜色 :D</em><br>
<span>
<em>我在子元素里，但没有颜色!</em><br>
<span style="text-decoration:line-through;">我没有颜</span>
<br>
<em>我却有颜色！</em><br>
</span>
<br>
<strong>我也没有颜色 :(</strong>
</p>
p em:last-of-type {
color: #8470FF;
}
3）:nth-of-type(an+b)
<div>
<div>这段不参与计数。</div>
<p>这是第一段。</p>
<p>这是第二段。</p>
<div>这段不参与计数。</div>
<p>这是第三段。</p>
<p>这是第四段。</p>
</div>
<style>
div p:nth-of-type(2n + 1) {
color: #f00;
}
div p:nth-of-type(2n) {
color: #8B864E;
}
</style>
4）:nth-last-of-type(an+b) 与:nth-of-type的用法类似，只是这个倒序计数
5）:nth-child(an + b):
:nth-child(an+b)这个 [CSS 伪类]首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为第（an+b）个元素的集合（n=0，1，2，3...（从1开始计数）
- 0n+3 或简单的 3 匹配第三个元素。
- 1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）
- 2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字
even来替换此表达式。 - 2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字
odd来替换此表达式。 - 3n+4 匹配位置为 4、7、10、13...的元素
6）:nth-last-child(an + b): 与nth-child(an + b)的功能类似，只是该方法倒序计数
7）:first-child表示一组兄弟节点中的第一个
<div>
<p>This text is selected!</p>
<p>This text isn't selected.</p>
</div>
<div>
<h2>This text isn't selected: it's not a `p`.</h2>
<p>This text isn't selected.</p>
</div>
<style>
p:first-child {
color: #FFD700;
}
</style>
8）
:last-child 父元素的最后一个子元素9）
:only-child父元素的唯一子元素(可一直追溯到子元素的子元素)-->等价于:first-child:last-child / :nth-child(1):nth-last-child(1)
<main>
<div>
<i>I am a lonely only child.</i>
</div>
<div>
<i>I have siblings.</i><br>
<b>So do I!</b><br>
<span>I also have siblings, <span>but this is an only child.</span></span>
</div>
</main>
<style>
main :only-child {
color: #f00;
}
</style>
10）:only-of-type 在所有的子元素中，只选中唯一类型的元素，而不管该元素有多少个兄弟节点。
<main id="main">
<div>I am `div` #1.</div>
<p>I am the only `p` among my siblings.</p>
<div>I am `div` #2.</div>
<div>I am `div` #3.
<i>I am the only `i` child.</i>
<em>I am `em` #1.</em>
<em>I am `em` #2.</em>
</div>
</main>
<style>
#main :only-of-type {
color: #0f0;
}
</style>
11）关于a链接 :link :visited :hover :active这四个属性的定义顺序为：Love Hate
a:link {
color: #FFD39B;
}
a:visited {
color: #FF6A6A;
}
a:hover {
color: #FFC1C1;
}
a:active {
color: #DAA520;
}
定义顺序不对，可能会导致:active伪类失效
12）:focus当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发
伪元素扩展：
::before: {
}
::after {
}
// selection支持的元素：color 、background-color 、cursor 、caret-color(插入光标的颜色)、outline 、 text-decoration 、text-emphasis-color、text-shadow
// 参考：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/::selection](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::selection)
::selection {
background-color: cyan;
}
// 首行
::first-line {
}
// 首个字符（中文或者应为）
::first-letter {
}
- [js] 写一个方法把下划线命名转成大驼峰命名
第5天
- [html] 简述超链接target属性的取值和作用
- _blank：在浏览器新的标签页打开一个页面
- _parent：用于框架集或者iframe，在a链接所在页面的父窗口中载入a链接的页面
- _self：在当前窗口载入a链接的页面
- _top：用于框架集或者iframe，在顶级窗口中载入a链接页面
_top和_parent 在框架集中跟top 、parent指向的窗口的含义一致
- [css] CSS3新增伪类有哪些并简要描述
答案见第4天 - [js] 写一个把字符串大小写切换的方法
function convertCase(str) {
if (!str || (typeof str !== 'string')) {
alert('请输入正确的字符串');
return;
}
for (var i = 0, len = str.length; i < len; i++) {
str = str.replace(str[i], str[i].search(/[a-z]/) > -1 ? str[i].toUpperCase() : str[i].toLowerCase());
}
}
// 使用了字符串的全局匹配
function convertCase(str) {
return str.replace(/([a-z]*)([A-Z]*)/g, function (m, $1, $2) {
return $1.toUpperCase() + $2.toLowerCase();
});
}
还可通过比较ASCII值来确定输入值是小写还是大写，但个人感觉不是很妥，还得需要记住ASCII值的大小。
第6天
- [html] label都有哪些作用？并举相应的例子说明
- 主要用于绑定文本和表单元素
- 两种用法：
-
<label for="username"></label><input type="text" id="username" class="username">或者<label><input type="text" class="username"></label>
- [css] 用css创建一个三角形，并简述原理
- [js] 写一个去除制表符和换行符的方法
第7天
[html] iframe框架都有哪些优缺点？
-
[css] 简述你对BFC规范的理解
BFC是block-formatting-context，翻译过来就是块格式化上下文。它规定了块级元素在页面中的定位方式。它是页面中一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC的生成：- 根元素
- float的值不为none（left / right）
- overflow的值不为visible （hidden / scroll / auto）
- display的值为inline-block、table-cell、table-caption
- position为非relative和static （absolute / fixed / sticky）
BFC的作用：
- 阻止margin塌陷
- 阻止浮动元素被块元素覆盖
- 阻止父元素高度塌陷（如果两个子元素都有float属性，则父元素高度会变为0）
- 自适应两栏或多栏布局
可参考：1）https://juejin.im/entry/59c3713a518825396f4f6969
2）https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
延伸 Inline formatting context(简称IFC)， G（grid）FC和F(flex)FC
[js] 统计某一字符或字符串在另一个字符串中出现的次数
个人写的比较挫的代码
function count(str, target) {
var reg = new RegExp(target, 'g');
var count = 0;
while(reg.test(str)) {
count++
}
return count;
}
GitHub上别人的代码：
// 1
function count(str, target) {
var reg = new RegExp(target, 'g');
return str.match(reg).length;
}
// 2
function count(str, target) {
return str.split(target).length - 1;
}
第8天
- [html] 简述下html5的离线储存原理，同时说明如何使用？
- [css] 清除浮动的方式有哪些及优缺点？
- [js] 写一个加密字符串的方法
