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的值