什么是盒模型

引用MDN官方的解釋：

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

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

定義一個樣式：

.

應用樣式

<

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

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

盒模型 = 內容尺寸 + 內邊距 + 邊框尺寸 + 外邊距（內邊距、邊框、外邊距各個方向上需要計算2倍）

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

IE的特殊盒子模型

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

我們在樣式中定義的尺寸很明顯：width:100px;height:100px; 但是這里的內容尺寸則為122 x 122；這個數字剛好是 內邊距(10*2) + 邊框(1*2) 的和，所以IE的內容邊界包括了內邊距和邊框。所以在IE中：

盒模型 = 內容（內容邊界+內邊距*2+邊框*2）+ 外邊距

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。