前端面試和偽元素的區別

『肆』 前端開發工程師面試題目大全

HTML

Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?


HTML5為什麼只需要寫？


行內元素有哪些？塊級元素有哪些？空(void)元素有那些？


頁面導入樣式時，使用link和@import有什麼區別？


介紹一下你對瀏覽器內核的理解？


常見的瀏覽器內核有哪些？


html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？


簡述一下你對HTML語義化的理解？


HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？


瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？


請描述一下cookies，sessionStorage和localStorage的區別？


iframe有那些缺點？


Label的作用是什麼？是怎麼用的？（加for或包裹）


HTML5的form如何關閉自動完成功能？


如何實現瀏覽器內多個標簽頁之間的通信?(阿里)


webSocket如何兼容低瀏覽器？(阿里)


頁面可見性（PageVisibilityAPI）可以有哪些用途？


如何在頁面上實現一個圓形的可點擊區域？


實現不使用border畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。


網頁驗證碼是幹嘛的，是為了解決什麼安全問題？


title與h1的區別、b與strong的區別、i與em的區別？


CSS


介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？


CSS選擇符有哪些？哪些屬性可以繼承？


CSS優先順序演算法如何計算？


CSS3新增偽類有那些？


如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？


display有哪些值？說明他們的作用。


position的值relative和absolute定位原點是？


CSS3有哪些新特性？


請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？


用純CSS創建一個三角形的原理是什麼？


css多列等高如何實現？


一個滿屏品字布局如何設計?


經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧？


li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？


為什麼要初始化CSS樣式?


absolute的containingblock計算方式跟正常流有什麼不同？


CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？


position跟display、margincollapse、overflow、float這些特性相互疊加後會怎麼樣？


對BFC規范(塊級格式化上下文：blockformattingcontext)的理解？


CSS權重優先順序是如何計算的？


請解釋一下為什麼需要清除浮動？清除浮動的方式


zoom:1的清楚浮動原理?


移動端的布局用過媒體查詢嗎？


使用CSS預處理器嗎？喜歡那個？


CSS優化、提高性能的方法有哪些？


瀏覽器是怎樣解析CSS選擇器的？


在網頁中的應該使用奇數還是偶數的字體？為什麼呢？


margin和padding分別適合什麼場景使用？


抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]


元素豎向的百分比設定是相對於容器的高度嗎？


全屏滾動的原理是什麼？用到了CSS的那些屬性？


什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？


視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）


::before和:after中雙冒號和單冒號有什麼區別？解釋一下這2個偽元素的作用。


如何修改chrome記住密碼後自動填充表單的黃色背景？


你對line-height是如何理解的？


設置元素浮動後，該元素的display值是多少？（自動變成display:block）


怎麼讓Chrome支持小於12px的文字？


讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing:antialiased;）


font-style屬性可以讓它賦值為「oblique」oblique是什麼意思？


position:fixed;在android下無效怎麼處理？


如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）


display:inline-block什麼時候會顯示間隙？(攜程)


overflow:scroll時不能平滑滾動的問題怎麼處理？


有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。


png、jpg、gif這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？


什麼是Cookie隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）


style標簽寫在body後與body前有什麼區別？


什麼是CSS預處理器/後處理器？


JavaScript


介紹JavaScript的基本數據類型。


說說寫JavaScript的基本規范？


JavaScript原型，原型鏈?有什麼特點？


JavaScript有幾種類型的值？（堆：原始數據類型和棧：引用數據類型），你能畫一下他們的內存圖嗎？


Javascript如何實現繼承？


Javascript創建對象的幾種方式？


Javascript作用鏈域?


談談this對象的理解。


eval是做什麼的？


什麼是window對象?什麼是document對象?


null，undefined的區別？


寫一個通用的事件偵聽器函數(機試題)。


["1","2","3"].map(parseInt)答案是多少？


關於事件，IE與火狐的事件機制有什麼區別？如何阻止冒泡？


什麼是閉包（closure），為什麼要用它？


javascript代碼中的"usestrict";是什麼意思?使用它區別是什麼？


如何判斷一個對象是否屬於某個類？


new操作符具體幹了什麼呢?


用原生JavaScript的實現過什麼功能嗎？


Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？


對JSON的了解？


[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid#"+(~~(Math.random()*(1<<24))).toString(16)})能解釋一下這段代碼的意思嗎？


js延遲載入的方式有哪些？


Ajax是什麼?如何創建一個Ajax？


同步和非同步的區別?


如何解決跨域問題?


頁面編碼和被請求的資源編碼如果不一致如何處理？


模塊化開發怎麼做？


AMD（Moles/Asynchronous-Definition）、CMD（CommonMoleDefinition）規范區別？


requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何緩存的？）


JS模塊載入器的輪子怎麼造，也就是如何實現一個模塊載入器？


談一談你對ECMAScript6的了解？


ECMAScript6怎麼寫class，為什麼會出現class這種東西?


非同步載入的方式有哪些？


documen.write和innerHTML的區別?


DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?


.call()和.apply()的作用和區別？


數組和對象有哪些原生方法，列舉一下？


JS怎麼實現一個類。怎麼實例化這個類


JavaScript中的作用域與變數聲明提升？


如何編寫高性能的Javascript？


那些操作會造成內存泄漏？


JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？


jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？


jquery中如何將數組轉化為json字元串，然後再轉化回來？


jQuery的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？


jquery.extend與jquery.fn.extend的區別？


jQuery的隊列是如何實現的？隊列可以用在哪些地方？


談一下Jquery中的bind(),live(),delegate(),on()的區別？


JQuery一個對象可以同時綁定多個事件，這是如何實現的？


是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？


jQuery是通過哪個方法和Sizzle選擇器結合的？（jQuery.fn.find()進入Sizzle）


針對jQuery性能的優化方法？


Jquery與jQueryUI有啥區別？


JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？


jquery中如何將數組轉化為json字元串，然後再轉化回來？


jQuery和Zepto的區別？各自的使用場景？


針對jQuery的優化方法？


Zepto的點透問題如何解決？


jQueryUI如何自定義組件?


需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？


如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）


移動端最小觸控區域是多大？


jQuery的slideUp動畫，如果目標元素是被外部事件驅動,當滑鼠快速地連續觸發外部元素事件,動畫會滯後的反復執行，該如何處理呢?


把Script標簽放在頁面的最底部的body封閉之前和封閉之後有什麼區別？瀏覽器會如何解析它們？


移動端的點擊事件的有延遲，時間是多久，為什麼會有？怎麼解決這個延時？（click有300ms延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）


知道各種JS框架(Angular,Backbone,Ember,React,Meteor,Knockout...)么?能講出他們各自的優點和缺點么?


Underscore對哪些JS原生對象進行了擴展以及提供了哪些好用的函數方法？


解釋JavaScript中的作用域與變數聲明提升？


那些操作會造成內存泄漏？


JQuery一個對象可以同時綁定多個事件，這是如何實現的？


Node.js的適用場景？


(如果會用node)知道route,middleware,cluster,nodemon,pm2,server-siderendering么?


解釋一下Backbone的MVC實現方式？


什麼是「前端路由」?什麼時候適合使用「前端路由」?「前端路由」有哪些優點和缺點?


知道什麼是webkit么?知道怎麼用瀏覽器的各種工具來調試和debug代碼么?


如何測試前端代碼么?知道BDD,TDD,UnitTest么?知道怎麼測試你的前端工程么(mocha,sinon,jasmin,qUnit..)?


前端templating(Mustache,underscore,handlebars)是幹嘛的,怎麼用?


簡述一下Handlebars的基本用法？


簡述一下Handlerbars的對模板的基本處理流程，如何編譯的？如何緩存的？


用js實現千位分隔符?(提示：正則+replace)


檢測瀏覽器版本版本有哪些方式？


WhatisaPolyfill?


做的項目中，有沒有用過或自己實現一些polyfill方案（兼容性處理方案）？


我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡。會執行幾次事件，會先執行冒泡還是捕獲？


使用JS實現獲取文件擴展名？


答案自己先慢慢找哈。

『伍』 Web前端面試之css高頻面試題

今天小編要跟大家分享的文章是關於web前端面試之css高頻面試題。想要參加web前端面試的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。


1.什麼是BFC機制


BFC(BlockFormattingContext)，塊級格式化上下文，是一個獨立的渲染區域，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。


·___シ⑻跫(以下任意一條)


§_loat的值不為none


§_verflow的值不為visible


§_isplay的值為table-cell、tabble-caption和inline-block之一


§_osition的值不為static或則releative中的任何一個


在IE下,Layout,可通過zoom:1_シ


·___FC布局與普通文檔流布局區別:


BFC布局規則:


1._浮動的元素會被父級計算高度(父級元素觸發了BFC)


2._非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC)


3._margin不會傳遞給父級(父級觸發BFC)


4._屬於同一個BFC的兩個相鄰元素上下margin會重疊


5._普通文檔流布局:浮動的元素是不會被父級計算高度


6._非浮動元素會覆蓋浮動元素的位置


7._margin會傳遞給父級元素


8._兩個相鄰元素上下的margin會重疊


·___⒅械撓τ


§_柚_argin重疊


§_梢園《亍宄誆扛《(清除浮動的原理是兩個div都位於同一個BFC區域之中)


§_允視α嚼覆季


§_梢宰柚乖乇桓《馗哺


2.CSS3中新增的選擇器以及屬性


這里只是列出來,具體的使用,請查看我的關於css3新增選擇器與屬性文章


·___糶匝≡衿


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


屬性選擇器
含義描述
E[att^="val"]
屬性att的值以"val"開頭的元素


E[att$="val"]
屬性att的值以"val"結尾的元素


E[att*="val"]
屬性att的值包含"val"字元串的元素


·___峁刮崩嘌≡衿


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


選擇器
含義描述
E:root
匹配文檔的根元素，對於HTML文檔，就是HTML元素


E:nth-child(n)
匹配其父元素的第n個子元素，第一個編號為1


E:nth-last-child(n)
匹配其父元素的倒數第n個子元素，第一個編號為1


E:nth-of-type(n)
與:nth-child()作用類似，但是僅匹配使用同種標簽的元素


E:nth-last-of-type(n)
與:nth-last-child()作用類似，但是僅匹配使用同種標簽的元素


E:last-child
匹配父元素的最後一個子元素，等同於:nth-last-child(1)


E:first-of-type
匹配父元素下使用同種標簽的第一個子元素，等同於:nth-of-type(1)


E:last-of-type
匹配父元素下使用同種標簽的最後一個子元素，等同於:nth-last-of-type(1)


E:only-child
匹配父元素下僅有的一個子元素，等同於:first-child:last-child或:nth-child(1):nth-last-child(1)


E:only-of-type
匹配父元素下使用同種標簽的唯一一個子元素，等同於:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)


E:empty
匹配一個不包含任何子元素的元素，注意，文本節點也被看作子元素


·___ss3新增屬性


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


屬性
含義描述
兼容
transition
設置過渡效果
transform
變換效果(移動、縮放、轉動、拉長或拉伸)
animation
動畫效果
box-shadow
陰影效果
FF3.5,Safari4,Chrome3


text-shadow
文本陰影
FF3.5,Opera10,Safari4,Chrome3


border-colors
為邊框設置多種顏色
FF3+


boder-image
圖片邊框
FF3.5,Safari4,Chrome3


text-overflow
文本截斷
IE6+,Safari4,Chrome3,Opera10


word-wrap
自動換行
IE6+,FF3.5,Safari4,Chrome3


border-radius
圓角邊框
FF3+,Safari4,Chrome3


opacity
不透明度
all


box-sizing
控制盒模型的組成模式
FF3+,Opera10,Safari4,Chrome3


outline
外邊框
FF3+,safari4,chrome3,opera10


background-size
不指定背景圖片的尺寸
safari4,chrome3,opera10


background-origin
指定背景圖片從哪裡開始顯示
safari4,chrome3,FF3+


background-clip
指定背景圖片從什麼位置開始裁切
safari4,chrome3


rgba
基於r,g,b三個顏色通道來設置顏色值,通過a來設置透明度
safari4,chrome3,FF3,opera10


3.居中布局


·___驕又


1._行內元素:_ext-align:center


2._塊級元素:_argin:0auto


3._絕對定位和移動:_bsolute+transform


4._絕對定位和負邊距:_bsolute+margin


5._flex布局:_lex+
justify-content:center


·___怪本又


1._子元素為單行文本:_ine-height:height


2._absolute+transform


3._flex+align-items:center


4._table:_isplay:table-cell;vertical-align:
middle


5._利用position和top和負margin


·___醬怪本又_HAPE*MERGEFORMAT


1.已知元素寬高:絕對定位+margin:auto:


_div{
___idth:200px;
___eight:200px;
___ackground:
green;

___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_


2.已知元素寬高:_遠ㄎ+負margin


_div{
___idth:200px;
___eight:200px;
___ackground:
green;

___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_


3.absolute+transform


_div{
__width:200px;
__height:200px;
__background:
green;

__position:absolute;
__left:50%;_/*定位父級的50%*/
__top:50%;
__transform:translate(-50%,-50%);/*自己的50%*/
_}


4.flex+justify-content
+align-items


.box{
_height:600px;

_display:flex;
_justify-content:center;//子元素水平居中
_align-items:center;__//子元素垂直居中
__/*aa只要三句話就可以實現不定寬高水平垂直居中。*/
__
.box>div{
__ackground:
green;
__idth:200px;
__eight:200px;
_


4.清除浮動有哪些方法,各有什麼優缺點


·___褂_lear屬性的空元素
在浮動元素後使用一個空元素如

『陸』 css中偽類和偽元素的區別和他們的具體解釋

偽元素的權重比偽類高，比如一個容器的為元素和偽類都定義了同一屬性，但值不一樣，那麼將採用偽元素的。
從規范的角度偽元素一個頁面只使用一次，而偽類可以多次使用。

『柒』 css偽元素和偽類的區別

偽類和偽元素的區別，其實很簡單，從字面上就可以理解。它們有一個共同的修飾詞「偽」，那麼「偽」是什麼意思呢?就是假的。所以，偽類就是假的類，偽元素就是假的元素，這就是在字面上它們之間的區別。

定義

偽類：

CSS3給出的定義是：

The pseudo-class concept is introced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

大致翻譯過來的意思就是：偽類存在的意義是為了通過選擇器，格式化DOM樹以外的信息以及不能被常規CSS選擇器獲取到的信息。

通過上面的概念我們知道了偽類的功能有兩種：

1.格式化DOM樹以外的信息。比如：標簽的:link、:visited 等。這些信息不存在於DOM樹中。

2.不能被常規CSS選擇器獲取到的信息。比如：要獲取第一個子元素，我們無法用常規的CSS選擇器獲取，但可以通過 :first-child 來獲取到。

所以，你可以理解偽元素本質上是創建了一個虛擬容器(元素)了吧。

除了上面這個本質區別以外，在CSS3中：

3.偽類用單冒號:表示;而偽元素用雙冒號::表示。

4.一個選擇器可以同時使用多個偽類(但有的偽類會互斥);而一個選擇器只能同時使用一個偽元素(未來的版本可能會支持多偽元素)。

關於CSS的更多詳解，可以下看這個詳細直觀的視頻教程，網頁鏈接

希望我的回答能幫到你