前端知識整理，包括html/css/js，但不限于這三大類，持續(xù)更新中。
本人水平有限，如有錯誤或更好的答案，歡迎指正，望各位不吝指教。:）

題目：假設(shè)高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應(yīng)

1.浮動布局
實現(xiàn)方法：左欄、右欄分別左右浮動，定寬300px，中間不設(shè)置寬度自適應(yīng)
缺點：浮動元素脫離文檔流，需要清除浮動，如果處理不好，會導(dǎo)致很多問題（影響前后標(biāo)簽、父級標(biāo)簽的位置及 width height 屬性）。
優(yōu)點：比較簡單，兼容性比較好。只要清除浮動做的好，是沒有什么問題的。
2.絕對定位布局
實現(xiàn)方法：三欄設(shè)置絕對定位，左欄 left:0; width:300px，右欄 right:0; width:300px，中間 left:300px; right:300px;
缺點：脫離文檔流，之后的元素也要脫離文檔流。有效性、可使用性比較差。
優(yōu)點：方便快捷，配合js使用方便。
3.flex布局
實現(xiàn)方法：三欄的父元素 display:flex; 中間 flex:1; 左欄、右欄定寬300px;
優(yōu)點：移動端已經(jīng)大量使用，是css3為了解決上面兩種方案的缺點而出現(xiàn)，是相對比較完美的方案。
缺點：不能兼容IE8及以下瀏覽器。
4.表格布局
實現(xiàn)方法：三欄的父元素 display:table; 三欄分別設(shè)置 display: table-cell; 左欄、右欄定寬300px;
優(yōu)點：用表格布局實現(xiàn)三欄布局很簡單就能搞定，兼容性好（兼容IE8），在flex布局不兼容的時候，可以嘗試表格布局。
缺點：有些歷史詬病，只適用部分場景；某個內(nèi)容撐開了，其他內(nèi)容也會跟著撐開，有時候這種效果不是我們想要的。
5.網(wǎng)格布局
實現(xiàn)方式：三欄的父元素 display:grid; grid-template-rows:100px; grid-template-columns:300px auto 300px;
網(wǎng)格布局是新出的一種布局方式，技術(shù)比較新，還未普及，但是也需要我們掌握。

三個延伸問題
1.幾種布局方式的優(yōu)缺點？
如上

2.假設(shè)把高度去掉，三欄的高度根據(jù)內(nèi)容自適應(yīng)，那個方案不再適用，哪個還能適用？
flex和table還能適用，其余不再適用。

3.兼容性如何，在真實業(yè)務(wù)中，哪個方案最實用？
如上，根據(jù)使用場景和業(yè)務(wù)需求，選擇合適的方案。

題目：有哪些清除浮動的方案？每種方案的優(yōu)缺點？

題目：談?wù)勀銓ss盒模型的認(rèn)識？

1.基本概念（標(biāo)準(zhǔn)模型+IE模型）
css 盒模型：margin + border + padding + content

2.標(biāo)準(zhǔn)模型和IE模型的區(qū)別
區(qū)別就是高度和寬度的計算方式不同
標(biāo)準(zhǔn)模型：width(height) = content
IE模型：width(height) = border + padding + content

3.css如何設(shè)置這兩種模型
標(biāo)準(zhǔn)模型：box-sizing: content-box; （瀏覽器默認(rèn)值）
IE模型：box-sizing: border-box;

4.JS如何設(shè)置、獲取盒模型對應(yīng)的寬和高
（1）dom.style.width/height ，這種方式只能獲取內(nèi)聯(lián)樣式設(shè)置的寬和高
（2）dom.currentStyle.width/height ，不管是內(nèi)聯(lián)樣式、