雖然知道盒子模型，但讓我用語言解發布來，還不知道從何說起。今天就來好好的看看這個盒子模型。盒模型是作為前端頁面布局的乙個基礎也是很重要的乙個部分，因此了解它是最基本的。盒狀模型是css中重要的概念。雖然css中沒有盒狀模型這個屬性，但它卻是css中無處不在的，盒裝模型是由margin、border、padding和content幾個屬性組合形成的。說通俗一點就和我們日常生活中的箱子一樣，所以我們叫它為盒子模型。
每個盒子都有：邊界、邊框、填充、內容四個屬性；每個屬性都包括四個部分：上、右、下、左；這四部分可同時設定，也可分別設定；裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。
內容（content
）就是盒子裡裝的東西；
而填充(padding)
就是怕盒子裡裝的東西（貴重的）損壞而新增的泡沫或者其它抗震的輔料；填充只有寬度屬性，可以理解為生活中盒子每個
html
標記都可看作乙個盒子； 邊框
(border)
就是盒子本身了；至於邊界
(margin)
則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出。在網頁設計上，內容常指文字、等元素，但是也可以是小盒子（
div巢狀），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而
css盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。
padding
設定的是內容到邊框之間的距離，就像乙個緩衝帶。
border
設定內容的邊框線粗線和樣式等。
margin
設定的是一塊內容與另一塊內容之間的距離。
使用css
定義盒狀模型時，我們設定的寬度和高度，只是設定了內容（
content
）區塊的高度和寬度，而不是內容、內邊距、邊框和外邊距的總和。
如果給盒狀模型定義背景，定義後背景將在內容（
content
）區域和內邊距（
padding
）區域顯示，就是圖上的藍色區域，外邊框是無法設定背景的。
從盒狀模型的四個構成屬性看，乙個盒狀模型的尺寸應該把這四方面尺寸全部合起來計算：
盒狀模型寬度=左
margin寬度+
左border寬度+
左padding
寬度+content寬度+
右padding寬度+
右border寬度+
右margin
寬度高度的計算方法和寬度計算方法相同，只要把左、右改為上、下即可。
上面那個圖清楚的給我們畫出了盒模型。
border和content就不用細說，乙個是邊框，另乙個是具體內容。下面主要來看看，margin和padding.
1.
margin:
包括margin-top, margin-right, margin-bottom,margin-left,
控制塊級元素之間的距離
, 它們是透明不可見的
.**如下（
30是舉例的）：
margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;
上面的**我們可以簡寫成：margin:30px；
為便於記憶
, 我們可看下圖:
這個是根據上, 右
, 下, 左的順時針規則。如果要分別設定它的屬性我們這樣寫：
margin:30px 20px,
這樣就是上下為
30px,
左右為20px;
margin:10px20px 30px 40px
這樣就是分別設定上，右，下，左了;
margin:30px;
這樣就是
4個方向都是
30px.
2. padding
:包括padding-top, padding-right,padding-bottom, padding-left,
控制塊級元素內部
,content
與border
之間的距離
, 其**
, 簡寫請參考
margin
屬性的寫法.
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盒...