什么是盒模型
每个html元素都可看作一个盒子，由外边距margin、边框border、内边距padding、内容content组成，对这些属性的设置，可以实现元素的不同展示及布局(eg.设置margin实现水平居中)。
盒模型分类
由于浏览器对盒模型的实现不同，形成了：标准盒模型、IE盒模型
二者区别：width和height定义不同
标准盒模型的宽高包括：contentIE盒模型的宽高包括：content、padding、border
如何实现不同分类
由于IE盒模型更贴合人们对于物理盒子宽高的理解，所以通常采用IE盒模型。
设置两种模型的方法：
- box-sizing: border-box; // IE盒模型
- box-sizing: content-box; // 标准盒模型
JS如何获取盒子宽、高
方法一：
dom.style.width/height
// 缺点：仅能获取js显式设置或dom标签上设置的行内样式中的宽高，
// 无法获取内联样式(<style>标签设置的样式)、外联样式(<link>标签引入的样式)中的宽高。❗️👍
方法二：
dom.currentStyle.width/height
// 缺点：可获取各种方式综合层叠计算后的宽高，但仅支持IE浏览器。👎
方法三：
window.getComputedStyle(dom).width/height
// 可获取各种方式综合层叠计算后的宽高，兼容性很好(IE9+)。👍👍
方法四：
dom.getBoundingClientRect().width/height
// `getBoundingClientRect` 可获取元素的宽高及相对于视口原点(浏览器网页部分的左上角)位置信息(top、left)。👍
什么是边距重叠
边距重叠：是指父子、相邻兄弟元素的外边距会重叠在一起，大小取较大的那个边距。
如何解决边距重叠 —— BFC（块级格式化上下文）
BFC的渲染规则：
- BFC元素垂直方向的外边距会重叠；
- BFC元素区域不会与浮动元素重叠(父级添加overflow: hidden清除浮动的原理)；
- BFC元素是一个独立的区域，它不会影响外部布局，外部元素也不会影响它内部布局；
- 计算BFC高度时，浮动元素也会参与计算。
如何创建BFC
- float 不为 none
- position 不为 static、relative
- display 不为 inline
- overflow 不为 visible
其它
我将学习、工作中的积累做成了开源项目：Blog
欢迎关注并一起讨论学习。
