标准盒子和怪异盒子

标准盒模型-----怪异盒模型

说到这我们要先来说一下什么是盒子模型：
所谓的盒模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是盛装内容的容器。每个容器都是由内容（content）、内边距（padding）、外边距（margin）和边框（border）组成

盒子模型分为两种模型

标准盒模型(是W3c标准的盒子模型)

标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)

---

怪异盒模型(IE标准的盒子模型)

一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）enter)

怪异盒模型 : 当我们设置元素的宽度超过页面的宽度时用怪异盒模型-border-box 元素的宽度就会一直在页面里面 不会超出

---

如何触发两种盒子

如果是定义了完整的doctype（文档类型)的标准文档类型，无论是哪种模型情况，最终都会触发标准模式，如果doctype（文档类型)协议缺失，会由浏览器自己界定，在IE浏览器中IE9以下（IE6.IE7.IE8）的版本触发怪异模式，其他浏览器中会默认为标准模

---

标准和怪异模型的转换

box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

---

JS怎么获取和设置box的宽高

IE： dom.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height