盒模型

标准模型 和IE模型

首先基本的盒模型：

content,padding,border,margin=》盒子内容，内填充，边框，外边距

盒模型是有两种标准的，一个是标准模型，一个是IE模型。

       

从上图可以看出标准盒模型的width和height是只有content的，而ie盒模型的w和h是包含了content和padding还有border的。

从上面的特性我们不难推断出：

1.标准盒模型增大宽高，会把整个盒子撑大。

2.ie盒模型，如果content的内容变多，那么会压缩padding。

3.设置为ie盒模型，可以有效隔绝因为盒子的内容变大，撑开盒子，而影响到其他盒子。

 

css如何设置两种模型

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

直接从盒模型中的宽高控制范围来理解这两个css属性。

content-box=》宽高只能控制到content，所以content-box意思就是标准盒模型

border-box=》宽高能控制到border、content、padding，所以border-box是ie盒模型

 

JS获取宽高

通过JS获取盒模型对应的宽和高，有以下几种方法：

为了方便书写，以下用dom来表示获取的HTML的节点。

1.  dom.style.width/height 

　　这种方式只能取到dom元素内联样式所设置的宽高。

       如果该节点的样式是在style标签中或外联的CSS文件中设置的话，是获取不到dom的宽高的。

 

 2. dom.currentStyle.width/height 

　　这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。

　　但这种方式只有IE浏览器支持。

 

 3.dom.offsetWidth/offsetHeight

　　这个就没什么好说的了，最常用的，也是兼容最好的。