CSS Box Model 盒子模型

標籤：圖片   .com   div   表示   alt   分享   fse   eth   app   

1.概述1.1前言

css盒子模型具備的屬性：內容(content)、填充(padding)、邊框(border)、邊界(margin)；而日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以用盒子模式來理解。

生活中的盒子說明：

內容(content)：盒子裡裝的東西。

填充(padding)：怕盒子裡裝的東西(貴重的)損壞而添加的泡沫或者其他抗震的輔料。

邊框(border)：盒子本身。

邊界(margin)：盒子擺放的時候不能全部堆在一起，留一些空隙保持通風，同時也為了方便取出。

網頁中的盒子說明：

內容(content)：文字、圖片等元素(一張圖片裡不能放東西，它自己就是自己的內容，故不是盒子)，也可以是小盒子(div嵌套)。

填充(padding)：像素填充，可有可無。

邊框(border)：像素展示，可有可無。

邊界(margin)：像素填充，可有可無。

兩種盒子的差異：生活中的盒子中東西一般不能大於盒子，否則盒子會被撐壞。而css盒子具有彈性，裡邊的東西大過盒子本身最多把它撐大，但它不會損壞。

1.2 組成結構

 以Chrome瀏覽器中盒子模型為例：

content：內容地區，文本、圖片出現的位置。CSS中的width、height屬性直接作用的地區。

padding：內邊距地區，存在於content 和 border 之間的地區。可使用CSS的屬性有padding-top、padding-right、padding-bottom、padding-left以及padding。

border：邊框地區，存在於padding 和 margin 之間的地區。在預設布局中border的寬度會設定為0，從而不顯示元素的邊框。

margin：外邊距地區，控制其他元素與當前元素的邊距距離。可使用CSS的屬性有margin-top、margin-right、margin-bottom、margin-left以及margin。

1.2.1 樣本

說明：樣式寬度和真實佔有寬度，不是同一內容。

2.盒子模型

標準盒子模型與IE盒子模型差異說明：

• 在CSS盒子模型(Box Model)規定了屬性為：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)
• 在CSS的標準盒子模型中，width和height指的是內容地區的寬度和高度。增加內邊距、邊框和外邊距不會影響內容地區的尺寸，但是會增加元素框的總尺寸。IE盒子模型中，width和height指的是內容地區+邊框(左右或上下之和)+內邊距(左右或上下之和)的寬度和高度。 

2.1 標準盒子模型

2.2 IE盒子模型

 

2.3 盒子說明【標準盒子模型】

內容：width、height

盒子範例(真實佔有寬高都為：302*302)：

.box1{        width: 100px;        height: 100px;        padding: 100px;        border: 1px solid red;   }/*盒子真實佔有寬度 = 左border + 左padding + width + 右padding + 右border  盒子真實佔有高度 = 上border + 上padding + height + 下padding + 下border*/.box2{        width: 250px;        height: 250px;        padding: 25px;        border: 1px solid red;    }

盒子模型：

             

總結：

如果想保持一個盒子的真實佔有高寬不變，那麼加width/height的時候，就要減相應的padding。加padding的時候就要減相應的width/height。因為盒子變胖是災難性的，會把別的盒子擠下去。

3.元素的寬與高

預設情況下，CSS中width、height屬性是指content(內容)地區的寬高。

在DOM中，擷取元素高寬有以下屬性：clientWidth/clientHeight、offsetWidth/offsetHeight、scrollWidth/scrollHeight。

3.1 clientWidth、clientHeight

說明：對象內容的可視區的寬度、高度；包含內邊距、內容地區的寬度、高度，不包捲軸等邊線。

公式：

element.clientWidth = padding-left + width + padding-rightelement.clientHeight = padding-top + height + padding-bottom

樣本：

3.2 offsetWidth、offsetHeight

說明：對象整體的實際寬度、高度；包含了邊框、內邊距、內容地區以及捲軸等範圍的寬度、高度；

公式：

element.offsetWidth = border-left + padding-left + width + padding-right + border-rightelement.offsetHeight = border-top + padding-top + height + padding-bottom + border-bottom

 樣本：

3.3 scrollWidth、scrollHeight

說明：與clientWidth、clientHeight類似(包含內邊距、內容地區，但不包括捲軸)，不同的是scrollWidth、scrollHeight與元素的overflow樣式屬性息息相關：

當區塊層級元素的內容超出元素大小時，其內容會根據overflow設定的值出現捲軸或內容溢出，scrollWidth、scrollHeight包含了這些不可見的內容地區。

樣本：

4. box-sizing

在預設情況下，CSS中的width和height屬性的值只會應用到元素的content(內容地區)，而box-sizing屬性可修改此預設範圍。

box-sizing的值有content-box(預設值)和border-box。

4.1 box-sizing:content-box

說明：表示CSS中的width和height屬性的值只會應用到元素的內容地區。

如設定一個元素的width為200px，那麼只是這個元素的內容地區寬度有200px。

4.2 box-sizing:border-box

說明：表示元素的邊框和內邊距的範圍包含在CSS中的width、height內。

如設定一個元素的width為200px，那麼此元素內容地區的寬度 = 200 - border - padding。

5. jQuery中元素寬度(高度)

jQuery提供了以下幾種擷取元素的寬度方法：

$(element).width()：擷取元素content(內容)地區的寬度。若元素的含有 box-sizing: border-box ，會減去相應的padding、boder。

$(element).innerWidth()：擷取元素 content地區 + padding 的寬度。

$(element).outerWidth()：擷取元素  content地區 + padding + boder 的寬度。

$(element).outerWidth(true)：擷取元素  content地區 + padding + boder + margin 的寬度。

樣本圖：

CSS Box Model 盒子模型