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

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

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

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

2.假設把高度去掉，三欄的高度根據內容自適應，那個方案不再適用，哪個還能適用？
flex和table還能適用，其余不再適用。

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

題目：有哪些清除浮動的方案？每種方案的優缺點？

題目：談談你對css盒模型的認識？

1.基本概念（標準模型+IE模型）
css 盒模型：margin + border + padding + content

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

3.css如何設置這兩種模型
標準模型：box-sizing: content-box; （瀏覽器默認值）
IE模型：box-sizing: border-box;

4.JS如何設置、獲取盒模型對應的寬和高
（1）dom.style.width/height ，這種方式只能獲取內聯樣式設置的寬和高
（2）dom.currentStyle.width/height ，不管是內聯樣式、