记忆：
常用的 border-box 是IE盒模型，padding/border 的变化会修改其 width 内在盒子。
盒模型
页面就是由一个个盒模型堆砌起来的， 每个HTML元素 都可以叫做 盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。
补充：
每个元素的盒子由内容两层组成：外在盒子和容器盒子（内在盒子）
平时：
display: inline-block实际是display: inline-block的简写
display: block实际是display: block-block的简写
display: table实际是display: block-table的简写
问：width/height 作用在哪个盒子上？
答：内在盒子，也就是 content
20190302-12:54于文二路博库书城：
暂时理解盒模型由： margin + 外在盒子 + 容器盒子组成
应该不对吧？
20190302-15:48：
"内在盒子" 又被分成了 4 个盒子，分别是 content box、padding box、border box 和 margin box。
“margin 的背景永远是透明的”!!!
对于块状元素，如果设置width：
1）流动性丢失
对于块状元素，如果 width:auto，则元素会如水流般充满整个容器，而一旦设定了 width
具体数值，则元素的流动性就会被阻断，因为元素给定宽度就像河流中间竖了两个大闸一样， 就没有了流动性。尤其宽度作用在 content box 上，更是内外流动性全无，如图 3-21 所示。
这世界上任何事物，一旦限死了，就丧失了灵活性，其发展潜力及作用范围就会大大 受限。
长江为何生机勃勃数千年，就是因为滔滔江水，奔流不息。CSS 的流动性也是其生机蓬勃 之本，如果直接宽度设死，流动性丢失，在我看来，就是江河变死水，手机变板砖。这就是我 提出 “无宽度准则”的原因— 布局会更灵活，容错性会更强。
(2)与现实世界表现不一致的困扰。
包含 padding 或 border 会让元素宽度变大的这种 CSS 表现往往会让 CSS 使用者困惑: 我设置宽度为 100 像素，其实是希望整个最终的宽度是 100 像素，这样才符合现实理解嘛。
或许是因为 CSS 2.1 是面向内容(图文信息)设计的，所以，width 设计成了直接作用在 content box 上。
问：为何没有box-sizing: margin-box?
答：
-
margin-box本身不会改变元素尺寸，其本身没有存在的意义。而border、padding不一样 - 另外一个原因牵扯到语义。如果
box-sizing开了先河支持了margin-box，margin box就变 成 了 一 个“ 显 式 的 盒 子 ”，你 让background-origin等 属 性 何 去 何 从 ，支 持 还 是 不 支 持 呢 ?“margin的背景永远是透明的”这几个大字可是在规范写得清清楚楚，难道让背景色在所谓的margin box中也 显示?
关于“流”的重点：CSS 的默认流是水平方向的，宽度是稀缺的，高度是无限的。
分类
标准盒模型（W3C）
内容大小就是content
IE盒模型
内容大小是：padding+border+content
切换
使用box-sizing可以切换两者类型的模型content-box、border-box
JS如何获取和设置Box宽高
1、
兼容性好(非IE)：window.getComputedStyle(dom).width/height
仅限IE：dom.currentStyle.width/height
var obj = document.getElementById("test");
if(window.getComputedStyle){
// window.getComputedStyle(obj).width
}else{
// obj.currentStyle.width
}
2、dom.style.width/height（只能用于行内元素）
3、dom.offsetWidth/height（box-sizing：border-box；下）
4、dom.getBoundingClientRect().width/height !!!!!
这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。
ps：能获取元素在页面可视区域的坐标
这些盒子如何摆放呢？
根据：块级格式化上下文和行内格式化上下文
盒子在摆放过程中，会通过盒的类型生成格式化上下文。
块级格式化上下文：Block Formtting Content（BFC）
规定了内部的块级盒如何布局，并且使该盒子在页面上形成一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
margin塌陷的解释
所谓的塌陷其实是两个BFC的相邻盒或者父子盒相互作用时产生的。
在形成BFC的两个盒子会取两个盒子相邻边的最大margin作为相邻边的共用margin。
BFC块级格式化上下文如何产生
属性值为下面时，box会产生BFC：
- overflow: auto/ hidden;
- position: absolute/ fixed;
- float: left/ right;
- display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
元素浮动时BFC的应用
浮动元素会从正常文档流中删除，这也是为什么其它正常元素会看不见浮动的原因，也是为什么有父级塌陷的原因
清除浮动一种方法是使用overflow：auto/hidden，使用后整体形成了BFC，相当于清除了浮动。
