CSS盒模型以及與之相關的知識點

CSS盒模型以及與之相關的知識點

盒模型分爲哪幾種

- 標準盒模型
- IE盒模型

二者區別在於 width 和 height 計算方式上的不一樣:

標準盒模型

width = content width;

IE核模型

width = content width + padding + border

CSS 如何來設置這兩種模型

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

用實例來驗證下:

<div class="box">
    </div>

.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模型;

從上面能夠看出來, 模型不同其計算方式也不同.

在JS中如何來獲取盒模型對應的高寬

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

• document.style
• document.currentStyle
• window.getConputedStyle(Element)
• Element.getBoundingClientRect

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

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

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

<div></div>

    /* 內聯樣式 */
    <div style="color: #ccc;"></div>

    /* 行內樣式 */
    <style>
        div {color: #ccc;}
    </style>

    /* 外部樣式表 a.css */ 
    <link href="a.css" rel="stylesheet"/>

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

document.style

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中,是有給元素指定width\height, 卻沒有獲取到; 也就是它只包含經過 style屬性(attibute)上聲明的CSS樣式.

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

<div class="box"
     style="color: #ccc;
        width: 100px;
        height: 100px;
        padding: 10px;
        margin: 10px;
        border: 5px solid #ccc;
        background-color: #ccc;
        box-sizing: content-box;"
></div>

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

從兩種模式來看, 獲取到的 width 都是同樣, document.style 表示就是 style 中 width; 並不表明渲染後的盒子大小.

優勢

- 兼容性好

缺點

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

document.currentStyle.width

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

<style>
   .box {
       width: 100px;
       height: 100px;
       padding: 10px;
       margin: 10px;
       border: 5px solid #ccc;
       background-color: #ccc;
   }
</style>
<div class="box">
</div>

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

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

window.getComputedStyle

獲取應用於當前元素的計算後的CSS樣式。能夠是動畫應用的當前值，也能夠是樣式表設置的值。

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

先來看看具體實例:

<style>
.box {
   width: 100px;
   height: 100px;
   padding: 10px;
   margin: 10px;
   border: 5px solid #ccc;
   background-color: #ccc;
}
</style>
<div class="box"></div>

or

<div class="box" style="
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    border: 5px solid #ccc;
    background-color: #ccc;">
</div>

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瀏覽器.

element.getBoundingClientRect()

概述

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

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

語法

rectObject = object.getBoundingClientRect();

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

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

<style>
.box {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    border: 5px solid #ccc;
    background-color: #ccc;
}
</style>
<div class="box"></div>

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; width= content width + padding + border; 不然就爲: content width) 
height: 表示元素的 height(若是box-sizing: border-box; height= content height+ padding + border; 不然就爲: content height) 
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

Chrome	Firfox	IE	Opera	Safari
Yes	No	No	No	No

window.pageYOffset 與 window.pageXOffset

Chrome	Firfox	IE	Opera	Safari
Yes	Yes	IE9+	Yes	Yes

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;關於渲染模式相關能夠自行查閱其它的資料.