前端知识整理1

前端知识整理，包括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 ，不管是内联样式、