指的是通過js
中提供的一系列的屬性和方法，獲取頁面中元素的樣式資訊值 例：
#box有很多自己的私有屬性：
htmldivelement.prototype->htmlelement.prototype->element.prototype->node.prototype->eventtarget.prototype->object.prototype
var box = document.getelementbyid("box");
console.dir(box);
我們設定的width/height
這兩個樣式就是內容的寬和高；
● 如果沒有設定height
值，容器的高度會根據裡面內容自適應，這樣獲取的值就是真實內容的高；
● 如果設定了固定的高度，不管內容是多還是少，其實我們內容的高度值的都是設定的那個值。
代指的是實際內容的寬高（和我們設定的height
沒有必然的聯絡
），如我設定高度為200,
如果內容有溢位，那麼真實內容的高度是要把溢位內容的高度也加進來的。
● 內容的寬/高+
左右/上下填充 （和內容是否溢位沒有關係）(即不包含border值)
● 如果設定了box-sizing:border-box;
則clientwidth/clientheight =
容器寬/
高- border
左/上邊框的寬度 （
border[left/top]width）
var outer = document.getelementbyid("outer"),
inner = document.getelementbyid("inner"),
center = document.getelementbyid("center");
/上下邊框 （和內容是否溢位沒有關係）(包含border)
當前元素的父級參照物，在同乙個平面中，最外層的元素是裡面所有元素的父級參照物（和html
層級結構沒有必然的聯絡）
● 一般來說乙個頁面中所有元素的父級參照物都是body
console.log(center.offsetparent); //body
console.log(inner.offsetparent); //body
console.log(outer.offsetparent); //body
console.log(document.body.offsetparent); //null
來進行改變:absolute,relative,fixed
中任意乙個值都可以把父級參照物進行修改
outer.style.position = "relative";
inner.style.position = "relative";
console.log(center.offsetparent); //inner
console.log(inner.offsetparent); //outer
console.log(outer.offsetparent); //body
console.log(center.offsetleft); //距離body左偏移距離
console.log(inner.offsetleft); //距離body左偏移距離
console.log(outer.offsetleft); //距離body左偏移距離
outer.style.position = "relative";
inner.style.position = "relative";
console.log(center.offsetleft); //距離inner左偏移距離
// 獲取的結果是乙個物件
// 在標準的ie8瀏覽器中，我們使用offsetleft/offsettop其實是把父級參照物的邊框已經算在內了，所以我們不需要自己再單獨的加邊框了
function offset(curele)
// 累加父級參照物的偏移
totalleft += par.offsetleft;
totaltop += par.offsettop;
par = par.offsetparent;
} return ;
}console.log(offset(center));
console.log(offset(center).left);
● 容器中內容沒有溢位的情況下：和我們的clientwidth/clientheight
一模一樣
● 如果容器中內容有溢位，獲取的結果如下規則：
scrollwidth：真實內容的寬度（包含溢位）+
左填充
scrollheight：真實內容的高度（包含溢位）+
上填充
獲取到的結果都是「約等於」的值，因為：
● 同乙個瀏覽器，我們是否設定overflow="hidden"
，對於最終的結果是有影響的（滾動條也佔據寬度會影響）；
● 在不同的瀏覽器中我們獲取到的結果也是不相同的
滾動條卷去的寬度/
高度
注意：
1.之前我們學習的js盒子模型中：client系列/offset系列/scrollwidth/scrollheight都是「唯讀」屬性->只能通過屬性獲取值，不能通過屬性修改元素的樣式
2.scrolltop/scrollleft：滾動條捲曲的高度/寬度(這兩個屬性是唯一「可讀寫」屬性)
scrolltop的值是存在邊界值（最大和最小值的），我們設定的值比最小值小或者比最大值大時都沒用，起到效果的依然是邊界的值。
[最小值是零]
box.scrolltop = -1000; //直接回到容器頂部，沒有超出
console.log(box.scrolltop);
[最大值=真實的高度-當前容器一螢幕的高度]
var maxtop = box.scrollheight - box.clientheight;
console.log(maxtop);
我們通過以上這些屬性值獲取的結果永遠不可能出現小數，都是整數；
瀏覽器獲取結果的時候，會在原來真實結果的基礎上進行四捨五入。
是當前瀏覽器可視視窗的寬/
高（一螢幕的寬/高）
是當前頁面的真實寬/
高（所有屏加起來的寬
/高），但是是乙個約等於的值
● 不管哪些屬性，也不管是什麼瀏覽器，也不管是獲取還是設定，想要都相容的話，需要寫兩套;
● 且必須document.documentelement在前
document.documentelement[attr] || document.body[attr];
如：
[獲取]
document.documentelement.clientheight || document.body.clientheight
[設定]
document.documentelement.scrolltop = 0;
document.body.scrolltop = 0;
win:編寫乙個有關於操作瀏覽器盒子模型的方法
如果只傳遞了attr
沒有傳遞
value
，預設的意思的「獲取」
如果兩個引數都傳遞了，意思是「設定」
不嚴謹的來說這就是有關於「類的過載」：同乙個方法，通過傳遞引數的不同實現了不同的功能
function win(attr,value)
document.documentelement[attr] = value;
document.body[attr] = value;
}win("clientheight");
var outer = document.getelementbyid("outer"),
inner = document.getelementbyid("inner"),
center = document.getelementbyid("center");
●center.parentnode ->inner
●inner.parentnode ->outer
●outer.parentnode ->body
●document.body.parentnode ->
..
●document.documentelement.parentnode ->#document:
..
●document.parentnode->nul js盒子模型
通過js中提供一系列的方法和屬性獲取頁面中元素的樣式資訊值 內容的寬高 是給元素定義的width height這兩個樣式。如果沒有設定height值，容器的高度會根據裡面內容自己適應，這樣獲取的值就是真實的內容的高 如果設定固定的高度，不管內容是多少，內容的高度指的都是設定的這個值 真實內容的寬高 ...
js盒子模型
js盒子模型是指通過js中一系列的屬性和方法獲取頁面中元素的樣式資訊值 1 client系列 clientwidth 設定的寬度 width 內邊距 padding 2 clientheight 設定的高度 height 內邊距 padding 2 clientleft 左邊框的寬度 border的...
JS盒子模型
clientwidth 盒子寬度 左右的padding clientheight 盒子高度 上下的padding clientleft 盒子左邊框的寬度 clienttop 盒子上邊框的寬度 offsetwidth clientwidth 左右border offsetheight clienthe...