css 盒模型

1. 概念

   CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
   CSS盒模型：标准模型 + IE模型（默认情况下未标准盒子模型）

2. 标准模型和IE模型的区别

计算宽度和高度的不同
标准盒模型：盒子总宽度/高度 =width/height + padding + border + margin。（ 即 width/height 只是 内容高度，不包含 padding 和 border 值 ）
IE盒子模型：盒子总宽度/高度 =width/height + margin = (内容区宽度/高度 + padding + border) + margin。（ 即 width/height 包含了 padding 和 border 值 ）

1. CSS如何设置这两种模型

   标准：box-sizing: content-box;( 浏览器默认设置 )
   IE：box-sizing: border-box;

2. JS如何获取盒模型对应的宽和高

   （1）dom.style.width/height只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到。
   （2）dom.currentStyle.width/height（只有IE兼容）取到的是最终渲染后的宽和高
   （3）window.getComputedStyle(dom).width/height同（2）但是多浏览器支持，IE9 以上支持。
   （4）dom.getBoundingClientRect().width/height也是得到渲染后的宽和高，大多浏览器支持。IE9 以上支持，除此外还可以取到相对于视窗的上下左右的距离。
   （6）dom.offsetWidth/offsetHeight包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。