04
[html] 页面导入样式时，使用link和@import有什么区别？
1.加载时间不同
link引用css时，在页面载入的同时加载css；@import则是在页面加载完毕之后再去加载css，也就是说@import在网速慢的时候加载css的速度没有link快。
2.兼容性不同
link是XHTML标签，无兼容问题；@import是CSS2.1新定义的，老浏览器不支持
3.使用JS操作样式
用JS操作样式时只能用link标签；JS操作不了@import
4.导入样式可以避免过多页面指向同一css文件
当网站的页面数达到一定规模，link标签的方式可能会因为过多页面调用同一css而造成速度下降。
[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现
1.理解：两者都是经典三栏布局，左右两边固定宽度，中间自适应，且中间会在dom结构中被优先渲染
2.区别：实现方式不同。圣杯布局设置中间的div的内边框实现；双飞翼布局在中间的div内置了一个inside-div设置它的外边框来实现。
代码实现：
圣杯布局：
dom结构：
<body>
<div id="header">header</div>
<div id="bd">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
样式：
html, body {
margin: 0;
}
#header {
height: 50px;
background: #666;
text-align: center;
}
#bd {
padding: 0 200px 0 180px;
height: 100px;
}
#middle {
float: left;
width: 100%;
height: 100px;
background: blue;
}
#left {
float: left;
width: 180px;
height: 100px;
margin-left: -100%;
background: #0c9;
position: relative;
right: 180px;
}
#right {
float: left;
width: 200px;
height: 100px;
margin-left: 200px;
background: #0c9;
position: relative;
left: 200px;
}
#footer {
height: 100px;
background: #666;
text-align: center;
}
双飞翼布局：
dom结构：
<body>
<div id="header">header</div>
<div id="middle">
<div id="inside">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="footer">footer</div>
</body>
样式：
html, body {
margin: 0;
}
#header {
height: 50px;
background: #666;
text-align: center;
}
#middle {
float: left;
width: 100%;
height: 100px;
background: blue;
}
#inside {
margin: 0 200px 0 180px;
height: 100px;
}
#left {
float: left;
width: 180px;
height: 100px;
margin-left: -100%;
background: #0c9;
}
#right {
float: left;
width: 200px;
height: 100px;
margin-left: -200px;
background: #0c9;
}
#footer {
clear: both;
height: 100px;
background: #666;
text-align: center;
}
[js] 用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值
var result = [];
var num = getRandom(2, 23);
function func() {
if(result.indexOf(num) < 0){
result.push(num);
} else {
num = getRandom(2, 23);
}
if(result.length === 5) {
return;
} else {
func();
}
}
function getRandom(max, min) {
return Math.floor(Math.random() * (max - min) + min)
}
func()
console.log(result);
05
[html] html的元素有哪些（包含H5）？
h,
a,
p,
span,div,
img,
ul,ol,li,
table,tr,td,tbody,thead,
form,input,label,select,button,
i,b,br,em,pre,textarea,hr,strong
section,aside,main,footer,header,article,nav,
audio,video,source,
canvas,
progress
[css] CSS3有哪些新增的特性？
文字/盒子阴影
text-shadow
box-shadow
颜色渐变
linear-gradient 线性渐变
radial-gradient 径向渐变
过渡
transition
自定义动画
@Keyframes
animation
边框圆角
border-radius
2d/3d转换
transform
媒体查询
@media
弹性盒布局
display: flex;
[js] 写一个方法去掉字符串中的空格,要求传入不同的类型分别能去掉前、后、前后、中间的空格
function trim(str, type) {
let reg = '';
let newStr = '';
switch(type) {
case 'left' : // 去除左边
Reg = /^[\s]+/g;
break;
case 'right' : // 去除右边
Reg = /([\s]*)$/g;
break;
case 'both' : // 去除两边
Reg = /(^\s*)|(\s*$)/g
break;
case 'middle' : // 去除中间
let RegLeft = str.match(/(^\s*)/g)[0];
let RegRight = str.match(/(\s*$)/g)[0];
newStr = RegLeft + newStr + RegRight;
break;
default : // 没传默认全部，且为下去除中间空格做铺垫
Reg = /[\s]+/g;
break;
}
if(reg === '') {
return newStr;
} else {
return str.replace(reg, '');
}
}
06
[html] HTML全局属性(global attribute)有哪些（包含H5）？
class,id,style,data-*,alt,src,hidden,title,placeholder,name,href,disabled,value
[css] 在页面上隐藏元素的方法有哪些？
占位:
visibility: hidden; 设置元素为不可见，但是会渲染
margin-left: -100%; 向左位移整个屏幕
opacity: 0; 设置透明度为0
transform: scale(0); 是元素缩放为0的大小
不占位:
display: none; 设置display为none，页面不会渲染
width: 0; height: 0; overflow: hidden; 设置宽高为0
仅对块内文本元素:
text-indent: -9999px; text-indent 属性规定文本块中首行文本的缩进。如果使用负值，那么首行会被缩进到左边。
font-size: 0; 设置字体大小为0
[js] 去除字符串中最后一个指定的字符
var str = prompt("请输入目标字符串");
var target = prompt("请输入您要删除的字符");
function func(str, target) {
if (typeof str === "string" && str.lastIndexOf(target) !== -1) {
var index = str.lastIndexOf(target);
return str.substring(0, index) + str.substring(index + 1);
} else if (typeof str === "string" && str.lastIndexOf(target) === -1) {
return ` ${str} 里没有您要删除的字符 ${target} `
} else {
return ` ${str} 不是字符串！`
}
}
alert(func(str, target));
