共计 1984 个字符，预计需要花费 5 分钟才能阅读完成。
前端知识整理，包括 html/css/js，但不限于这三大类，持续更新中。本人水平有限，如有错误或更好的答案，欢迎指正，望各位不吝指教。:）
1.HTML
2.CSS
2.1 css 三栏布局实现方案
题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为 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. 兼容性如何，在真实业务中，哪个方案最实用？如上，根据使用场景和业务需求，选择合适的方案。
2.2 清除浮动的实现方案
题目：有哪些清除浮动的方案？每种方案的优缺点？
2.3 css 盒模型
题目：谈谈你对 css 盒模型的认识？
1. 基本概念（标准模型 +IE 模型）css 盒模型：margin + border + padding + content
2. 标准模型和 IE 模型的区别区别就是高度和宽度的计算方式不同标准模型：width(height) = contentIE 模型：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，不管是内联样式、<style> 标签写的样式、<link> 外联样式，即获取渲染后的宽高（仅 IE 支持）（3）window.getComputedStyle(dom).width/height，获取渲染后的宽高（兼容性更好、通用性更好，chrome/firefox）（4）dom.getBoundingClientRect().width/height，获取渲染后的宽高（计算元素的绝对位置，返回 top/left/width/height）
5. 根据盒模型解释边距重叠（1）父子元素边距重叠，取最大值合并（2）兄弟元素边距重叠，取最大值合并（3）空元素上下边距重叠，取最大值合并
6.BFC（边距重叠解决方案）BFC 的基本概念：块级格式化上下文 BFC 的原理（BFC 的渲染规则）：（1）在 BFC 元素的垂直方向的边距会发生重叠；（2）BFC 的区域不会与浮动元素发生重叠；（3）BFC 在页面上是一个独立的容器，外面的元素不影响里面，里面的元素不影响外面；（4）计算 BFC 的高度时，浮动元素也会参与计算；（BFC 子元素即使是 float 也会参与高度计算）如何创建 BFC？（1）float 的值不为 none；（2）position 的值不为 static 或者 relative（可以设置为 absolute 或者 fixed）；（3）display:inline-block; 或者 table/table-cell 等与 table 相关的属性（4）overflow:hidden; overflow:auto;
