1:css盒模型分类

标准盒模型，IE盒模型

2：标准盒模型与IE盒模型的区别

元素框的总宽度=width+（padding-left+padding-right）+（border-left+border-right）+（margin-left+margin-right）

width+padding+border+margin

注意：CSS样式中写的width=200px就是指图中的content的宽度，如何设置padding,border的宽会影响总宽度

元素框的总宽度=width（padding-left+padding-right+border-left+border-right）+margin-left+margin-right;

width+margin

注意：如何css中设置width=200px,这种模型的width包括content + padding +border，设置padding,border的值不会影响总宽度

3：CSS如何设置这两种模型

css通过box-sizing来设置盒模型

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，width的值就是content的值

padding-box，padding计算入width内  width=content + padding

border-box，border和padding计算入width之内，其实就是怪异模式了

4:JS如何获取盒模型对应的宽和高

1)dom.style.width/height

HTML代码

1 <p id=‘p‘ style=‘width:100px;‘>JS获取元素的宽高</p>

js执行代码

1 var p=document.getElementById(‘p‘).style.width;
2 console.log(p);   // 200px

但是这种方式只能取到内嵌的宽和高，对于通过style写的或者外部链接进来的就无法取到值

CSS代码

1 #p{
2     width:200px;
3     height: 200px;
4     background: red;
5         }

HTML代码

1 <p id=‘p‘>JS获取元素的宽高</p>

JS执行代码

1 console.log(document.getElementById(‘p‘).style.width); //无法取到值

PS：虽然这种方式取不到宽度值。但却可以设置元素的宽度值。比如：设置p元素宽度为200px:

1 document.getElementById("p1").style.width ="200px";

2) window.getComputedStyle(dom).width/height

那么，对于没有设置宽度的元素、亦或CSS样式非内嵌式的，js原生写法可以通过window.getComputedStyle(dom).width/height来获取宽度

接上面一个例子取不到值就可以通过

1 var p=document.getElementById(‘p‘);
2 var width=window.getComputedStyle(p).width;
3 console.log(width);  // 200px

 3)dom.getBoundingClientRect().width/height

1 var p=document.getElementById(‘p‘);
2 var width=p.getBoundingClientRect().width;
3 console.log(width);  // 200
4 // 注意这个方法一般是绝对定位中获取left,top,right,bottom的值

js的 style.width 取不到元素的宽度值

1.元素未设置宽度值。

2.元素设置了宽度值，但，设置在内联或外联样式表中，而非内嵌式的。比如
    
css代码

html代码

PS：虽然这种方式取不到宽度值。但却可以设置元素的宽度值。比如：设置p元素宽度为200px:

综上，所以，只有将元素的样式设置成内嵌式的，才可以通过 document.getElementById("id").style.width 来获取宽度值；
比如：

执行js代码

执行后输出结果为144px

那么，对于没有设置宽度的元素、亦或CSS样式非内嵌式的，js原生写法可以通过offsetWidht来获取宽度

即：document.getElementById("#p1").offsetWidth;

ps:对于设置了CSS样式的元素（内联、内嵌、外联）offsetWidth 也都可以获得值

所以，jquery的width()与js的offsetWidth都可以获取元素的宽度，但有个区别：

.width()的值单纯是内容区域的宽度、不包括内外补丁和border。ie6+和chrome相同。
offsetWidth ：包括了内补丁和border，不包括外补丁。ie6+和chrome相同

原文地址：https://www.cnblogs.com/xubj/p/9964782.html