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

　　前端面試題目及答案一

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

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

　　就當(dāng)他從來不存在。

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

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

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

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

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

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

　　3、position的absolute與fixed共同點(diǎn)與不同點(diǎn)

　　A：共同點(diǎn)：

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

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

　　3).默認(rèn)會覆蓋到非定位元素上

　　B不同點(diǎn)：

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

　　當(dāng)你滾動(dòng)網(wǎng)頁，fixed元素與瀏覽器窗口之間的距離是不變的。

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

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

　　2)有兩種， IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型;IE的content部分包含了 border 和 padding;

　　5、CSS3有哪些新特性?

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

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

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

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

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

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

　　7). border-image

　　前端面試題目及答案二

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

　　CSS 選擇符：

　　1).id選擇器(# myid)

　　2).類選擇器(.myclassname)

　　3).標(biāo)簽選擇器(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)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);

　　2)載入樣式以最后載入的定位為準(zhǔn);

　　3)!important > id > class > tag

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

　　CSS3新增偽類舉例：

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

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

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

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

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

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

　　:checked 單選框或復(fù)選框被選中。

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

　　display 的值的作用：

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

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

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

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

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

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

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

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

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

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

　　前端面試題目及答案三

　　1.請你談?wù)凜ookie的弊端

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

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

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

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

　　3).Firefox最多50個(gè)cookie

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

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

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

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

　　優(yōu)點(diǎn)：極高的擴(kuò)展性和可用性

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

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

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

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

　　缺點(diǎn)：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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