盒子模型分為四部分：內容區，內邊距，外邊距，還包括內外邊距間的邊界。如圖所示：
每個元素的內容，如文字，影象。內容和盒子邊緣沒有空間。
內容和邊框之間的空間。內邊距是透明的，沒有顏色和裝飾。如果元素使用背景，背景會延伸到內邊距，到邊界截止。
padding: 0px;寬度： border-width: *px;
顏色：border-color: black;
樣式：border-style: solid/ double/ groove/ outset/ dotted/ dashed/ inset/ ridge.
圓角：border-radius: *px;
寬度，顏色和樣式可以單獨設定，也可以三個合併在一起設定：
border: 2px solid red；圓角可以同時設定四個角，也可單獨設定乙個或兩個角。
外邊距包圍著邊框，增加不同元素間的空間，外邊距也是透明的，沒有顏色或裝飾。
margin: *px;盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
html盒子模型 jquery盒子模型
最近學了jquery的盒子模型之後，感覺真的顛覆我之前對盒子模型的看法，我在最初以為盒子模型只存在於html,我們就來看看他們有何區別。1.html盒子模型 如果說js裡面萬物皆是物件，那麼html裡面的萬物皆是盒子。不是盒子的我們也可以用dispiay block 變成盒子。那他的盒子是怎麼計算的...