html&&css面試題

1. 什么是盒子模型？

在網(wǎng)頁(yè)中，一個(gè)元素占有空間的大小由幾個(gè)部分構(gòu)成，其中包括元素的內(nèi)容（content），元素的內(nèi)邊距（padding），元素的邊框（border），元素的外邊距（margin）四個(gè)部分。這四個(gè)部分占有的空間中，有的部分可以顯示相應(yīng)的內(nèi)容，而有的部分只用來(lái)分隔相鄰的區(qū)域或區(qū)域。4個(gè)部分一起構(gòu)成了css中元素的盒模型。

2. 行內(nèi)元素有哪些？塊級(jí)元素有哪些？ 空(void)元素有那些？

  • 行內(nèi)元素：a、b、span、img、input、strong、select、label、em、button、textarea
  • 塊級(jí)元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
  • 空元素：即系沒(méi)有內(nèi)容的HTML元素，例如：br、meta、hr、link、input、img

3. CSS實(shí)現(xiàn)垂直水平居中

一道經(jīng)典的問(wèn)題，實(shí)現(xiàn)方法有很多種，以下是其中一種實(shí)現(xiàn)：

<div class="wrapper">
     <div class="content"></div>
</div>

.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red; 
 }
.content{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均設(shè)置為0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin設(shè)置為auto*/
    margin:auto;
    border: 1px solid green;    
}

4. 簡(jiǎn)述一下src與href的區(qū)別

  • href 是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，用于超鏈接。

  • src是指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。

    當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類(lèi)似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。

5. 簡(jiǎn)述同步和異步的區(qū)別

同步是阻塞模式，異步是非阻塞模式。

  • 同步就是指一個(gè)進(jìn)程在執(zhí)行某個(gè)請(qǐng)求的時(shí)候，若該請(qǐng)求需要一段時(shí)間才能返回信息，那么這個(gè)進(jìn)程將會(huì)一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去；
  • 異步是指進(jìn)程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作，不管其他進(jìn)程的狀態(tài)。當(dāng)有消息返回時(shí)系統(tǒng)會(huì)通知進(jìn)程進(jìn)行處理，這樣可以提高執(zhí)行的效率。

6. px和em的區(qū)別

  • 相同點(diǎn)：px和em都是長(zhǎng)度單位；
  • 不同點(diǎn)：px的值是固定的，指定是多少就是多少，計(jì)算比較容易。em得值不是固定的，并且em會(huì)繼承父級(jí)元素的字體大小。
    瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

7. 瀏覽器的內(nèi)核分別是什么?

  • IE: trident內(nèi)核
  • Firefox：gecko內(nèi)核
  • Safari：webkit內(nèi)核
  • Opera：以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核
  • Chrome：Blink(基于webkit，Google與Opera Software共同開(kāi)發(fā))

8. 什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？

  • 漸進(jìn)增強(qiáng) progressive enhancement：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶(hù)體驗(yàn)。
  • 優(yōu)雅降級(jí) graceful degradation：開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

  • 區(qū)別：

    1. 優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶(hù)體驗(yàn)的供給

    2. 漸進(jìn)增強(qiáng)則是從一個(gè)非常基礎(chǔ)的，能夠起作用的版本開(kāi)始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要

    3. 降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶

9. sessionStorage 、localStorage 和 cookie 之間的區(qū)別

  • 共同點(diǎn)：用于瀏覽器端存儲(chǔ)的緩存數(shù)據(jù)

  • 不同點(diǎn)：

    1. 存儲(chǔ)內(nèi)容是否發(fā)送到服務(wù)器端：當(dāng)設(shè)置了Cookie后，數(shù)據(jù)會(huì)發(fā)送到服務(wù)器端，造成一定的寬帶浪費(fèi)；web storage,會(huì)將數(shù)據(jù)保存到本地，不會(huì)造成寬帶浪費(fèi)；

    2. 數(shù)據(jù)存儲(chǔ)大小不同：Cookie數(shù)據(jù)不能超過(guò)4K,適用于會(huì)話(huà)標(biāo)識(shí)；web storage數(shù)據(jù)存儲(chǔ)可以達(dá)到5M;

    3. 數(shù)據(jù)存儲(chǔ)的有效期限不同：cookie只在設(shè)置了Cookid過(guò)期時(shí)間之前一直有效，即使關(guān)閉窗口或者瀏覽器；
      sessionStorage僅在關(guān)閉瀏覽器之前有效；localStorage數(shù)據(jù)存儲(chǔ)永久有效；

    4. 作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；

10. Web Storage與Cookie相比存在的優(yōu)勢(shì)：

  • 存儲(chǔ)空間更大：IE8下每個(gè)獨(dú)立的存儲(chǔ)空間為10M，其他瀏覽器實(shí)現(xiàn)略有不同，但都比Cookie要大很多。

  • 存儲(chǔ)內(nèi)容不會(huì)發(fā)送到服務(wù)器：當(dāng)設(shè)置了Cookie后，Cookie的內(nèi)容會(huì)隨著請(qǐng)求一并發(fā)送的服務(wù)器，這對(duì)于本地存儲(chǔ)的數(shù)據(jù)是一種帶寬浪費(fèi)。而Web Storage中的數(shù)據(jù)則僅僅是存在本地，不會(huì)與服務(wù)器發(fā)生任何交互。

  • 更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，如setItem,getItem,removeItem,clear等,使得數(shù)據(jù)操作更為簡(jiǎn)便。cookie需要自己封裝。

  • 獨(dú)立的存儲(chǔ)空間：每個(gè)域（包括子域）有獨(dú)立的存儲(chǔ)空間，各個(gè)存儲(chǔ)空間是完全獨(dú)立的，因此不會(huì)造成數(shù)據(jù)混亂。

11. Ajax的優(yōu)缺點(diǎn)及工作原理？

  • 定義和用法:

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。Ajax 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。Ajax 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。

傳統(tǒng)的網(wǎng)頁(yè)（不使用 Ajax）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面。

  • 優(yōu)點(diǎn)：

    1. 減輕服務(wù)器的負(fù)擔(dān),按需取數(shù)據(jù),最大程度的減少冗余請(qǐng)求

    2. 局部刷新頁(yè)面,減少用戶(hù)心理和實(shí)際的等待時(shí)間,帶來(lái)更好的用戶(hù)體驗(yàn)

    3. 基于xml標(biāo)準(zhǔn)化,并被廣泛支持,不需安裝插件等,進(jìn)一步促進(jìn)頁(yè)面和數(shù)據(jù)的分離

  • 缺點(diǎn)：

    1. AJAX大量的使用了javascript和ajax引擎,這些取決于瀏覽器的支持.在編寫(xiě)的時(shí)候考慮對(duì)瀏覽器的兼容性.

    2. AJAX只是局部刷新,所以頁(yè)面的后退按鈕是沒(méi)有用的.

    3. 對(duì)流媒體還有移動(dòng)設(shè)備的支持不是太好等

  • AJAX的工作原理：

    1. 創(chuàng)建ajax對(duì)象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

    2. 判斷數(shù)據(jù)傳輸方式(GET/POST)

    3. 打開(kāi)鏈接 open()

    4. 發(fā)送 send()

    5. 當(dāng)ajax對(duì)象完成第四步（onreadystatechange）數(shù)據(jù)接收完成，判斷http響應(yīng)狀態(tài)（status）200-300之間或者304（緩存）執(zhí)行回調(diào)函數(shù)

12. 請(qǐng)指出document load和document ready的區(qū)別？

  • 共同點(diǎn)：這兩種事件都代表的是頁(yè)面文檔加載時(shí)觸發(fā)。

  • 異同點(diǎn)：

    1. ready 事件的觸發(fā)，表示文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非文字媒體文件）。

    2. onload 事件的觸發(fā)，表示頁(yè)面包含圖片等文件在內(nèi)的所有元素都加載完成。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. 瀏覽器頁(yè)面有哪三層構(gòu)成，分別是什么，作用是什么? 構(gòu)成：結(jié)構(gòu)層、表示層、行為層分別是：HTML、CSS、Ja...
    程序猿人王小賤閱讀 1,993評(píng)論 1贊 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 28,826評(píng)論 1贊 45
  • 1.一些開(kāi)放性題目 1.自我介紹：除了基本個(gè)人信息以外，面試官更想聽(tīng)的是你與眾不同的地方和你的優(yōu)勢(shì)。 2.項(xiàng)目介紹...
    55lover閱讀 709評(píng)論 0贊 6
  • 【轉(zhuǎn)載】CSDN - 張林blog http://blog.csdn.net/XIAOZHUXMEN/articl...
    竿牘閱讀 3,592評(píng)論 1贊 14
  • 2018web前端最新面試題總結(jié) 一、Html/Css基礎(chǔ)模塊 基礎(chǔ)部分 什么是HTML？答：? HTML并不是...
    duans_閱讀 4,717評(píng)論 3贊 27

友情鏈接更多精彩內(nèi)容