DOM盒模型

djfml 發布于2019-08-23 14:52 / 1739人閱讀

摘要：中的盒模型傳統盒模型在傳統盒子模型中我們說的寬度和高度是指該塊元素內容的寬度和高度。在這個基礎上我們在修改或者塊元素的寬度講不會發生變化。

CSS中的盒模型

傳統盒模型
在傳統盒子模型中我們說的寬度和高度是指該塊元素內容的寬度和高度。
而一個塊元素的寬度是

    width === width+padding(left/right)+border(left/right);

相應的一個塊元素的高度是

height === height+padding(top/bottom)+border(top/bottom);

CSS3中的盒模型
在css3中新增加了盒子模型
.box{

   border-sizing: border-box;

}
此時塊元素的的width和height僅僅是這個塊元素的寬度和高度。它包含了這個塊元素的padding和border。在這個基礎上我們在修改padding或者border塊元素的寬度講不會發生變化。改變的是內容的寬高。

JS中的盒模型

JS中也提供了一些屬性和方法用來描述當前元素的樣式,主要有以下幾種：
備注：通過JS盒子模型屬性獲取的結果是不帶單位的。而且只能是整數（它會自動四舍五入，進行計算）

clientWidth/clientHeight
clientWidth/clientHeight：當前盒子可視區域的寬度和高度
可視區域是指：內容的寬高+padding

clientWidth = width + padding(left + right);
clientHeight = height + padding(top + bottom);

可視區域和內容是否溢出以及我們是否設置了overflow：hidden沒有關系
在我們的項目中，我經常這樣使用這兩個屬性

//獲取當前頁面一屏幕的寬度
W = document.documentElement.clientWidth||document.body.clientWidth;
//獲取當前頁面一屏幕的高度
H = document.documentElement.clientHeight||document.body.clientHeight;

利用這個就可以實現讓一個盒子水平和垂直居中。
即實現相對定位，計算出來left和top就可以實現

//width和height是盒子的寬高
left = (W-width)/2;
top = (H-height)/2;

clientLeft/clientTop

clientLeft:盒子左邊框的寬度。
clientTop:盒子上邊框的高度。
它倆獲取的結果其實就是border-width。
JS中只有clientLeft和clientTop，沒有clientRight和clientBottom這兩個屬性。

offsetWidth/offsetHeight

offsetWidth/offsetHeight就是在clientWidth和clientHeight的基礎上加上盒子的邊框。
即：

offsetWidth === clientWidth + border(left/right);
offsetHeight === clientHeight + border(top/bottom)

和內容是否溢出沒有關系。
在我們的項目中，如果想獲取一個盒子的寬度和高度，我們一般用offsetWidth（而不是clientWidth）和offsetHeight，因為border也算是當前盒子的一部分。

scrollWwidth/scrollHeight

1) 沒有內容溢出情況下：

   獲取的結果和clientWidth/clientHeight是一樣的

2) 有內容溢出的情況下:

 真實內容的寬度和高度（包含溢出的內容），在加上左邊的padding 和上邊的padding 值。

    //有橫向滾動條時，獲取當前頁面的真實寬度
    document.documentElement.scrollWidth||document.body.scrollWidth;
    //有縱向滾動條時，獲取當前頁面的真實高度
    document.documentElement.scrollHeight||document.body.scrollHeight;

window.getComputedStyle/currentStyle

在JS中獲取元素具體的樣式值：例如獲取某個元素的paddingLeft值。
方法一：
currentElement.style.XXX
例如：

box.style.paddingLeft

注意這個方法是獲取當前元素的行內樣式。只能獲取當前元素的行內樣式，內嵌或者外聯樣式是不能獲取的。

方法二：
通過 window.getComputedStyle/currentStyle可以獲取所有經過瀏覽器計算過的樣式。

或者當前元素的paddingLeft值，使用例子：

window.getComputedStyle(box, null).paddingLeft
//或者下面這個方法，box是當前元素，第二個參數是當前元素的偽類，一般為
window.getComputedStyle(box, null)["paddingLeft"]

window.getComputedStyle在IE6~8中不兼容。不兼容的原因是因為在IE6~8下，window對象沒有getComputedStyle屬性發放導致的。所以在IE6~8中我們使用currentStyle屬性。備注currentStyle只有IE中才有，其他瀏覽器中都沒有這個屬性。使用方法例子：

box.currentStyle["paddingLeft"];
//或者
box.currentStyle.paddingLeft

GPU云服務器云服務器盒模型盒模型html嗎簡述html盒模型盒遙控

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101281.html

【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

摘要：提供了糟糕的支持，而雖然接近標準，但依舊未能完全正確的支持標準。盡管修復了許多的問題，但是依然延續實現中的其它故障主要是盒模型問題。因此大部分的聲明將觸發嚴格模式即依據標準的規則渲染網頁。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點主要參考自第一篇文章，然而筆者在讀的時...

binta 2019-08-29 16:13 評論0 收藏0
CSS盒模型的介紹

摘要：盒模型的概念與分類盒模型就是一個盒子，封裝周圍的元素，它包括內容邊框內邊距外邊距。水平方向邊界不會重疊，垂直方向會重疊，垂直方向的實際邊界是邊界中的最大值。CSS盒模型的概念與分類 ? ? ?CSS盒模型就是一個盒子，封裝周圍的HTML元素，它包括內容content、邊框border、內邊距padding、外邊距margin。 ? ?? ?CSS盒模型分為標準模型和IE模型； ? 標準模型和...

didikee 2019-04-23 13:08 評論0 收藏0
css盒模型

摘要：一什么是盒模型說到盒模型大家肯定都能想到但是盒模型分為兩種標準盒模型模型，他們最主要的區別在于寬高的計算。一：什么是盒模型說到盒模型大家肯定都能想到content,padding,border,margin但是盒模型分為兩種：標準盒模型 IE模型，他們最主要的區別在于寬高的計算。1.標準盒模型的寬高不包含padding和border2.IE模型的寬高是padding和border的...

cod7ce 2019-08-30 15:55 評論0 收藏0
CSS 盒模型

摘要：盒模型盒模型基本概念標準模型模型標準模型和模型的區別標準模型模型二者區別，前者的寬度是內容寬度，后者的寬度是內容內邊距如何設置這兩種模型標準模型模型如何設置獲取盒模型對應的寬和高僅兼容兼容性好用于獲得頁面中某個元素的左， CSS 盒模型 CSS CSS 盒模型基本概念：標準模型 + IE模型標準模型和IE模型的區別標準模型 showImg(https://segmentf...

wizChen 2019-08-30 14:06 評論0 收藏0