一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

一、两种CSS盒子模型

• 在CSS中可以通过box-sizing属性定义这两种盒子模型

（一）标准模型

• 在标准模型中，盒子的宽高度为：内容的宽高度
• 在css中的属性设置：box-sizing:content-box;

（二）IE模型

• 在IE模型中，盒子的宽高度为：内容的宽高度+padding的宽高度+border的宽高度
• 在css中的属性设置：box-sizing:border-box;

二、Js中获取和设置模型的宽高

• dom.style.width/height:这种方法只能获取内联样式的宽高

• dom.currentStyle.width/height:该方法获取的是渲染完毕后的宽和高，但是这个属性只有IE浏览器支持

• window.getComputedStyle(dom).width/height:这种方法相比于前一种方法兼容性更好，能在chrome中使用

• dom.getBoundingClientRect: getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置

更多Js中获取盒子宽高的属性可以查看这篇文章：JS箭头函数和盒子模型，里面介绍了Client系列、offset系列和scroll系列获取相关属性的使用

三、BFC(边距重叠解决方案)

这部分的内容可以查看之前的文章：块级格式化上下文-BFC，里面介绍了什么是BFC、BFC的特点以及BFC的应用场景(解决边距重叠问题、用于自适应两栏布局、清除浮动、解决高度塌陷等)