1.src與href的區別:

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

2.link 與@import區別:

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

3.display和visibility及opacity的區別:

• ?一、空間占據

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

• ?二、子元素繼承

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

• ?三、事件綁定

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

• ?四、過渡動畫

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

• 五、計時器計數

? ? ? ?visibility:?hidden不會影響計數器的計數

4.BFC

• BFC是什么

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

• ?BFC作用：

????????1.自適應兩欄布局?
????????2.可以阻止元素被浮動元素覆蓋?
????????3.可以包含浮動元素——清除內部浮動?
????????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其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。

• ?CSS Sprites優點/缺點

?? ??? ?利用CSS Sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的性能，這也是CSS Sprites最大的優點
?? ??? ? ? ? ? 在寬屏，高分辨率的屏幕下的自適應頁面，圖片如果不夠寬，很容易出現背景斷裂；
　　CSS Sprites在開發的時候比較麻煩，通過photoshop或其他工具測量計算每一個背景單元的精確位置，難度不大，但是很繁瑣；
? ? ? CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片.如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增加了，還要改動css。
　　CSS Sprites非常值得學習和應用，特別是頁面有一堆ico（圖標）。總之很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites。

6.優雅降級和漸進增強

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

7.transition和animation的區別

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

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

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

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

position: absolute;設置-一個很大的 left負值定位，使元素定位在可見區域之外

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。