對于前端工程師，在面試中，我們應該學會做好面試準備，了解面試題目及答案很有必要。下面小編已經為你們整理了前端面試題目及答案,一起來看看吧。

　　前端面試題目及答案一

　　1、display:none和visibility:hidden的區(qū)別?

　　display:none 隱藏對應的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，

　　就當他從來不存在。

　　visibility:hidden 隱藏對應的元素，但是在文檔布局中仍保留原來的空間。

　　2、CSS中 link 和@import 的區(qū)別是?

　　(1) link屬于HTML標簽，而@import是CSS提供的;

　　(2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

　　(3) import只在IE5以上才能識別，而link是HTML標簽，無兼容問題;

　　(4) link方式的樣式的權重 高于@import的權重.

　　3、position的absolute與fixed共同點與不同點

　　A：共同點：

　　1).改變行內元素的呈現(xiàn)方式，display被置為block;

　　2).讓元素脫離普通流，不占據空間;

　　3).默認會覆蓋到非定位元素上

　　B不同點：

　　absolute的”根元素“是可以設置的，而fixed的”根元素“固定為瀏覽器窗口。

　　當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。

　　4、介紹一下CSS的盒子模型?

　　1)盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)

　　2)有兩種， IE 盒子模型、標準 W3C 盒子模型;IE的content部分包含了 border 和 padding;

　　5、CSS3有哪些新特性?

　　1). CSS3實現(xiàn)圓角(border-radius)，陰影(box-shadow)，

　　2). 對文字加特效(text-shadow、)，線性漸變(gradient)，旋轉(transform)

　　3). transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

　　4). 增加了更多的CSS選擇器 多背景 rgba

　　5). 在CSS3中唯一引入的偽元素是 ::selection.

　　6). 媒體查詢，多欄布局

　　7). border-image

　　前端面試題目及答案二

　　1、CSS 選擇符有哪些?哪些屬性可以繼承?優(yōu)先級算法如何計算? CSS3新增偽類有那些?

　　CSS 選擇符：

　　1).id選擇器(# myid)

　　2).類選擇器(.myclassname)

　　3).標簽選擇器(div, h1, p)

　　4).相鄰選擇器(h1 + p)

　　5).子選擇器(ul > li)

　　6).后代選擇器(li a)

　　7).通配符選擇器( * )

　　8).屬性選擇器(a[rel = "external"])

　　9).偽類選擇器(a: hover, li:nth-child)

　　可繼承的樣式：

　　1).font-size

　　2).font-family

　　3).color

　　4).text-indent

　　不可繼承的樣式：

　　1).border

　　2).padding

　　3).margin

　　4).width

　　5).height

　　優(yōu)先級算法：

　　1)優(yōu)先級就近原則，同權重情況下樣式定義最近者為準;

　　2)載入樣式以最后載入的定位為準;

　　3)!important > id > class > tag

　　4)important 比 內聯(lián)優(yōu)先級高，但內聯(lián)比 id 要高

　　CSS3新增偽類舉例：

　　p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。

　　p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。

　　p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。

　　p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。

　　p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。

　　:enabled :disabled 控制表單控件的禁用狀態(tài)。

　　:checked 單選框或復選框被選中。

　　2、列出display的值，說明他們的作用。position的值， relative和absolute分別是相對于誰進行定位的?

　　display 的值的作用：

　　1).block 象塊類型元素一樣顯示。

　　2).inline 缺省值。象行內元素類型一樣顯示。

　　3).inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。

　　4).list-item 象塊類型元素一樣顯示，并添加樣式列表標記。

　　position 的值的定位區(qū)別：

　　1).absolute 生成絕對定位的元素，相對于 static 定位以外的第一個祖先元素進行定位。

　　2).fixed 生成絕對定位的元素，相對于瀏覽器窗口進行定位(老IE不支持)。

　　3).relative 生成相對定位的元素，相對于其在普通流中的位置進行定位。

　　4).static 默認值。沒有定位，元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right z-index 聲明)。

　　5).inherit 規(guī)定從父元素繼承 position 屬性的值。

　　前端面試題目及答案三

　　1.請你談談Cookie的弊端

　　cookie雖然在持久保存客戶端數(shù)據提供了方便，分擔了服務器存儲的負擔，但還是有很多局限性的。

　　第一：每個特定的域名下最多生成20個cookie

　　1).IE6或更低版本最多20個cookie

　　2).IE7和之后的版本最后可以有50個cookie。

　　3).Firefox最多50個cookie

　　4).chrome和Safari沒有做硬性限制

　　IE和Opera 會清理近期最少使用的cookie，F(xiàn)irefox會隨機清理cookie。

　　cookie的最大大約為4096字節(jié)，為了兼容性，一般不能超過4095字節(jié)。

　　IE 提供了一種存儲可以持久化用戶數(shù)據，叫做uerData，從IE5.0就開始支持。每個數(shù)據最多128K，每個域名下最多1M。這個持久化數(shù)據放在緩存中，如果緩存沒有清理，那么會一直存在。

　　優(yōu)點：極高的擴展性和可用性

　　1).通過良好的編程，控制保存在cookie中的session對象的大小。

　　2).通過加密和安全傳輸技術(SSL)，減少cookie被破解的可能性。

　　3).只在cookie中存放不敏感數(shù)據，即使被盜也不會有重大損失。

　　4).控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。

　　缺點：

　　1).`Cookie`數(shù)量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。

　　2).安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者并不需要知道cookie的意義，他只要原樣轉發(fā)cookie就可以達到目的了。

　　3).有些狀態(tài)不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數(shù)器。如果我們把這個計數(shù)器保存在客戶端，那么它起不到任何作用。

　　2.簡單說一下瀏覽器本地存儲是怎樣的

　　在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。

　　html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。

　　sessionStorage用于本地存儲一個會話(session)中的數(shù)據，這些數(shù)據只有在同一個會話中的頁面才能訪問并且當會話結束后數(shù)據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

　　而localStorage用于持久化的本地存儲，除非主動刪除數(shù)據，否則數(shù)據是永遠不會過期的。

　　3.web storage和cookie的區(qū)別

　　Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。

　　除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。

　　但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據而生

　　瀏覽器的支持除了IE7及以下不支持外，其他標準瀏覽器都完全支持(ie及FF需在web服務器里運行)，值得一提的是IE總是辦好事，例如IE7、IE6中的UserData其實就是javascript本地存儲的解決方案。通過簡單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage。

　　localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

　　
看了“前端面試題目及答案”