- 標準盒模型
- IE盒模型

兩者區別在于 width 和 height 計算方式上的不同:

標準盒模型

width = content width;

IE核模型

width = content width + padding + border

 box-sizing: border-box
 box-sizing: content-box

用實例來驗證下:

    .box {
        width: 100px;
        height: 100px;
        padding: 10px;
        margin: 10px;
        border: 5px solid #ccc;
        background-color: #ccc;
    }

藍色 - 區域表示為 content 部分
紫色 - 區域表示為 padding 部分
灰色 - 區域表示為 border  部分
米色 - 區域表示為 margin  部分

細心讀者可以看到,從上圖來看不設置 box-sizing 情況下, 默認值 content-box, 也就是表示為標準盒模型.

那么我們來看看當給div設置為 box-sizing: border-box 針對前面的代碼示例,我們只添加如下一行代碼,看看最終渲染后盒模型是什么樣的?

.box {
    box-sizing: border-box;
}

根據前面說的,IE盒模型(border-box)計算方式為 width = content-widht + padding + border, 驗證下我們說的是否正確

width = 70 + 10 + 10 + 5 + 5

也就是說可以通過 box-sizing: border-box 表示為IE模型;

從上面可以看出來, 模型不一樣其計算方式也不一樣.

先羅列下常用的幾種方式,再分別講解下優缺點

document.style

document.currentStyle

window.getConputedStyle(Element)

Element.getBoundingClientRect

在講解 document.style 之前我們先來說說設置CSS樣式的幾種方式:

- 內聯樣式
- 行內樣式
- 外部樣式表

這三種具體代碼表述一次如下:

    


    /* 內聯樣式 */
    


    /* 行內樣式 */
    

    /* 外部樣式表 a.css */ 
    

同樣權重下, 優先級為內聯樣式 > 行內樣式 > 外部樣式.

HTMLElement.style 屬性返回一個 CSSStyleDeclaration 對象，表示元素的 內聯style 屬性（attribute），但忽略任何樣式表應用的屬性。

直白的說,就是通過行內樣式、外部樣式表的方式給某個元素設置樣式, 通過 document.style 是獲取不到的.

注意 : document.style 返回對象是只讀, 不能直接通過 document.style = "color: #ccc" 方式直接給其設置樣式, 否則設置是不會生效. 一般推薦方式如下:

    var ele = document.querySelector(".box");
    // 單個屬性設置
    ele.style.color = "#ccc";

    // 單個語句設置多個樣式
    ele.setAttibute("style", "color: #ccc; border:1px solid red;");
    // or
    ele.style.cssText = "color: #ccc; border:1px solid red;"

回到第一個實例,嘗試著通過 document.style 來獲取一下元素的寬度.

    var ele = document.querySelector(".box");
    ele.style.width // ""

根據前面的行內CSS中,是有給元素指定widthheight, 卻沒有獲取到; 也就是它只包含通過 style屬性(attibute)上聲明的CSS樣式.

通過style屬性的方式來給元素添加屬性:

    var ele = document.querySelector(".box");
    ele.style.width // "100px"

從兩種模式來看, 獲取到的 width 都是一樣, document.style 表示就是 style 中 width; 并不代表渲染后的盒子大小.

優點

- 兼容性好

缺點

- 只能獲取通過 style 屬性設置的樣式.

彌補document.style的缺點, 可以獲取到行內、內聯、外部樣式表的設置樣式.

    var ele = document.querySelector(".box");
    el.currentStyle.width // "100px"

缺點: 非標準屬性, 只有在IE中使用;

獲取應用于當前元素的計算后的CSS樣式?？梢允莿赢嫅玫漠斍爸?，也可以是樣式表設置的值。

從API描述來看,既然是獲取計算后的,那么肯定可包含行內樣式、內聯樣式、外部樣式.

先來看看具體實例:

or

    var ele = document.querySelector(".box");
    var getComputedStyle = window.getComputedStyle(ele); 
    getComputedStyle.width // "100px"

優點:

- 獲取所有應用在元素上的樣式.

- 現在瀏覽器都支持 IE9+, Frifox, Chrome, Safire, Opera, Edge 等 更多兼容可以查看 [Can I Use](https://caniuse.com/#search=getComputedStyle)  

缺點：

- 不支持低版本IE瀏覽器.

概述

Method to get the size and position of an element"s bounding box, relative to the viewport

方法獲取相對于視口的元素大小和位置信息.

語法

rectObject = object.getBoundingClientRect();

返回值為 DOMRect 對象, 這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關的 CSS 邊框集合 。

針對前面的例子,使用下 getBoundingClientRect, 如下:

var ele = document.querySelector(".box");
ele.getBoundingClientRect(); // DOMRect { x: 18, y: 10, width: 100, height: 100, top: 10, right: 118, bottom: 110, left: 18 }

x:      表示左側距離視口左邊距離
y:      表示距離視口頂部距離
width:  表示元素的 width (如果box-sizing: border-box; content width; 否則就為:  content width + padding + border ) 
height: 表示元素的 height(如果box-sizing: border-box; content height 否則就為: content height + padding + border) 
top:    盒子頂部(邊框)到視口頂部的距離
left:   盒子左側到視口左側的距離
bottom: 盒子底部到視口頂部的距離
right:  盒子右邊到視口左側的距離

優點

相比其它的, 獲取值更加精準

缺點

在IE9中不支持X、Y屬性, 在IE8以及以下低版本中不兼容.

注意：

當計算邊界矩形時, 會考慮視口區域（或其他可滾動元素）內的滾動操作, 也就是說當發生滾動時, 其相應的值會跟著變化. top、left等都會發生變化. 因此,它們的值相對于可視區域的,而并不是絕對的.

通過圖來理解下上面這句話:

左側 為滾動前, 右側 為滾動后; 明顯看出同一個元素在不同情況下獲取的Top、Left不一樣;

如果想獲取元素相對于網頁左上角定位的屬性值,那么只要在 top、left 基礎上加上滾動的值(window.scrollY 、 window.scrillX).
由于 window.scrollY 、 window.scrollX 在火狐、IE上不支持. 考慮兼容處理,可以使用window.pageYOffset 、 window.pageXOffset進行替換.

兼容列表如下:

window.scrollY 與 window.scrollX

window.pageYOffset 與 window.pageXOffset

IE8以下版本, scollY 與 pageYOffset 都不支持, 必須使用其他的非標準屬性來獲取. 如下:

// 不支持,則 pageXOffset 屬性不存在的
var supportPageOffset = window.pageXOffset !== undefined;
// 標準模式
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;

var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

解釋下 document.compatMode 屬性, 表示當前渲染模式是什么

``CSS1Compat`` 表示為標準模式;
``BockCompat`` 表示為混雜模式.

由于這兩種模式,不一樣在IE中不一樣; IE6以及以下的版本中不支持 document.documentElement.scrollTop;
關于渲染模式相關可以自行查閱其它的資料.