这是我参与更文挑战的第26天，活动详情查看： 更文挑战
什么是盒子模型。
你接过快递吗？大概是接过的，那你肯定也拆过快递的吧（废话），有时候店家是会给你的小宝贝装点泡沫或者空气包之类的，让你的小宝贝避免左右碰撞的。
那么css的盒子概念理解就容易多了。因为css的盒子和我们的快递包装太像太像了。
百度down来的图，嘻嘻嘻
css的盒子模型示例图
仔细的看看，先无视绿色部分，那个最后再说。
蓝色的部分可以视作盒子（border属性）的部分，盒子有厚有薄，甚至可能没有盒子（惊不惊喜）；
黄色的部分就是快递的泡沫部分（padding），你的宝贝小，但是盒子大，所以padding就会很大；
而content就是我们的小宝贝了，有宽有高，又胖又瘦。
盒子模型的宽高。
在说盒子模型的宽高之前，需要清楚一个概念。
虽然盒子模型和快递盒子很像，但其实我觉得和老梗IE的盒子更像啊。
IE的盒子模型也是这些值，但是他的内容宽高是包含了padding和border部分的;
也就是说，无论填充了多少东西防止碰撞，宝贝体积多大，盒子的大小是不变的。
那么这个时候，IE的盒子宽高就是包含了边框厚度、padding内边距填充厚度、以及内容本身的宽高。
另外，这里列举一些常用的盒子获取宽高的方法。
let dom = document.getElementByID('ele')
// 只能获取内联元素的宽高
dom.style.width/height
// 获取即时运行的宽高，值准确，但只支持IE
dom.currentStyle.width/height
// 获取即时运行的宽高，值是准确的
window.getComputeStyle(dom).width/height
// 获取即时运行的宽高，但默认返回left, top, width, height值
dom.getBoundingClientRect().width/height
结尾
HTML+CSS也好，js也罢，其实有不少概念，这些概念其实挺简单的，只是很多时候被妖魔化了，换个角度去看， 其实也就是一些基本规则而已。
好好学习，天天看月亮。
