前端實習遇到的面試題及答案(一)
1.請你描述一下什麼是盒模型,以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的佈局。
css中所有html元素都可以看成為一個盒子,一個盒模型包括margin、border、padding、content
盒模型主要分為兩類:W3C標準盒子模型和IE盒子模型,在編寫頁面程式碼的時候應該儘量使用標準的W3C盒子模型,可在頁面中宣告DOCTYPE型別,將頁面設定為"標準模式"(解決相容性最簡潔和值得推薦的方式),在頁面開頭加上:
<!DOCTYPE html>
標準模型-width與height按照content寬高計算,而IE模型-width與height則按照content+padding+border計算;
* {
box-sizing:content-box; // 標準盒模型
box-sizing:border-box; // IE盒模型
}
2.請描述cookies、sessionStorage和localStorage的區別(每次筆試都能遇到)
①.資料儲存大小限制不同。
cookies:資料始終在同源的http請求中攜帶,即cookie能在伺服器和瀏覽器間回傳。故儲存的資料大小最小,一般為4096B。
sessionStorage:資料儲存在本地,不會自動發給伺服器。所以一般5M或者更大。
localStorage:資料儲存在本地,不會自動發給伺服器。所以一般5M或者更大。
②.資料有效期不同
cookies:資料在cookie設定的有效期之前都有效,即使視窗和瀏覽器關閉。
sessionStorage:資料在關閉瀏覽器視窗後自動清除。儲存的資料僅在同源視窗內有效,即使在不同瀏覽器相同頁面也是無效的。一般用於儲存會話資料。
localStorage:始終有效,因此用作持久資料。
③.資料作用域不同
cookies、localStorage:在所有同源視窗敏感詞享。
sessionStorage:不在不同瀏覽器視窗敏感詞享。
3.行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?
行內元素有:a、b、span、img、input、strong、select、label、em、button、textarea等;
塊級元素有:div、ul、li、dl、dt、dd、p、h1-h6、blockquote等;
空元素(沒有內容的html元素)有:br、meta、hr、link、input、img。
4.如何居中一個浮動元素?
.content{ height: 任意px; width: 任意px; border: 1px solid red; /*垂直居中*/ display: table-cell; vertical-align: middle; } .left{ height:Npx; width: Npx; border: 1px dashed blue; /*水平居中,但設定浮動後失效 margin: 0 auto;*/ float: left; /*水平居中*/ margin-left: 50%; position: relative; left: -(N/2)px; }
5.'data-屬性'的作用是什麼?
data-屬性為html5推出的一個新功能,前端開發者可以利用其設定需要的自定義屬性,來進行一些資料的存放。當然,在高階瀏覽器下可通過JS指令碼進行定義和資料的存取。
6.iframe有什麼作用?優缺點?
iframe被稱作嵌入式框架,用於設定文字或圖形的浮動圖文框或容器;
優點有:
①.iframe能夠原封不動的把嵌入的網頁展現出來。
②.如果有多個網頁引用iframe,那麼只需要修改iframe的內容,就可以實現呼叫的每一個頁面內容的更改,方便快捷。
③.網頁如果為了統一風格,頭部和版本都是一樣的,就可以寫成一個頁面,用iframe來巢狀,可以增加程式碼的可重用性。
④.可以解決第三方內容如圖示和廣告載入緩慢的問題。
⑤.過載頁面時不需要過載整個頁面,只需要過載頁面中的一個框架頁,減少了資料的傳輸,增加了網頁下載速度
缺點有:
①.頁面樣式除錯麻煩,會出現多個滾動條,併產生多個頁面,不容易列印;
②.瀏覽器的後退按鈕不可用;
③.若有過多iframe標籤會增加伺服器的HTTP的請求;
④.小型的移動裝置無法完全顯示框架,即裝置相容性差;
⑤.程式碼複雜,某些搜尋引擎無法解讀。
7.你如何對網站的檔案和資源進行優化?
檔案合併、檔案壓縮、使用cdn(內容分發網路)託管您的資源、使用快取、優化meta標籤、啟用Gzip壓縮css/js檔案
將css/js檔案放在外部檔案中,避免寫在同一頁面中,引用時將css放在最上面,js放在最下面等
8.常見的瀏覽器的的相容問題?你使用過哪些瀏覽器除錯你的專案?它們的核心分別是?
①不同瀏覽器的標籤預設的外補丁( margin )和內補丁(padding)不同;
②圖片之間預設有間距;
③邊距重疊問題;當相鄰兩個元素都設定了margin 邊距時,margin 將取最大值,捨棄最小值;
④兩個塊級元素,父元素設定了overflow:auto;子元素設定了position:relative ;且高度大於父元素,在IE6、IE7會被隱藏而不是溢位;
⑤IE9以下版本瀏覽器不能使用opacity;
⑥當標籤的高度設定小於10px,在IE6、IE7中會超出自己設定的高度;
⑦IE6雙邊距問題;在 IE6中設定了float , 同時又設定margin , 就會出現邊距問題。
用過Google Chrome、QQ瀏覽器以及Firefox瀏覽器,它們的核心分別是Webkit、webkit和IE的核以及Gecko核心
相關推薦
前端實習遇到的面試題及答案(一)
1.請你描述一下什麼是盒模型,以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的佈局。css中所有html元素都可以看成為一個盒子,一個盒模型包括margin、border、padding、content盒模型主要分為兩類:W3C標準盒子模型和IE盒子模型,在編寫頁面
經典的一套SQL面試題及答案
SQL SqlServer 數據庫 面試經典的一套SQL面試題及答案
近5年常考Java面試題及答案整理(一)
下列面試題都是在網上收集的,本人抱著學習的態度找了下參考答案,有不足的地方還請指正,更多精彩內容可以關注我的微信公眾號:Java團長 1、面向物件的特徵有哪些方面? 抽象:將同類物件的共同特徵提取出來構造類。 繼承:基於基類建立新類。 封裝:將資料隱藏起來,對
面試第一家公司的面試題及答案(一)
1.談談對跨域的理解,怎麼處理跨域? 簡單的理解:瀏覽器或者JavaScript說處於安全方面的考慮,對同源策略的限制。 處理的方法一:porxy代理 通過同域名的web伺服器建立一個代理,比如說杭州的伺服器後臺(www.hangzhou.com/porxy-hangzho
2018最新Web前端經典面試題及答案
javascript: JavaScript中如何檢測一個變數是一個String型別?請寫出函式實現 typeof(obj) === "string" typeof obj === "string" obj.constructor === String 請用js去除字
2018年web前端經典面試題及答案
javascript: JavaScript中如何檢測一個變數是一個String型別?請寫出函式實現方法1、function isString(obj){ return typeof(obj) === "string"? true: false; //
通往 BATJ 的 160 道 Java 面試題及答案(一)
一、題目(1~40題) 1、面向物件的特徵有哪些方面? 2、訪問修飾符 public,private,protected, 以及不寫(預設)時的區別? 3、String 是最基本的資料型別嗎? 4、float f=3.4; 是否正確? 5、short s1 = 1;
前端十個基礎面試題及答案
1、DOM結構——兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。document.documentElement 返回文件的根節點<html> document.body <body> document.activeElem
PHP面試題及答案解析(8)—PHP綜合應用題
java應用程序 外殼 sleep 服務應用程序 解釋 源碼 use lee eve 1.寫出下列服務的用途和默認端口。 ftp、ssh、http、telnet、https ftp:File Transfer Protocol,文件傳輸協議,是應用層的協議,它基於傳輸層,
100+經典Java面試題及答案解析
是什麽 自定義 我們 計數 接口類 同步方法 main err ans 面向對象編程(OOP) Java是一個支持並發、基於類和面向對象的計算機編程語言。下面列出了面向對象軟件開發的優點: 代碼開發模塊化,更易維護和修改。 代碼復用。 增強代碼的可靠性和靈活
JavaScript基本的面試題及答案
對象 con cnblogs typeof fin 如果 defined 輸出結果 是什麽 1、使用typeof bar==="object"來確定bar是否是對象的潛在陷阱是什麽?如何避免這個陷阱? 例: var bar=null; console.log(typeof
史上最全Java多線程面試題及答案
blog 上下文 exec 線程 單例 通信 流轉 排查 創建 多線程有什麽用? 線程和進程的區別是什麽? Java實現線程有哪幾種方式? 啟動線程方法start()和run()有什麽區別? 怎麽終止一個線程?如何優雅地終止線程? 一個線程的生命周期
Linux必問面試題,雲計算面試題及答案
雲計算×××教育總結了很多雲計算面試題及答案,一起來看一下吧! 1.生產場景如何對linux系統進行合理規劃分區? 分區的根本原則是簡單、易用、方便批量管理。根據服務器角色定位建議如下: ①單機服務器:如8G內存,300G硬盤 分區: /boot 100-200M,swap 16G,內存大小8G*2,/ 80
15個頂級Java多線程面試題及答案
ctrl 打印 MF 進程 lock 異常 mage 分析 iar 在任何Java面試當中多線程和並發方面的問題都是必不可少的一部分。如果你想獲得任何股票投資銀行的前臺資訊職位,那麽你應該準備很多關於多線程的問題。在投資銀行業務中多線程和並發是一個非常受歡迎的話題,特別是電
軟件測試面試題及答案【匯總】
代碼復用 尋找 質量保證 形式 協議 優先級 應對 考慮問題 調查 軟件測試面試題及答案,歡迎參考! 1、你的測試職業發展是什麽? 測試經驗越多,測試能力越高。所以我的職業發展是需要時間積累的,一步步向著高級測試工程師奔去。而且我也有初步的職業規劃,前3年積累測
關於H5的20道面試題及答案
查找 除了 模式 鏈接 canvas ike 空元素 search 人的 1 DOCTYPE有什麽作用?標準模式與混雜模式如何區分?它們有何意義? 告訴瀏覽器使用哪個版本的HTML規範來渲染文檔。DOCTYPE不存在或形式不正確會導致HTML文檔以混雜模式呈現。 標準模式
C# 面試題及答案31-60
ron 保護 靜態方法 方法 重載 可空類型 ast RoCE lis 2018/8/4 c# 面試系列續 31) “System.Array.Clone()” 和 “System.Array.CopyTo()” 有何不同? 1、“CopyTo()” 從一個數組復制
C#經典面試題及答案
list add 字段 有一個 副本 udp 隔離性 垃圾回收 readonly 字節 1.請你說說.net 中類和結構的區別? 答:結構和類具有大體的語法,但是結構受到的限制比類多。結構不能聲明默認的的構造函數,為結構的副本是編譯器創建和銷毀的,所以不需要默認的構造函數和
Java 多執行緒面試題及答案(非常全面)
這篇文章主要是對多執行緒的問題進行總結的,因此羅列了40個多執行緒的問題。 這些多執行緒的問題,有些來源於各大網站、有些來源於自己的思考。可能有些問題網上有、可能有些問題對應的答案也有、也可能有些各位網友也都看過,但是本文寫作的重心就是所有的問題都會按照自己的理解回答一遍,不會去看網上的
華為的JAVA面試題及答案(部分)
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!