前端面試題目及答案_web前端面試題及答案
對于前端工程師，在面試中，我們應該學會做好面試準備，了解面試題目及答案很有必要。下面小編已經為你們整理了前端面試題目及答案,一起來看看吧。
前端面試題目及答案一
1、display:none和visibility:hidden的區別?
display:none 隱藏對應的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，
就當他從來不存在。
visibility:hidden 隱藏對應的元素，但是在文檔布局中仍保留原來的空間。
2、CSS中 link 和@import 的區別是?
(1) link屬于HTML標簽，而@import是CSS提供的;
(2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3) import只在IE5以上才能識別，而link是HTML標簽，無兼容問題;
(4) link方式的樣式的權重 高于@import的權重.
3、position的absolute與fixed共同點與不同點
A：共同點：
1).改變行內元素的呈現方式，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實現圓角(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 選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算? 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
優先級算法：
1)優先級就近原則，同權重情況下樣式定義最近者為準;
2)載入樣式以最后載入的定位為準;
3)!important > id > class > tag
4)important 比 內聯優先級高，但內聯比 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 控制表單控件的禁用狀態。
:checked 單選框或復選框被選中。
2、列出display的值，說明他們的作用。position的值， relative和absolute分別是相對于誰進行定位的?
display 的值的作用：
1).block 象塊類型元素一樣顯示。
2).inline 缺省值。象行內元素類型一樣顯示。
3).inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
4).list-item 象塊類型元素一樣顯示，并添加樣式列表標記。
position 的值的定位區別：
1).absolute 生成絕對定位的元素，相對于 static 定位以外的第一個祖先元素進行定位。
2).fixed 生成絕對定位的元素，相對于瀏覽器窗口進行定位(老IE不支持)。
3).relative 生成相對定位的元素，相對于其在普通流中的位置進行定位。
4).static 默認值。沒有定位，元素出現在正常的流中(忽略 top, bottom, left, right z-index 聲明)。
5).inherit 規定從父元素繼承 position 屬性的值。
前端面試題目及答案三
1.請你談談Cookie的弊端
cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但還是有很多局限性的。
第一：每個特定的域名下最多生成20個cookie
1).IE6或更低版本最多20個cookie
2).IE7和之后的版本最后可以有50個cookie。
3).Firefox最多50個cookie
4).chrome和Safari沒有做硬性限制
IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。
cookie的最大大約為4096字節，為了兼容性，一般不能超過4095字節。
IE 提供了一種存儲可以持久化用戶數據，叫做uerData，從IE5.0就開始支持。每個數據最多128K，每個域名下最多1M。這個持久化數據放在緩存中，如果緩存沒有清理，那么會一直存在。
優點：極高的擴展性和可用性
1).通過良好的編程，控制保存在cookie中的session對象的大小。
2).通過加密和安全傳輸技術(SSL)，減少cookie被破解的可能性。
3).只在cookie中存放不敏感數據，即使被盜也不會有重大損失。
4).控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。
缺點：
1).`Cookie`數量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
2).安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者并不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。
3).有些狀態不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那么它起不到任何作用。
2.簡單說一下瀏覽器本地存儲是怎樣的
在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。
html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。
sessionStorage用于本地存儲一個會話(session)中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
3.web storage和cookie的區別
Web Storage的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生
瀏覽器的支持除了IE7及以下不支持外，其他標準瀏覽器都完全支持(ie及FF需在web服務器里運行)，值得一提的是IE總是辦好事，例如IE7、IE6中的UserData其實就是javascript本地存儲的解決方案。通過簡單的代碼封裝可以統一到所有的瀏覽器都支持web storage。
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
看了“前端面試題目及答案”