1.src與href的區(qū)別:

?? ?href表示超文本引用，用在link和a等元素上，href是引用和頁面關(guān)聯(lián)，是在當(dāng)前元素和引用資源之間建立聯(lián)系，src表示引用資源，表示替換當(dāng)前元素，用在img，script，iframe上，src是頁面內(nèi)容不可缺少的一部分。
?? ?src是source的縮寫，是指向外部資源的位置，指向的內(nèi)部會遷入到文檔中當(dāng)前標(biāo)簽所在的位置；在請求src資源時會將其指向的資源下載并應(yīng)用到當(dāng)前文檔中，例如js腳本，img圖片和frame等元素。
?? ?<script src="js.js"></script>當(dāng)瀏覽器解析到這一句的時候會暫停其他資源的下載和處理，直至將該資源加載，編譯，執(zhí)行完畢，圖片和框架等元素也是如此，類似于該元素所指向的資源嵌套如當(dāng)前標(biāo)簽內(nèi)，這也是為什么要把js飯再底部而不是頭部。
?? ?<link href="common.css" rel="stylesheet"/>當(dāng)瀏覽器解析到這一句的時候會識別該文檔為css文件，會下載并且不會停止對當(dāng)前文檔的處理，這也是為什么建議使用link方式來加載css而不是使用@import。

2.link 與@import區(qū)別:

?? ?????兩者都是外部引用CSS的方式，但是存在一定的區(qū)別：
?? ??? ?1.link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
?? ??? ?2.link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。
?? ??? ?3.link是XHTML標(biāo)簽，無兼容問題,@import是在CSS2.1提出的，低版本的瀏覽器不支持。
?? ??? ?4.link支持使用Javascript控制DOM去改變樣式；而@import不支持。

3.display和visibility及opacity的區(qū)別:

• ?一、空間占據(jù)

?? ??? ?display: none; 是徹底消失，不在文檔流中占位，瀏覽器也不會解析該元素
?? ??? ?visibility:hidden; 是視覺上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會解析該元素；

• ?二、子元素繼承

?? ??? ?display:none 不會被子元素繼承，但是父元素都不在了，子元素自然也就不會顯示了
?? ??? ?visibility:hidden 會被子元素繼承，可以通過設(shè)置子元素visibility:visible 使子元素顯示出來
?? ??? ?opacity: 0 也會被子元素繼承，但是不能通過設(shè)置子元素opacity: 0使其重新顯示

• ?三、事件綁定

?? ??? ?display:none 的元素都已經(jīng)不在頁面存在了，因此無法觸發(fā)它上面綁定的事件；
?? ??? ?visibility:hidden 元素上綁定的事件無法觸發(fā)；
?? ??? ?opacity: 0元素上面綁定的事件是可以觸發(fā)的

• ?四、過渡動畫

?? ??? ?transition對于display 肯定是無效的；
?? ??? ?transition對于visibility 是無效的；
?? ??? ?transition對于opacity 是有效。

• 五、計時器計數(shù)

? ? ? ?visibility:?hidden不會影響計數(shù)器的計數(shù)

4.BFC

• BFC是什么

?? ??? ?(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。
?? ??? ?通俗一點的方式解釋:
BFC 可以簡單的理解為某個元素的一個 css 屬性，只不過這個屬性不能被開發(fā)者顯式的修改，擁有這個屬性的元素對內(nèi)部元素和外部元素會表現(xiàn)出一些特性，這就是BFC。?

• ?BFC作用：

????????1.自適應(yīng)兩欄布局?
????????2.可以阻止元素被浮動元素覆蓋?
????????3.可以包含浮動元素——清除內(nèi)部浮動?
????????4.分屬于不同的BFC時可以阻止margin重疊

• ?BFC開啟

?? ??? ?[1]根元素，即html元素
?? ??? ?[2] float的值不為none
?? ??? ?[3] overflow的值不為visible
?? ??? ?[4] display的值為inline-block. tblell. tale-caption
?? ??? ?[5] position的值為absolute或fxed

5.CSS Sprites

• ?CSS Sprites原理

?? ??? ?CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。

• ?CSS Sprites優(yōu)點/缺點

?? ??? ?利用CSS Sprites能很好地減少了網(wǎng)頁的http請求，從而大大的提高了頁面的性能，這也是CSS Sprites最大的優(yōu)點
?? ??? ? ? ? ? 在寬屏，高分辨率的屏幕下的自適應(yīng)頁面，圖片如果不夠?qū)?#xff0c;很容易出現(xiàn)背景斷裂；
　　CSS Sprites在開發(fā)的時候比較麻煩，通過photoshop或其他工具測量計算每一個背景單元的精確位置，難度不大，但是很繁瑣；
? ? ? CSS Sprites在維護(hù)的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片.如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動css。
　　CSS Sprites非常值得學(xué)習(xí)和應(yīng)用，特別是頁面有一堆ico（圖標(biāo)）?？傊芏鄷r候大家要權(quán)衡一下利弊，再決定是不是應(yīng)用CSS Sprites。

6.優(yōu)雅降級和漸進(jìn)增強(qiáng)

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

7.transition和animation的區(qū)別

? ? ? ?Animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值，他們的主要區(qū)別是transition需要觸發(fā)一個事件才能改變屬性，而animation不需要觸發(fā)任何事件的情況下才會隨時間改變屬性值，并且transition為2幀，從from?....?to，而animation可以一幀一幀的。

8.請列舉幾種隱藏元素的方法

visibility: hidden;這個屬性只是簡單的隱藏某個元素，但是元素占用的空間仍然存在

opacity: 0; CSS3屬性,設(shè)置0可以使一個元素完全透明， 但不會改變頁面布局，并且，如果該元素已經(jīng)綁定一些事件，如click事件， 那么點擊該區(qū)域，也能觸發(fā)點擊事件的

position: absolute;設(shè)置-一個很大的 left負(fù)值定位，使元素定位在可見區(qū)域之外

display: none;元素會變得不可見，并且不會再占用元素位置。會改變頁面布局。

transform: scale(0);將-個元素設(shè)置為縮放無限小，元素將不可見，元素原來所在的位置將被保留。

總結(jié)

以上是生活随笔為你收集整理的html及css经典面试题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。