css盒模型

標籤：box   style   改變   標準   沒有   contexts   模型   css布局   image   

css盒子模型是為了讓我們充分理解div+css模型的定位功能，盒子模型在學習div+css布局方式中必須要學習的一個模型。

那什麼是css盒模型呢？

　　網頁設計中常聽到的屬性名稱：內容(content)、填充(padding)、邊框(border)、邊界(margin)。css盒模型都具備這些屬性。這些屬性和日常生活中盒子的屬性是一樣的。內容就是盒子裡面裝的東西，而填充就是像盒子裡裝的一些反震的材料，邊框就是箱子的本身，邊界呢就像盒子之間的空隙。

盒子的模型有2種，分別是IE盒子模型和標準盒子模型。

IE盒子模型

　　

 

標準盒子模型

 

css如何設定這兩種模型

 

瀏覽器預設的方式是content-box(標準模型 )，通過改變樣式box-sizing來切換content-box(標準模型)和border-sizing(IE模型)

js如何設定擷取盒模型對應的寬和高

有4種方式

第一種：

　　dom.style.width/height

　　缺點:只能擷取內聯樣式中的style值。

第二種：

　　dom.currentStyle.width/height

　　缺點：只能擷取IE瀏覽器下的值。相容性不好

第三種：

　　window.getComputerStyle(dom).width/height

　　缺點：只能用來擷取不能用來設定改變值

第四種：

　　dom.getBoundingClientRect().width/height

　　優點：能夠用dom.getBoundingClientRect()擷取一個矩形對象，其中包括top,left,right,bottom4個屬性，以及返回的注意（IE盒子模型的寬高）。

說到盒模型這裡不得不再提到盒模型的邊距重疊。什麼是盒模型的邊距重疊呢？

先看個例子

        .content{           background: red;        }        .child{            background:#007aff;            height: 100px;            margin-top: 20px;        }

，父級元素的顏色沒有顯示出來，顯示的高度是100。重點來了現在給父級元素加上一個屬性overflow:hidden。

，content的高度變成120了，這就是邊距重疊。可以理解成加了一個overflow屬性相當於加了一個BFC,具體可以參考http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html。

 

css盒模型