Web前端開發面試題2

1、CSS引入的方式有哪些?link和@import的區別是?

本質上,這兩種方式都是爲了加載CSS文件,但還是存在着細微的差別。

差別1:老祖宗的差別。

link屬於XHTML標籤,而@import完全是CSS提供的一種方式。

link標籤除了可以加載CSS外,還可以做很多其它的事情,比如定義RSS,定義rel連接屬性等,@import就只能加載CSS了。

差別2:加載順序的差別。

當一個頁面被加載的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被加載,而@import引用的CSS會等到頁面全部被下載完再被加載。

所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式(就是閃爍),網速慢的時候還挺明顯(夢之都加載CSS的方式就是使用@import,我一邊下載一邊瀏覽夢之都網頁時,就會出現上述問題)。

差別3:兼容性的差別。

由於@import是CSS2.1提出的所以老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標籤無此問題。

差別4:使用dom控制樣式時的差別。

當使用javascript控制dom去改變樣式的時候,只能使用link標籤,因爲@import不是dom可以控制的。

大致就這幾種差別了(如果還有什麼差別,大家告訴我,我再補充上去),其它的都一樣。

從上面的分析來看,還是使用link標籤比較好。

標準網頁製作加載CSS文件時,還應該選定要加載的媒體(media),比如screen,print,或者全部all等。

差別5:@import可以在css中再次引入其他樣式表,比如可以創建一個主樣式表,在主樣式表中再引入其他的樣式表。

2、CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高? 

 

3、前端頁面有哪三層構成,分別是什麼?作用是什麼?

最準確的網頁設計思路是把網頁分成三個層次,即:結構層、表示層、行爲層。

網頁的結構層(structural layer)

由 HTML 或 XHTML 之類的標記語言負責創建。標籤,也就是那些出現在尖括號裏的單詞,對網頁內容的語義含義做出了描述,但這些標籤不包含任何關於如何顯示有關內容的信息。例如,P 標籤表達了這樣一種語義:“這是一個文本段。

網頁的表示層(presentation layer) 由 CSS 負責創建。 CSS 對“如何顯示有關內容”的問題做出了回答。

網頁的行爲層(behavior layer)負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM 主宰的領域。

4、你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?經常遇到的瀏覽器的兼容性有哪些?怎麼會出現?解決方法是什麼?

點評:css的兼容性也是大家關注的熱點。大家一定要注意多測試。

Javascript 多瀏覽器兼容性問題及解決方案

兼容性處理要點 

  1. DOCTYPE 影響 CSS 處理 
  2. FF: 設置 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width
  3. FF: 支持 !important, IE 則忽略, 可用 !important 爲 FF 特別設置樣式 
  4. div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字,就垂直居中了。缺點是要控制內容不要換行 
  5. 在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px       解決方法:  div{margin:30px!important;margin:28px;}  注意這兩個margin的順序一定不能寫反,!important這個屬性IE不能識別,但別的瀏覽器可以識別。所以在IE下其實解釋成這樣:  div{maring:30px;margin:28px}  重複定義的話按照最後一個來執行,所以不可以只寫margin:XXpx!important;

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章