什么是盒模型

引用MDN官方的解釋：

當(dāng)對(duì)一個(gè)文檔進(jìn)行布局（lay out）的時(shí)候，瀏覽器的渲染引擎會(huì)根據(jù)標(biāo)準(zhǔn)之一的 CSS 基礎(chǔ)框盒模型（CSS basic box model），將所有元素表示為一個(gè)個(gè)矩形的盒子（box）。CSS 決定這些盒子的大小、位置以及屬性（例如顏色、背景、邊框尺寸…）。 每個(gè)盒子由四個(gè)部分（或稱區(qū)域）組成，其效用由它們各自的邊界（Edge）所定義（原文：defined by their respective edges，可能意指容納、包含、限制等）。如圖，與盒子的四個(gè)組成區(qū)域相對(duì)應(yīng)，每個(gè)盒子有四個(gè)邊界：內(nèi)容邊界 Content edge、內(nèi)邊距邊界 Padding Edge、邊框邊界 Border Edge、外邊框邊界 Margin Edge。

文字看起來有些蒼白，我們舉例說明（Talk is cheap，show me code）

定義一個(gè)樣式：

.

應(yīng)用樣式

<

那么他的盒子模型是這樣的（chrome瀏覽器）：

這張圖可以清晰的反應(yīng)出來元素的內(nèi)容尺寸、邊框大小、內(nèi)邊距大小和外邊距大小。這樣就是理想的展現(xiàn)方式，也是符合我們的理解邏輯的：

盒模型 = 內(nèi)容尺寸 + 內(nèi)邊距 + 邊框尺寸 + 外邊距（內(nèi)邊距、邊框、外邊距各個(gè)方向上需要計(jì)算2倍）

一切都是這么完美。但是，IE來了...

IE的特殊盒子模型

我們以同樣的樣式和元素來作為例子，在ie瀏覽器中的盒子模型則有很大的不同

我們?cè)跇邮街卸x的尺寸很明顯：width:100px;height:100px; 但是這里的內(nèi)容尺寸則為122 x 122；這個(gè)數(shù)字剛好是 內(nèi)邊距(10*2) + 邊框(1*2) 的和，所以IE的內(nèi)容邊界包括了內(nèi)邊距和邊框。所以在IE中：

盒模型 = 內(nèi)容（內(nèi)容邊界+內(nèi)邊距*2+邊框*2）+ 外邊距

總結(jié)

以上是生活随笔為你收集整理的css盒子模型_说说css盒子模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。