中軟高科WEB前端面試題，中軟高科web前端

中軟高科WEB前端面試題，中軟高科web前端

一個朋友面試的題目，百度了一下這個中軟高科貌似是一個培訓機構。。。以下答案是我本人的理解，僅供參考

 

HTML+CSS

1、你能解釋一下css的盒子模型嗎？

　　有兩種盒子模型：IE盒子模型，W3C盒子模型。

　　標準的CSS盒子模型包括：內容（content）、填充（padding）、邊框（border）、邊距（margin）。

　　

 

2、XHTML和HTML的區別？

　　最主要的差別：XHTML元素必須被正確的嵌套，XHTML必須被關閉，標籤名必須用小寫，XHTML文檔必須擁有根項目。

　　詳細文章可以參考：HTML和XHTML的區別

 

3、行內元素有哪些？區塊層級元素有哪些？

　　1） 行內元素有：a  b  span  img  input  select  strong ...；

　　2） 區塊層級元素有：div  header  main  footer  section  ul  p  h1  h2 ...；

 

4、CSS選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？內聯和 important哪個優先順序高？

　　1） id選取器（#）、類別選取器（.）、標籤選取器（div）、兄弟元素選取器（div + p）、子選取器（ul>li）、後代選取器（div a）、萬用字元選取器（*）、屬性選取器（input[type="number"]）、偽類別選取器（a:hover，p:nth-child）

　　2） 所有元素可繼承：visibility和cursor。

　　　　內嵌元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

　　　　列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。

　　　　表格元素可繼承：border-collapse。

　　3） 內聯樣式表的權值最高 1000；

　　　　識別碼選取器的權值為 100；

　　　　Class 類別選取器的權值為 10；

　　　　HTML 標籤選取器的權值為 1

　　4） important比內聯優先順序高

 

5、前端頁面有哪三層構成，分別是什麼，作用是什嗎？

　　1） 由結構層，展示層，行為層組成

　　2） 結構層：對網頁的內容作出描述；

　　　　展示層：負責如何顯示內容；

　　　　行為層：對網頁中的事件作出反應；

 

6、哪些瀏覽器支援HTML5，這些瀏覽器的核心分別是什嗎？

　　目前使用較為廣泛的瀏覽器有：IE，Google，Firefox，Safari和Opera；

　　核心分別是：IE（Trident），WebKit，Gecko，WebKit，Presto；

 

7、寫出5種以上IE6 BUG的解決辦法，哪些你認為解決起來是最麻煩的？

　　1） IE6在區塊層級元素設定左右浮動，設定的margin造成雙邊距bug

　　　　解決辦法：display: inline;

　　2） line-height，文本垂直置中差1px

　　　　解決辦法：padding-top代替line-height置中，或line-height加1或減1

　　3） img於塊元素中，底邊多出空白

　　　　解決辦法：父級設定overflow: hidden; 或 img { display: block; } 或 _margin: -5px;

　　4） li之間會有間距

　　　　解決辦法：float: left;

　　5） position下的left，bottom錯位

　　　　解決辦法：為父級(relative層)設定寬高或添加*zoom:1

　　

　　都很麻煩。。。

 

8、描述CSS reset的作用和用途

　　reset的作用是讓各個瀏覽器的CSS樣式有一個統一的基準，理解為初始化css樣式

 

9、解釋CSS sprites，如何使用？

　　Sprite是圖片處理技術，俗稱圖片精靈。

　　1、將用到的背景圖片壓縮為zip格式的壓縮包
　　2、用Css圖片拼合產生器將其拼合成一張圖片，然後下載該圖片
　　3、拼合完成後會產生相應的Css規則，該檔案定位了每個圖片的位置及圖片的寬度和高度
　　4、在Css樣式中定位背景圖片

 

10、你如何對網站的檔案和資源進行最佳化？

　　1） 利用瀏覽器緩衝js檔案和css檔案

　　2） 最佳化js，css代碼，避免重用。

　　3） 使用 css sprite合并圖片。

　　4） 檔案合并，檔案壓縮。減少http請求，減少體積。

　　5） 使用cdn託管資源

 

11、什麼是語義化的HTML，HTML5新增的語義化標籤有哪些？

　　1） html語義化讓頁面的內容結構化，結構更加清晰，便於瀏覽器、搜尋引擎解析。

　　　　使閱讀代碼的人對網站更容易分塊，便於閱讀維護和理解。

　　2） 比如：header，main，footer，canvas等

 

12、清楚浮動的幾種方式，各自的優缺點。

　　1） 父級元素定義高度：優點是簡單，代碼少，容易掌握，缺點是只適合高度固定的布局，一旦高度不一致時就會出現問題。

　　2） 結尾處添加空div標籤clear: both：優點是代碼少，瀏覽器支援好，不容易出現怪問題，缺點是如果頁面浮動布局多，就要增加很多空div，讓人感覺很不爽。

　　3） 父級元素設定overflow: hidden：優點是簡單，代碼少，瀏覽器支援好，缺點是不能和position配合使用，因為超出的尺寸的會被隱藏。

　　只介紹三種。。。

 

JS

1、JavaScript 的 typeof 返回哪些資料類型？

　　返回6中資料類型：undefined，string，Boolean，number，object，function。

 

2、split() join()的區別？數組方法pop() push() unshift() shift()。

　　1） split() 方法用於把一個字串分割成字串數組。

　　　　join() 方法用於把數組中的所有元素放入一個字串。

　　　　區別：前者是將字串切割成數組的形式，後者是將數組轉化為字串。

　　2） shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值

　　　　unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度

　　　　pop() 方法用於刪除並返回數組的最後一個元素

　　　　push() 方法可向數組的末尾添加一個或多個元素，並返回新的長度

 

3、事件綁定和普通事件有什麼區別？

　　普通添加事件的方法不支援添加多個事件，最下面的事件會覆蓋上面的，而事件綁定（addEventListener）方式添加事件可以添加多個

 

4、IE和標準下有哪些相容性的寫法？

　　擷取滑鼠當前的座標：

　　IE下event.x，event.y；

　　標準下event.pageX，event.pageY；

　　擷取表單的高度和寬度：

　　IE下document.body.offsetWidth和document.body.offsetHeight

　　標準下document.documentElement.clientWidth和document.documentElement.clientHeight

　　添加事件：

　　IE下element.attachEvent(”onclick”, func)；

　　標準下element.addEventListener(”click”, func, true)；

 

5、ajax 在請求的時候 get請求和 post請求的區別？

　　1）使用Get請求時,參數在URL中顯示,而使用Post方式,則不會顯示出來

　　2）使用Get請求發送資料量小,Post請求發送資料量大

　　3）Get請求安全性較低，Post安全性較高