1. 三列布局知识：
（1）圣杯布局：
圣杯布局使用float、负margin和relative，不需要添加额外标签。.main元素设置padding，为两侧定宽元素留出位置。内容元素设置100%宽度，占据中间位置。而两侧定宽元素通过设置负margin和relative的偏移属性配合，到达相应位置。（缺点: 并没有实现等高布局；使用了相对定位，扩展性不好）
（2）双飞翼布局：
双飞翼布局在圣杯布局的基础上，通过为.main元素外添加一层div结构，不使用相对定位。在.main元素上设置margin。两侧的定宽列通过负margin来占据.main元素的margin区域。（缺点: 并没有实现等高布局，增加了html结构）
总结：由于限定了主要内容元素在html结构中位于前面，通过css样式改变将其位置调换到中间的前提，所以思路并不是很多。float浮动流的元素可以通过负margin调换位置；absolute绝对定位流的元素可以通过偏移属性调换位置；flex弹性盒模型可以通过order属性调换位置；grid通过grid-area调换位置。而处于正常流中的元素除了使用relative外，使用负margin是无法调换位置的，所以table、inline-block等布局方式在此前提下不是很实用。
2. margin折叠问题
外边距折叠，指的是毗邻的两个看或多个外边距 (margin) 在垂直方向会合并成一个外边距。
触发条件：毗邻，没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系。这些 margin 都处于普通流中，即非浮动元素，非定位元素
html:
<div class="outer"> <div class="inner">Content</div></div>
css:
[javascript] view plain copy
.outer {
b margin-top: 100px;
}
.inner {
margin-top: 50px;
}
比邻元素的边距总是折叠。但是得除了以下几种情况：
根元素不折叠
有间隙不折叠
浮动不折叠
创建BFC与子不折叠
positioned 不折叠
inline-box 不折叠
兄弟有间隙不折叠
父子间有padding 和 border 不折叠
3. 手动实现debounce throttle reduce函数（跟闭包相关知识）
什么是闭包：
Closures(闭包)是使用被作用域封闭的变量，函数，闭包等执行的一个函数的作用域。通常我们用和其相应的函数来指代这些作用域。(可以访问独立数据的函数)。闭包是一个函数和声明该函数的词法环境的组合。从理论角度来说，所有函数都是闭包。
debounce函数：
[javascript] view plain copy
$('#input').on('input', debounce(inputChange, 300));
functiondebounce (fn, ms){
var timer;
return function(){
let that =this;
timer &&clearTimeout(timer);
timer =setTimeout(()=>{
console.log(this);
fn.call(this, 'aa','bb');
}, ms);
}
}
function inputChange(){
let c =$(this).val();
console.log(arguments[0],arguments[1])
}
throttle函数：
[javascript] view plain copy
function throttle(fn, ms){
var timer;
returnfunction(){
if(timer) return
timer =setTimeout(()=>{
fn.call(this, 'change');
clearTimeout(timer)
timer =null;
},ms);
}
}
arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。
educe函数：
[javascript] view plain copy
function meduce(arr, fn){
var result;
if(arr && arr.length >0){
for(let i =0; i < arr.length; i++ ){
if(i ==0){
result = arr[i]
}else{
result = fn.call(this, result,arr[i])
}
}
}
return result
}
function add(x,y){
return x*y
}
let c =meduce(a, add);
（代码自己简单实现，不一定全面，仅供参考）
（1）圣杯布局：
圣杯布局使用float、负margin和relative，不需要添加额外标签。.main元素设置padding，为两侧定宽元素留出位置。内容元素设置100%宽度，占据中间位置。而两侧定宽元素通过设置负margin和relative的偏移属性配合，到达相应位置。（缺点: 并没有实现等高布局；使用了相对定位，扩展性不好）
（2）双飞翼布局：
双飞翼布局在圣杯布局的基础上，通过为.main元素外添加一层div结构，不使用相对定位。在.main元素上设置margin。两侧的定宽列通过负margin来占据.main元素的margin区域。（缺点: 并没有实现等高布局，增加了html结构）
总结：由于限定了主要内容元素在html结构中位于前面，通过css样式改变将其位置调换到中间的前提，所以思路并不是很多。float浮动流的元素可以通过负margin调换位置；absolute绝对定位流的元素可以通过偏移属性调换位置；flex弹性盒模型可以通过order属性调换位置；grid通过grid-area调换位置。而处于正常流中的元素除了使用relative外，使用负margin是无法调换位置的，所以table、inline-block等布局方式在此前提下不是很实用。
2. margin折叠问题
外边距折叠，指的是毗邻的两个看或多个外边距 (margin) 在垂直方向会合并成一个外边距。
触发条件：毗邻，没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系。这些 margin 都处于普通流中，即非浮动元素，非定位元素
html:
<div class="outer"> <div class="inner">Content</div></div>
css:
[javascript] view plain copy
.outer {
b margin-top: 100px;
}
.inner {
margin-top: 50px;
}
比邻元素的边距总是折叠。但是得除了以下几种情况：
根元素不折叠
有间隙不折叠
浮动不折叠
创建BFC与子不折叠
positioned 不折叠
inline-box 不折叠
兄弟有间隙不折叠
父子间有padding 和 border 不折叠
3. 手动实现debounce throttle reduce函数（跟闭包相关知识）
什么是闭包：
Closures(闭包)是使用被作用域封闭的变量，函数，闭包等执行的一个函数的作用域。通常我们用和其相应的函数来指代这些作用域。(可以访问独立数据的函数)。闭包是一个函数和声明该函数的词法环境的组合。从理论角度来说，所有函数都是闭包。
debounce函数：
[javascript] view plain copy
$('#input').on('input', debounce(inputChange, 300));
functiondebounce (fn, ms){
var timer;
return function(){
let that =this;
timer &&clearTimeout(timer);
timer =setTimeout(()=>{
console.log(this);
fn.call(this, 'aa','bb');
}, ms);
}
}
function inputChange(){
let c =$(this).val();
console.log(arguments[0],arguments[1])
}
throttle函数：
[javascript] view plain copy
function throttle(fn, ms){
var timer;
returnfunction(){
if(timer) return
timer =setTimeout(()=>{
fn.call(this, 'change');
clearTimeout(timer)
timer =null;
},ms);
}
}
arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。
educe函数：
[javascript] view plain copy
function meduce(arr, fn){
var result;
if(arr && arr.length >0){
for(let i =0; i < arr.length; i++ ){
if(i ==0){
result = arr[i]
}else{
result = fn.call(this, result,arr[i])
}
}
}
return result
}
function add(x,y){
return x*y
}
let c =meduce(a, add);
（代码自己简单实现，不一定全面，仅供参考）
