Web前端基礎知識

前端初學者，小白白一枚，請多指教。

說說我對盒子模型的理解：一個元素相當於一個盒子一樣由幾部分組成：內容，內邊距，邊框，外邊距。

它分為兩種盒子：

1. 標準盒子模型：css為：box-sizing:content-box;說明：在內容的設定的寬高外繪製的內邊距和邊框；

2. IE盒子模型：css為：box-sizing:border-box;說明盒子繪製的內邊距和邊框在設定的寬高以內。
   

簡而言之就是：標準模型：寬高為：內邊距+邊框+設定的height/width；

                       IE模型：寬高為：設定的height/width；

說到這裡既然要獲取元素的寬高，就說說獲取它的方式有哪些（都是基於原生js的）：

再說說BOM是瀏覽器對象模型，DOM是文檔對象模型。

（將dom當做元素）

1. dom.style.height/width:這種只能獲取內聯的寬高，在css中設置的屬性是不能獲取到的，獲取到的也是空值。

2. dom.currentStyle.height/width:只支持ie瀏覽器

  3.window.getComputedStyle(dom).height/width:通用性較好

  4.dom.offsetHeight/offsetWidth:兼容性最好。通常都是使用它來獲取元素的寬高。

  5.dom.scrollHeight/scrollWidth:若是有滾動條，也會獲取到被隱藏的那部分的高度，而不是視圖高度。（在出現滾動條或者省略號要計算總長度的時候使用）