04
[html] 頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？
1.加載時(shí)間不同
link引用css時(shí)，在頁(yè)面載入的同時(shí)加載css；@import則是在頁(yè)面加載完畢之后再去加載css，也就是說(shuō)@import在網(wǎng)速慢的時(shí)候加載css的速度沒(méi)有l(wèi)ink快。
2.兼容性不同
link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；@import是CSS2.1新定義的，老瀏覽器不支持
3.使用JS操作樣式
用JS操作樣式時(shí)只能用link標(biāo)簽；JS操作不了@import
4.導(dǎo)入樣式可以避免過(guò)多頁(yè)面指向同一css文件
當(dāng)網(wǎng)站的頁(yè)面數(shù)達(dá)到一定規(guī)模，link標(biāo)簽的方式可能會(huì)因?yàn)檫^(guò)多頁(yè)面調(diào)用同一css而造成速度下降。
[css] 圣杯布局和雙飛翼布局的理解和區(qū)別，并用代碼實(shí)現(xiàn)
1.理解：兩者都是經(jīng)典三欄布局，左右兩邊固定寬度，中間自適應(yīng)，且中間會(huì)在dom結(jié)構(gòu)中被優(yōu)先渲染
2.區(qū)別：實(shí)現(xiàn)方式不同。圣杯布局設(shè)置中間的div的內(nèi)邊框?qū)崿F(xiàn)；雙飛翼布局在中間的div內(nèi)置了一個(gè)inside-div設(shè)置它的外邊框來(lái)實(shí)現(xiàn)。
代碼實(shí)現(xiàn)：
圣杯布局：
dom結(jié)構(gòu)：
<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結(jié)構(gòu)：
<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] 用遞歸算法實(shí)現(xiàn)，數(shù)組長(zhǎng)度為5且元素的隨機(jī)數(shù)在2-32間不重復(fù)的值
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 徑向漸變
過(guò)渡
transition
自定義動(dòng)畫(huà)
@Keyframes
animation
邊框圓角
border-radius
2d/3d轉(zhuǎn)換
transform
媒體查詢
@media
彈性盒布局
display: flex;
[js] 寫(xiě)一個(gè)方法去掉字符串中的空格,要求傳入不同的類型分別能去掉前、后、前后、中間的空格
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 : // 沒(méi)傳默認(rèn)全部，且為下去除中間空格做鋪墊
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] 在頁(yè)面上隱藏元素的方法有哪些？
占位:
visibility: hidden; 設(shè)置元素為不可見(jiàn)，但是會(huì)渲染
margin-left: -100%; 向左位移整個(gè)屏幕
opacity: 0; 設(shè)置透明度為0
transform: scale(0); 是元素縮放為0的大小
不占位:
display: none; 設(shè)置display為none，頁(yè)面不會(huì)渲染
width: 0; height: 0; overflow: hidden; 設(shè)置寬高為0
僅對(duì)塊內(nèi)文本元素:
text-indent: -9999px; text-indent 屬性規(guī)定文本塊中首行文本的縮進(jìn)。如果使用負(fù)值，那么首行會(huì)被縮進(jìn)到左邊。
font-size: 0; 設(shè)置字體大小為0
[js] 去除字符串中最后一個(gè)指定的字符
var str = prompt("請(qǐng)輸入目標(biāo)字符串");
var target = prompt("請(qǐng)輸入您要?jiǎng)h除的字符");
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} 里沒(méi)有您要?jiǎng)h除的字符 ${target} `
} else {
return ` ${str} 不是字符串！`
}
}
alert(func(str, target));
