前端面試題總結

1. 彈性布局

flex布局是css3中新增的一種布局方式。

/*元素排列方式*/ flex-direction： /* */ /* 超出行是否換行 nowrap不換行 */ flex-wrap： /*水平對齊方式 */ justify-content /*垂直對齊方式 */ align-items /*實現水平居中對齊： */ display：flex justify-content：center

align-items：center

2. 塊級元素水平垂直居中方法

1)已知塊級元素的寬和高，使用絕對定位absolute和外邊距實現水平垂直居中。

/*//父元素*/
position
: relative;
/*//子元素 */
position
: absolute;
left
: 50%;
top: 50%;
margin-left:-
(width/2)px;
margin-top:-
(height/2)px;

2)使用css3 display:flex（ie存在相容性問題）

/*父元素*/
display
: flex;
/*子元素*/
margin
: auto;
/*或者直接給父元素設定*/
display
: flex;
justify-content
: center;
align-items
: center;

3)使用絕對定位+css3 transform（由於transform中translate偏移的百分比都是相對於自身而言的，所以不必知道子元素的寬高，但是對於ie只有ie9+才支援）

/*父元素*/
position
: relative;
/*子元素*/
position
: absolute;
top: 50%;
left
: 50%;
transform
:translate
(-50%, -50%)
;

4)已知子元素的寬和高，設定其樣式屬性

/*父元素*/
position
: relative;
/*子元素*/
position
: absolute;
top: 0;
left
: 0;
bottom
: 0;
right
: 0;
margin
: auto;

3.css3盒子模型

html文件中的每個元素都被描繪成矩形盒子，這些矩形盒子通過乙個模型來描述其占用空間，這個模型稱為盒模型。盒模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內邊距），content（內容區域）

（1）w3c的標準盒模型

（2）ie傳統下盒模型

瀏覽器把每個元素看作乙個盒子模型，每乙個盒子模型是由以下屬性組合所決定的：display、position、float、width、height、margin、padding和border等。不同型別的盒模型會產生不同的布局。

4. 頁面匯入樣式時，使用link和@import有什麼區別?

5. js資料型別：

基本資料：number，string，boolean，null，undefined，symbol（es6新增，表示獨一無二的值。）

引用資料：object（陣列，函式，物件的資料型別均為物件）

6. 立即執行函式

顧名思義，也就是說這個函式是立即執行函式體的，不需要你額外去主動的去呼叫，立即執行函式可以在函式建立後立即執行。立即執行函式的兩種常見形式：

(
function()
)()(
function()
())

注意：

7.閉包

什麼是閉包？

閉包指的是：能夠訪問另乙個函式作用域的變數的函式；

簡單來說：閉包就是乙個函式，這個能夠訪問其他函式作用域中的變數；

function
test()
}var
try=
test()
;try()
;//彈出a的值

這個例子中，變數a在test方法外部是無法訪問的，但test方法裡面，巢狀了乙個匿名函式，通過return返回，test作用域中的變數a，可以在匿名函式中訪問。並且當test方法執行後，變數a所佔記憶體並不會釋放，以達到巢狀的函式還可以訪問的目的。

前端面試題總結

前端面試題總結

前端面試題總結

前端面試題總結

相關推薦