在網頁設計中，我們經常會用各種塊內元素或者行內元素來搭建整個頁面，更準確的說，傳統的網頁就是乙個乙個的塊堆疊起來的，我們可以把這些塊狀結構抽象成為乙個又乙個的盒子，盒子有內容(content)、填充(padding)、邊框(border)、邊界(margin)這些屬性，而用css來控制這些屬性來布局頁面是在日常開發網頁中最常用的一中方式，我們稱之為css盒子模型。但css盒子模型有分為標準盒子模型和ie盒子模型。
標準盒子模型
如上圖所示，標準 w3c 盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包含其他部分。
ie盒子模型
從上圖可以看到 ie 盒子模型的範圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。
一般我們在開發的時候會選擇標準 w3c 盒子模型，怎麼樣選擇「標準 w3c 盒子模型」呢？就是在網頁的頂部加上 doctype 宣告。如果不加 doctype 宣告，那麼各個瀏覽器會根據自己的行為去理解網頁，即 ie 瀏覽器會採用 ie 盒子模型去解釋你的盒子，而 chrome 採用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。相反，如果加上了 doctype 宣告，那麼所有瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
外邊距 （margin）
margin用於控制塊與塊之間的距離。簡單來說就是這個元素塊的外邊框和其他元素塊外邊框之間的距離。
div
表示該div距離上下左右的其他元素各50px。
內邊距（padding）
padding 又稱為內邊距，用於控制內容與邊框之間的距離。
當乙個盒子設定了背景影象後，預設情況下背景影象覆蓋的範圍是padding和內容組成的範圍，並以padding的左上角為基準點平鋪背景影象。
邊框（border）
border一般用於分隔不同元素，border的外圍即為元素的最外圍，因此計算元素實際的寬和高時，就要將border納入。
border有 color（顏色）、width（粗細）和style（樣式）等屬性。在使用css設定邊框的時候，可以分別使用 border-color、border-width、border-style設定它們，實現想要的樣式或解決**邊框衝突的問題等
內容（content）
content內容就是你要填充的資訊，一般為頁面上要顯示的內容，比如文字，等。
下面是以標準盒子模型的示例**：
html效果圖如下：>
class=
"box"
>
hello world
以上是我對css盒子模型的一些理解，可能不是很完善，後續我會繼續努力完善。
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css 盒子模型 ie盒子模型
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...