# 盒模型

# 盒模型的基本概念

• content， padding，border，margin
• 标准盒模型
  • width=content的宽度，增加内边距/边框/外边距会增加盒子总大小，不会影响内容区域的大小
• IE盒模型
  • width=content的宽度+padding+border

# 如何设置盒模型

• 标准盒模型：box-sizing: content-box
• IE盒模型：box-sizing: border-box

# 如何设置、获取盒模型的宽和高

1. DOM节点的style样式获取
   • el.style.width （只能获取行内样式，不能获取内嵌样式和外链样式）
2. 通用型
   • window.getComputedStyle(ele).width
3. 获取元素的绝对位置（绝对位置是viewport左上角的绝对位置）
   • el.getBoundingClientRect().width
4. IE独有，获取运行结束之后的宽高
   • el.currentStyle.width

# 根据盒模型解释边距重叠

• margin塌陷/重叠 (margin描述的是兄弟和兄弟之间的距离，最好不要用来描述父子)
  • 父元素中的子元素上边距10px，父元素(高度100px)并没有包裹子元素(高度100px)
  • 增加overflow: hidden;父元素(高度110px)
• 解决方法： BFC