学习随笔

盒模型分为IE盒模型和W3C标准盒模型。

1. W3C 标准盒模型：
   属性width,height只包含内容content，不包含border和padding。
2. IE 盒模型：
   属性width,height包含border和padding，指的是content+padding+border。

在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失会触发IE模式。在当前W3C标准中盒模型是可以通过box-sizing自由的进行切换的。

2.bfc:特性

1.BFC是独立的渲染区域
2.bfc计算高度时浮动也参与计算
3.bfc的区域不回与float box重叠
4.同属一个bfc相邻的元素（BOX）边距（margin）会发生重叠

BFC 有什么用?
有了 BFC 我们就可以利用它来解决一些问题。比如：浮动导致的父元素高度坍塌，甚至我们还可以利用 BFC 的特性来实现多栏自适应布局。

浮动导致的父元素高度坍塌利用了【计算BFC的高度时，浮动元素也参与计算】这一特性实现的。

实现多栏自适应布局是利用了【BFC的区域不会与float box重叠】这一特性实现的。

外边距重叠（取最大的外边距值），可利用【BFC 是一个独立的区域】这一特性来解决。
(https://juejin.im/post/5e8d36ac51882573ab44fdec#heading-0
)

BFC创建方法

1.根元素（html）
2.float的值不是none
3.position的值不是static或者relative
4.display的值是inline-block,table-cell,flex,
5.overflow的值不是visible

去重

let person = [
     {id: 0, name: "小明"},
     {id: 1, name: "小张"},
     {id: 2, name: "小李"},
     {id: 3, name: "小孙"},
     {id: 1, name: "小周"},
     {id: 2, name: "小陈"},  
];
 
let obj = {};
 
let peon = person.reduce((cur,next) => {
    obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
    return cur;
},[]) //设置cur默认类型为数组，并且初始值为空的数组
console.log(peon);

6.数组去重

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index)  
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]
###########################################
var arr=[1,2,1,'1',null,null,undefined,undefined,NaN,NaN]
let res=Array.from(new Set(arr));//{1,2,"1",null,undefined,NaN}
//or
let newarr=[...new Set(arr)]