- 標(biāo)準(zhǔn)盒模型
- IE盒模型

兩者區(qū)別在于 width 和 height 計(jì)算方式上的不同:

標(biāo)準(zhǔn)盒模型

width = content width;

IE核模型

width = content width + padding + border

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

用實(shí)例來(lái)驗(yàn)證下:

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

藍(lán)色 - 區(qū)域表示為 content 部分
紫色 - 區(qū)域表示為 padding 部分
灰色 - 區(qū)域表示為 border  部分
米色 - 區(qū)域表示為 margin  部分

細(xì)心讀者可以看到,從上圖來(lái)看不設(shè)置 box-sizing 情況下, 默認(rèn)值 content-box, 也就是表示為標(biāo)準(zhǔn)盒模型.

那么我們來(lái)看看當(dāng)給div設(shè)置為 box-sizing: border-box 針對(duì)前面的代碼示例,我們只添加如下一行代碼,看看最終渲染后盒模型是什么樣的?

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

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

width = 70 + 10 + 10 + 5 + 5

也就是說(shuō)可以通過(guò) box-sizing: border-box 表示為IE模型;

從上面可以看出來(lái), 模型不一樣其計(jì)算方式也不一樣.

先羅列下常用的幾種方式,再分別講解下優(yōu)缺點(diǎn)

document.style

document.currentStyle

window.getConputedStyle(Element)

Element.getBoundingClientRect

在講解 document.style 之前我們先來(lái)說(shuō)說(shuō)設(shè)置CSS樣式的幾種方式:

- 內(nèi)聯(lián)樣式
- 行內(nèi)樣式
- 外部樣式表

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

    


    /* 內(nèi)聯(lián)樣式 */
    


    /* 行內(nèi)樣式 */
    

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

同樣權(quán)重下, 優(yōu)先級(jí)為內(nèi)聯(lián)樣式 > 行內(nèi)樣式 > 外部樣式.

HTMLElement.style 屬性返回一個(gè) CSSStyleDeclaration 對(duì)象，表示元素的 內(nèi)聯(lián)style 屬性（attribute），但忽略任何樣式表應(yīng)用的屬性。

直白的說(shuō),就是通過(guò)行內(nèi)樣式、外部樣式表的方式給某個(gè)元素設(shè)置樣式, 通過(guò) document.style 是獲取不到的.

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

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

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

回到第一個(gè)實(shí)例,嘗試著通過(guò) document.style 來(lái)獲取一下元素的寬度.

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

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

通過(guò)style屬性的方式來(lái)給元素添加屬性:

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

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

優(yōu)點(diǎn)

- 兼容性好

缺點(diǎn)

- 只能獲取通過(guò) style 屬性設(shè)置的樣式.

彌補(bǔ)document.style的缺點(diǎn), 可以獲取到行內(nèi)、內(nèi)聯(lián)、外部樣式表的設(shè)置樣式.

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

缺點(diǎn): 非標(biāo)準(zhǔn)屬性, 只有在IE中使用;

獲取應(yīng)用于當(dāng)前元素的計(jì)算后的CSS樣式。可以是動(dòng)畫(huà)應(yīng)用的當(dāng)前值，也可以是樣式表設(shè)置的值。

從API描述來(lái)看,既然是獲取計(jì)算后的,那么肯定可包含行內(nèi)樣式、內(nèi)聯(lián)樣式、外部樣式.

先來(lái)看看具體實(shí)例:

or

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

優(yōu)點(diǎn):

- 獲取所有應(yīng)用在元素上的樣式.

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

缺點(diǎn)：

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

概述

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

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

語(yǔ)法

rectObject = object.getBoundingClientRect();

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

針對(duì)前面的例子,使用下 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:      表示左側(cè)距離視口左邊距離
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:   盒子左側(cè)到視口左側(cè)的距離
bottom: 盒子底部到視口頂部的距離
right:  盒子右邊到視口左側(cè)的距離

優(yōu)點(diǎn)

相比其它的, 獲取值更加精準(zhǔn)

缺點(diǎn)

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

注意：

當(dāng)計(jì)算邊界矩形時(shí), 會(huì)考慮視口區(qū)域（或其他可滾動(dòng)元素）內(nèi)的滾動(dòng)操作, 也就是說(shuō)當(dāng)發(fā)生滾動(dòng)時(shí), 其相應(yīng)的值會(huì)跟著變化. top、left等都會(huì)發(fā)生變化. 因此,它們的值相對(duì)于可視區(qū)域的,而并不是絕對(duì)的.

通過(guò)圖來(lái)理解下上面這句話(huà):

左側(cè) 為滾動(dòng)前, 右側(cè) 為滾動(dòng)后; 明顯看出同一個(gè)元素在不同情況下獲取的Top、Left不一樣;

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

兼容列表如下:

window.scrollY 與 window.scrollX

window.pageYOffset 與 window.pageXOffset

IE8以下版本, scollY 與 pageYOffset 都不支持, 必須使用其他的非標(biāo)準(zhǔn)屬性來(lái)獲取. 如下:

// 不支持,則 pageXOffset 屬性不存在的
var supportPageOffset = window.pageXOffset !== undefined;
// 標(biāo)準(zhǔn)模式
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 屬性, 表示當(dāng)前渲染模式是什么

``CSS1Compat`` 表示為標(biāo)準(zhǔn)模式;
``BockCompat`` 表示為混雜模式.

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