DOM与BOM区别
JavaScript的实现包括以下3个部分
| 名称 | 功能 |
|---|---|
| ECMAScript(核心) | 描述了JS的语法和基本对象 |
| 文档对象模型(DOM) | 处理网页内容的方法和接口 |
| 浏览器对象模型(BOM) | 与浏览器交互的方法和接口 |
- DOM（文档对象模型），提供了与网页内容交互的 方法 和 接口。 DOM 将整个页面抽象为一组分层节点。HTML 或 XML 页面的每个组成部分都是一种节点，包含不同的数据。DOM 通过创建表示文档的树，让开发者可以随心所欲地控制网页的内容和结构。使用 DOM API，可以轻松地删除、添加、替换、修改节点
- BOM（浏览器对象模型），提供了与浏览器交互的 方法 和 接口。 BOM 主要针对浏览器窗口和子窗口(frame)。使用 BOM，开发者可以操控浏览器显示页面之外的部分，不同浏览器有不同的实现，比如：
1）弹出新浏览器窗口的能力;
2）移动、缩放和关闭浏览器窗口的能力;
3）navigator 对象，提供关于浏览器的详尽信息;
4）location 对象，提供浏览器加载页面的详尽信息;
5）screen 对象，提供关于用户屏幕分辨率的详尽信息;
6）performance 对象，提供浏览器内存占用、导航行为和时间统计的详尽信息;
7）对浏览器存储相关的操作比如 cookies、sessionStorage 、localStorage 等;
8）其他自定义对象，如 XMLHttpRequest 和 IE 的 ActiveXObject；
flex-shrink
一个宽度为400px的容器，里面的三个项目width分别为120px，150px，180px。
.container{
display: flex;
width: 400px;
}
.item1{
width: 120px;
flex-shrink: 2;
}
.item2{
width: 150px;
flex-shrink: 3;
}
.item3{
width: 180px;
// 默认flex-shrink的值为1
}
在这个例子中，项目溢出 400 - (120 + 150 + 180) = -50px。计算压缩量时总权重为各个项目的宽度乘以flex-shrink的总和，这个例子压缩总权重为120 * 2 + 150 * 3+ 180 * 1 = 870。各个项目压缩空间大小为总溢出空间乘以项目宽度乘以flex-shrink除以总权重：
item1的最终宽度为：120 - 50 * 120 * 2 / 870 ≈ 106px
item2的最终宽度为：150 - 50 * 150 * 3 / 870 ≈ 124px
item3的最终宽度为：180 - 50 * 180 * 1 / 870 ≈ 169px
需要注意一点，当项目的压缩因子相加小于1时，参与计算的溢出空间不等于完整的溢出空间。
.item1{
width: 120px;
flex-shrink: 0.1;
}
.item2{
width: 150px;
flex-shrink: 0.2;
}
.item3{
width: 180px;
flex-shrink: 0.3;
}
总权重为：120 * 0.1 + 150 * 0.2 + 180 * 0.3 = 96。参与计算的溢出空间不再是50px，而是50 * (0.1 + 0.2 + 0.3) / 1 =30：
item1的最终宽度为：120 - 30 * 120 * 0.1 / 96 ≈ 116px
item2的最终宽度为：150 - 30 * 150 * 0.2 / 96 ≈ 140px
item3的最终宽度为：180 - 30 * 180 * 0.3 / 96 ≈ 163px
flex-grow
当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。属性值为项目的扩张因子，属性值取非负数。
一个宽度为400px的容器，里面的三个项目width分别为80px，120px，140px。分别对这项目1和项目2设置flex-grow值为3和1。
.container{
display: flex;
width: 400px; // 容器宽度为400px
}
.item1{
width: 80px;
flex-grow: 3;
}
.item2{
width: 120px;
flex-grow: 1;
}
.item3{// 项目3未设置flex-grow，默认flex-grow值为0
width: 140px;
}
在这个例子中，容器的剩余空间为 400 - (80 + 120 + 140) = 60px。剩余空间按 60 / (3 + 1 + 0) = 15px进行分配：
item1的最终宽度为：80+ (15 * 3) = 125px
item2的最终宽度为：120 + (15 * 1) = 135px
item3的最终宽度为：140 + (15 * 0) =140px
需要注意一点，当项目的扩张因子相加小于1时，剩余空间按除以1进行分配。
.item1{
width: 50px;
flex-grow: 0.1;
}
.item2{
width: 80px;
flex-grow: 0.3;
}
.item3{
width: 110px;
flex-grow: 0.2;
}
在这个例子中，容器的剩余空间为 400 - (50 + 80 + 110) = 160px。由于项目的flex-grow相加0.1 + 0.3 + 0.2 = 0.6小于1，剩余空间按 160 / 1 = 160px划分。例子中的项目宽度分别为：
item1的最终宽度为：50 + (160 * 0.1) = 66px
item2的最终宽度为：80 + (160 * 0.3) = 128px
item3的最终宽度为：110 + (160 * 0.2) = 142px
flex-basis
当容器设置flex-direction为row或row-reverse时，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替项目的width属性。
当容器设置flex-direction为column或column-reverse时，flex-basis和height同时存在，flex-basis优先级高于height，也就是此时flex-basis代替项目的height属性。
需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。
