面試題總結
1.一個寬度爲120px的div裏面有三個40px的div,這時候給三個div加上border 1px的話，會發生什麼，如何解決？
答：加上border 1px的話，最後一個會掉下來，給父盒子設置display:flex; 給每個子盒子div設置flex爲1；當給父盒子設置display:flex;時 就已經不會掉下來了。
2.兩個img標籤中間有間隙如何解決？
答：使用display: inherit;
發生場景：兩個img設置父盒子的一半寬，兩個img不會顯示在一行上，原因就是兩個img中間有間隙，導致一行放不下。
3.vertical-align的屬性有哪些？
答：該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊；
允許指定負長度值和百分比值；
| baseline | 元素放在父元素的基線上 | 默認值 |
|---|---|---|
| sub | 垂直對齊文本的下標 | … |
| super | 垂直對齊文本的上標 | … |
| top | 把元素的頂端與行中最高元素的頂端對齊 | … |
| text-top | 把元素的頂端與父元素字體的頂端對齊 | … |
| middle | 把此元素放置在父元素的中部 | … |
| bottom | 把元素的頂端與行中最低的元素的頂端對齊 | … |
| text-bottom | 把元素的底端與元素字體的底端對齊 | … |
| length | … | … |
| % | 使用繼承的“line-height”屬性的百分比來排列此元素 | 允許負值 |
| inherit | 規定應該從父元素繼承vertical-align屬性的值 | 任何版本的IE都不支持inherit屬性 |
應用場景：
//單選或者多選框
<input type="checkbox" class="checkbox"> 你好
//單選框或者複選框與文字不對齊，可以通過設置vertical-align:-2px;來保持選框和文字對齊。4.什麼是基線，基線定義的標準是什麼？
沒找到特別好的答案
5.
6.display: inline-block;和display: block都可以設置寬高嗎?
太那什麼了，當然都可以，行元素直接設置寬高會無效,這時給行元素設置inline-block或者block就可以設置寬高了
7.設置元素垂直居中對齊
<div class="box">
<img src="./img.ipg">
</div>
//如果box的子元素是img的話，通過給box設置以下樣式可以讓img垂直居中對齊
//display: table-cell;vertical-align:middle;text-align:center;
//這裏的vertical-align要在table-cell下才會生效
<div class="box">
<div class="box1"></div>
</div>
//如果裏面是div，給box設置上面的樣式，是不會讓他水平居中的，要這樣設置
.box {
display: table-cell;
vertical-align: middle;
}
.box1 {
//width: height:設置 爲了容易看見可以設置background
margin: 0 auto;
}
//通過定位讓元素垂直居中(無論子元素是什麼都可以)
父元素{position: relative}
子元素{
position:absolute;
top: 50%;
left: 50%;
margin-top: －子元素高的一半;
margin-left: -子元素寬的一半;
}8. <input type="button">和<button</button>有什麼區別？1> 在button標籤內可以放置文本和圖像，以圖像爲背景的按鈕
但是在input中添加img無法實現
2> 如果在 HTML 表單中使用 button 元素，不同的瀏覽器會提交不同的值。IE將提交 button標籤之間的文本，而其他瀏覽器將提交 value 屬性的內容。所以在 HTML 表單中使用 input 元素來創建按鈕。
3> 如果是button標籤的話，通過.val()獲取的是標籤之前的文本，而不是value的值
例如：
<button class="button" value="test">按鈕</button>
<script>
$('.button').val()
// 在IE上獲取的是“按鈕”，而不是“test”
</script>
9.數組的方法，那些會改變原數組，那些不改變，字符串的呢？
數組的方法總結：
| arr方法： | 描述 | 是否改變原數組 |
|---|---|---|
| join() | 根據字符將數組元素拼接成字符串 | 不改變原數組 |
| push()和pop() | 從數組的前面添加和刪除元素（push返回新的長度,pop返回數組的最後一個元素） | 改變 |
| shift()和unshift() | 從數組的後天刪除和添加元素（shift返回最後一個元素，unshift返回數組的新長度） | 改變 |
| sort(sortby) | 數組排序（參數sortby是個函數，規定排序順序） | 改變原數組 |
| concat() | 連接兩個數組或者更多的數組並返回結果 | 不改變原數組 |
| reverse() | 顛倒數組中元素的順序 | 改變原數組 |
| indexOf(m,n)和lastIndexOf() | 查詢數組中是否存在m,n是查找的起點位置,astIndexOf()從後開始查找 | … |
| forEach() | 對數組進行遍歷循環 | |
| splice | 可以實現刪除、插入和替換 | 改變數組，該返回數組中包含從原始數組中刪除的項，如果沒有刪除任何項，則返回一個空數組 |
| slice(start,end) | 截取一段數據含start,不含end | 不改變原數組 |
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.sort())10. for(var i = 0; i < 5; i++){
setTimeout(function(){
console.log(i);
},0);
}
打印5個5
因爲setTimeout是異步定時函數，就算定時爲0，也要等到循環執行結束之後太執行定時操作11.( function(){…} )()和( function (){…} () )這兩種立即執行函數的寫法有什麼不同？
(function(){})(); 是 把函數當作表達式解析，然後執行解析後的函數
相當於 var a = function(){}; a(); a得到的是函數
(function(){}()); 是把函數表達式和執行當作語句直接執行、
相當於 var a = function(){}(); a得到的是結果