2019前端面試集合
- css
- 1、介紹一下標準css的盒子模型？與低版本IE盒子模型有什麼不同的？
- 2、css選擇器有哪些？哪些屬性可以繼承？
- 3、css優先級算法怎麼計算？
- 4、display都有哪些值及作用？
- 5、position
- 6、你瞭解哪種佈局模式呢？flexBox？
- 7、用純css寫一個三角形
- 8、設置元素浮動後，該元素的display值是多少？
- 9、移動端佈局過媒體查詢嗎？
- 10、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
- 11、如何使頁面的內容框居中 ？
- 12、如何讓一個元素在其父元素水平垂直都居中
- 13、如何使用兩列的佈局
- 14、如何做自適應的css佈局，如何針對電腦手機做不同的尺寸調節
- 15、簡單寫出query的ajax的請求，參數以及返回值
- 16、列舉清除浮動的方法
- 17、css優化
- js
- vue
- react
- node
- es6
- webpack
- 網絡
- git
css
1、介紹一下標準css的盒子模型？與低版本IE盒子模型有什麼不同的？
-
- 標準盒子模型：
- 寬度 = 內容寬度(content) + 邊框(border) + 內邊距(padding) + 外邊距(marigin)
-
- 低版本IE盒子模型：
- 寬度 = 內容寬度(content+border_padding) + 外邊距(margin)
2、css選擇器有哪些？哪些屬性可以繼承？
-
- css選擇符：
- id選擇器(#)
類選擇器(.)
標籤選擇器(,)
相鄰選擇器(+)
子選擇器(>)
後代選擇器(空格)
通配符選擇器(*)
屬性選擇器([])
僞類選擇器(?
- 可繼承屬性：font-size, font-family, color
- 不可繼承屬性：border, padding, margin, width, height
3、css優先級算法怎麼計算？
元素選擇符： 1
class選擇符： 10
id選擇符：100
元素標籤：1000
!important聲明的樣式優先級最高，如果衝突再進行計算。
如果優先級相同，則選擇最後出現的樣式。
繼承得到的樣式的優先級最低。
4、display都有哪些值及作用？
inline（默認）–內聯
none–隱藏
block–塊顯示
table–表格顯示
list-item–項目列表
inline-block
5、position
static（默認）：按照正常文檔流進行排列；
relative（相對定位）：不脫離文檔流，參考自身靜態位置通過 top, bottom, left, right 定位；
absolute(絕對定位)：參考距其最近一個不爲static的父級元素通過top, bottom, left, right 定位；
fixed(固定定位)：所固定的參照對像是可視窗口。
6、你瞭解哪種佈局模式呢？flexBox？
該佈局模型的目的是提供一種更加高效的方式來對容器中的條目進行佈局、對齊和分配空間。在傳統的佈局方式中，block 佈局是把塊在垂直方向從上到下依次排列的；而 inline 佈局則是在水平方向來排列。彈性盒佈局並沒有這樣內在的方向限制，可以由開發人員自由操作。
試用場景：彈性佈局適合於移動前端開發，在Android和ios上也完美支持。
7、用純css寫一個三角形
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
8、設置元素浮動後，該元素的display值是多少？
display:block
9、移動端佈局過媒體查詢嗎？
通過媒體查詢可以爲不同大小和尺寸的媒體定義不同的css，適應相應的設備的顯示。
<head>裏邊<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
CSS : @media only screen and (max-device-width:480px) {/css樣式/}
10、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
響應式網站設計(Responsive Web design)是一個網站能夠兼容多個終端，而不是爲每一個終端做一個特定的版本。
基本原理是通過媒體查詢檢測不同的設備屏幕尺寸做處理。
頁面頭部必須有meta聲明的viewport。
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
11、如何使頁面的內容框居中 ？
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
12、如何讓一個元素在其父元素水平垂直都居中
-
水平居中：
margin:0 auto;
前提： 被包裹的元素不能有浮動的屬性。否則這個屬性就會失效。
text-align: center;
前提： 在沒有浮動的情況下，將其轉換爲inline/inline-block，然後給父元素加上text-align：cener -
水平垂直居中
定位
子元素相對父元素絕對定位，並margin減去自己高的一半
前提：必須知道自己的寬高
定位
子元素相對父元素絕對定位，並margin值auto
前提：該方式不受狂傲限制display： table-cell
該方法將元素換成表格樣式，再利用表格樣式來進行居中.box { display: table-cell; vertical-align: middle; } .item { margin: 0 auto; }絕對定位和transform
該方法用最能裝逼，用到了css3變形，面試者看到你代碼裏面有這樣的 ，你的逼格瞬間就上去了，當然了你知道的，逼格的東西是有兼容性問題的.box { position: relative; } .item { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }css3中的flex屬性
.box { display: flex; justify-content: center; align-items: center; } .item { }
13、如何使用兩列的佈局
```
https://www.cnblogs.com/LingXiangLi/p/10252873.html
```
* 兩個盒子都設置float-left/right 值相同
* 計算好寬度 三個盒子寬度之和大於父級元素寬度 兩個div寬度小於div寬度
* 浮動
float:left;float:right
14、如何做自適應的css佈局，如何針對電腦手機做不同的尺寸調節
媒體查詢
15、簡單寫出query的ajax的請求，參數以及返回值
$.ajax({
url: '', // 請求路徑
type: 'GET', // 請求方式
dataType: 'json',
data: {}, &code = 456
success: function() {
}
})
16、列舉清除浮動的方法
浮動： 是元素脫離文檔流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停下。
高度塌陷： 浮動元素父元素高度自適應（父元素不寫高的時候，子元素浮動，父元素會發生高度塌陷）
方法一：添加新元素、應用clear：both
在浮動的盒子下放一個標籤，這個標籤中使用clear：both，來清除浮動對頁面的影響。
注意：一般情況下不會使用這種方式，因爲這種清除浮動的方式會增加頁面的標籤，造成結構的混亂。
.clear{cleat:both}
方法二：父級div定義overflow: auto
使用overflow屬性來清除有一點需要注意，overflow屬性共有三個屬性：hidden，auto，visible。我們可以使用hidden和auto值來清除浮動，但切記不能使用visible值。
{overflow: auto; zoom:1} // zoom1處理兼容性問題
方法三： 使用僞元素來清除浮動
.clearfix:after{
content:"";/*設置內容爲空*/
height:0;/*高度爲0*/
line-height:0;/*行高爲0*/
display:block;/*將文本轉爲塊級元素*/
visibility:hidden;/*將元素隱藏*/
clear:both;/*清除浮動*/
}
.clearfix{
zoom:1;/*爲了兼容IE*/
}
方法四： 使用雙僞元素清除浮動
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
### 隱藏內容的方法
```
1.常用的display:none方法
<p style="display:none;">文字看不見</p>
2.文本縮進負值方法
<p style="text-indent:-99999px;">文字看不見</p>
3.文字大小爲0方法
<p style="font-size:0">文字看不見</p>
4.width和height爲0+防止溢出方法
<p style="width:0;height:0;overflow:hidden;">文字看不見</p>
5.絕對定位負值方法
<p style="position: absolute;left:-6600px;top:-1000px;">文字看不見</p>
6.絕對定位+margin負值方法
<p style="position:absolute;margin-top:-9999px;margin-left:-9999px; ">文字看不見</p>
```
17、css優化
避免過度約束
避免後代選擇符
避免鏈式選擇符
使用緊湊的語法
避免不必要的命名空間
避免不必要的重複
最好使用表示語義的名字。一個好的類名應該是描述他是什麼而不是像什麼
避免！important，可以選擇其他選擇器
儘可能的精簡規則，你可以合併不同類裏的重複規則
js
js頁面跳轉常用的幾種方式
- window.location.href = ‘’
- window.history.back(-1)
- window.navigate(’’)
- self.location = ‘’
- top.location = ‘’
事件委託
https://www.cnblogs.com/moqing/p/5590433.html
宏任務微任務
var x = 0;
var func = function() {
var x = 1;
return {
x: -1,
f: function() {
++x;
},
g: function() {
console.log(x); // 2 3
},
g2: function() {
// console.log(this,'sss')
console.log(this.x); // -1
}
}
};
var z = func();
z.f();
z.g();
z.g2();
z.f.apply(this, []);
z.g.apply(this);