一、基本概念
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版,盒模型的组成:content padding border margin
二、盒模型的分类
盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型
标准和模型中计算高度和宽度时只计算content的宽度和高度;而IE盒模型的宽度和高度是将border和padding也计算在内的。
如果用w3c盒子模型解释,那么这个盒子模型占用的
Width = width + padding-left + padding-right + border-left + border-right
Height = height + padding-top + padding-bottom + border-top + border-bottom
用ie的盒子模型解释 :

布局所占宽度Width:

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

三、CSS如何设置两种盒模型
box-szing:content-box;   默认方式,标准盒模型
box-sizing:border-box;   IE盒模型
四、JS如何获取盒模型的宽度和高度
var sec = document.getElementById("sec")
sec.style.width/height   //只能获取内联样式设置的宽度和高度
sec.currentStyle.width/height   //仅IE支持  
sec.getBoundingClientRect().width/height
window.getComputedStyle(sec).width/height