一. 簡答題
1. 行內(nèi)元素有哪些矫俺？塊元素有哪些？CSS盒模型阳仔？
解析：這一個最基本的題目，不多言。
- 元素分類
|類型|元素|
|:-|
|行內(nèi)元素|span a font i b u em strong|
|塊元素|div h1~h6 p pre hr ul ol li dl table form |
- CSS盒模型
CSS盒模型包含內(nèi)容(content)近范、填充(padding)嘶摊、邊框(border)和邊界(margin)。
2. CSS引入的方式有哪些评矩？link與@import的區(qū)別叶堆？
@import因?yàn)樽陨淼膰?yán)重缺點(diǎn)，已經(jīng)完全不再使用了斥杜。這個問題只好做歷史題記憶了虱颗。
- CSS引入的方式
- 內(nèi)聯(lián)樣式/行內(nèi)式
標(biāo)簽屬性style設(shè)定CSS樣式。 - 內(nèi)部樣式表/內(nèi)嵌式
<head>
<style type="text/css">
/* CSS代碼 */
</style>
</head>
- 外部樣式表/鏈接式
<link href=""CSS文件路徑" rel="stylesheet" type="text/css"/>
- 導(dǎo)入樣式表/導(dǎo)入式[不推薦使用]
<style type="text/css">
@import "CSS文件路徑";
</style>
或者
<style type="text/css">
@import url("CSS文件路徑");
</style>
-
link與@import的區(qū)別
-
link寫在head中蔗喂，頁面加載同時加載CSS文件忘渔；@import在網(wǎng)頁加載完后再裝載CSS文件。@import當(dāng)網(wǎng)頁比較大時缰儿，出現(xiàn)先顯示無樣式的頁面畦粮，閃爍一下之后，再出現(xiàn)網(wǎng)頁的樣式乖阵。 -
link支持使用Javascript控制DOM去改變樣式宣赔；而@import不支持，比如更換網(wǎng)頁主題(皮膚)瞪浸。 -
link不止加載CSS文件儒将，也可以加載其他文件，比如頁面標(biāo)題前的小圖標(biāo)对蒲；而@import只能用于加載CSS文件椅棺。
3. CSS的選擇符有哪些？哪些屬性可以繼承齐蔽？優(yōu)先級算法如何計(jì)算两疚？內(nèi)聯(lián)和important哪個優(yōu)先級高？
選擇器有很多種類含滴，不在于完全答出來诱渤，五六種即可。
important是個雙刃劍谈况，雖然會獲取最高優(yōu)先級勺美，缺點(diǎn)在于使用中會帶來各種麻煩，例如碑韵，js改變CSS會不起作用赡茸。
-
CSS的選擇符
- ID選擇器
#ID值 {} - 類選擇器
.類名 {} - 標(biāo)簽/元素選擇器
標(biāo)簽名 {} - 偽類選擇器
選擇器:nth-child(n) {} - 超鏈接偽類選擇器
:link:visited:hover:active - 后代選擇器
選擇器1 選擇器2 {} - 子選擇器
選擇器1>選擇器2 {} - 通配符選擇器
* {} - 分組選擇器
選擇器1,選擇器2 {} - 屬性選擇器
- ID選擇器
可以繼承的屬性
|No.|分類|屬性|
|:-:|
|1|所有元素(2個)|cursor visibility|
|2|列表(4個)|list-style list-style-type list-style-position list-style-image|
|3|表格(2個)|border-collapse border-spacing|
|4|塊級(2個)|text-align text-indent|
|5|內(nèi)聯(lián)(3類14個)|字體(8個)font color font-family font-style font-weight font-size line-height font-variant 空白(3個)letter-spacing word-spacing white-space 文本(3個) text-decoration text-transform direction|
- 優(yōu)先級
- 權(quán)重原則：
important > 內(nèi)聯(lián)樣式 > ID選擇器 > 類選擇器 > 標(biāo)簽選擇器 = 偽類 = 屬性選擇器 > 偽對象 > 繼承 > 通配符 - 就近原則：
內(nèi)聯(lián)樣式 > 內(nèi)部樣式表 > 外部樣式表
- 權(quán)重原則：
-
important的優(yōu)先級高于內(nèi)聯(lián)
4. 前端頁面有那三層構(gòu)成，分別是什么祝闻？作用是什么占卧？
基礎(chǔ)問題不多言。
| 三層 | 作用 |
|---|---|
| HTML | 結(jié)構(gòu) |
| CSS | 表示 |
| Javascript | 行為 |
5. CSS的基本語句構(gòu)成是？
基礎(chǔ)問題不多言华蜒。
選擇器 {
屬性1:值1;
屬性2:值2;
……
}
6. 你做過的頁面在哪些瀏覽器測試過辙纬？這些瀏覽器的內(nèi)核分別是什么？
這是把前端做為英語考試的節(jié)奏叭喜，無他法唯死記贺拣。
| 瀏覽器 | 內(nèi)核 |
|---|---|
| IE | Trident |
| Edge | edge |
| Chrome | 早期是Webkit,最新是Blink |
| Safari | Webkit |
| FireFox | Gecko |
| Opera | 最早是Presto,后來是Webkit,最新是Blink |
7. 標(biāo)簽上title與alt屬性的區(qū)別是什么？
基礎(chǔ)問題不多言捂蕴。
-
alt屬性是給SEO和屏幕閱讀器提供圖片信息譬涡，在圖片不能加載時在頁面顯示的提示信息 -
title屬性是鼠標(biāo)懸停在圖片上時顯示一個小提示
8. 清除浮動的幾種方式，各自的優(yōu)缺點(diǎn)
其實(shí)方法很多啥辨，可自行Baidu涡匀，下面是最常用最基本的用法。
從父標(biāo)簽中出來/撐不開父標(biāo)簽委可，給父標(biāo)簽加上
overflow:auto;zoom:1;
優(yōu)點(diǎn)：簡單渊跋，代碼少，瀏覽器支持好
缺點(diǎn)：不能和position配合使用把后續(xù)的同級標(biāo)簽覆蓋着倾，給后續(xù)的同級標(biāo)簽加上
clear:both;
優(yōu)點(diǎn)：簡單拾酝，代碼少，瀏覽器支持好
缺點(diǎn)：有時需要增加很空div
9. 簡述一下src與href的區(qū)別
-
src是引入卡者，頁面必不可少的部分蒿囤，通常會是頁面上顯示的內(nèi)容，例如：imgiframe等崇决。 -
href是引用材诽，與頁面有關(guān)聯(lián)，通常不在頁面上顯示恒傻，例如：alink等脸侥。
10. px和em的區(qū)別
基礎(chǔ)問題不多言。
-
px相對于顯示器屏幕分辨率盈厘。 -
em相對于當(dāng)前對象內(nèi)文本的字體尺寸睁枕。
11. 添加 刪除 替換 插入到某個節(jié)點(diǎn)的方法？
基礎(chǔ)問題不多言沸手。
| 操作 | Javascript方法 | JQuery方法 |
|---|---|---|
| 添加 | appendChild() |
append() appendTo() prepend() prependTo
|
| 刪除 | deleteChild() |
remove() empty()
|
| 替換 | replaceChild() |
replaceWith() replaceAll()
|
| 插入 | insertBefore() |
before() insertBefore() after() insertAfter()
|
二. 編程題
1. 編寫一個數(shù)組去重的方法外遇。
基礎(chǔ)問題不多言。
function uniqueArray(arr){
// 存放結(jié)果
var res = [];
for(var i in arr){// 遍歷數(shù)組元素
if(res.indexOf(arr[i]) == -1){// 如果結(jié)果數(shù)組不存在該元素則保存
res.push(arr[i]);
}
}
// 返回去重后的數(shù)組
return res;
}
// 測試
uniqueArray([1,4,6,7,9,6,4,5]);
2. CSS實(shí)現(xiàn)div垂直水平居中契吉。
實(shí)現(xiàn)方式有很多種跳仿，下面方式最簡單。
絕對定位實(shí)現(xiàn)div垂直水平居中
div{
width:寬度;
height:高度;
margin:auto;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
