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