本篇內(nèi)容主要講解“CSS盒模型的詳細介紹”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS盒模型的詳細介紹”吧!

公司主營業(yè)務：成都網(wǎng)站建設、成都網(wǎng)站設計、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出渝北免費做網(wǎng)站回饋大家。

為了給文檔樹中的各個元素排版定位（布局），瀏覽器會根據(jù)渲染模型（是講元素怎么在頁面上定位及布局的，包括position和float等等，visual formatting model）為每個元素生成四個嵌套的矩形框，分別稱作content box、padding box、border box 和margin box。

以上說的四種類型是不可分割的，并可能會重合，這就是CSS規(guī)范中描述的“盒模型”（box model），也就是以CSS的角度去看一個元素被渲染后的抽象形態(tài)。是講一個元素自身的構成部分，不同于布局：多個元素在頁面上的定位。

上面的大框，代表一個元素生成的矩形區(qū)域，也就是 box，每一個 box 都包括一個 content 區(qū)域（元素的內(nèi)容，如文本，圖形等）以及環(huán)繞其四周的 padding(元素的內(nèi)邊距，填充部分)、border (元素的邊框) 和 margin (元素的外邊距) 區(qū)域。padding、border 和 margin 區(qū)域都包括 top、right、bottom、left 四部分。如圖所示（“LM”代表left margin，“RP”代表right padding，“TB”代表top border……）。

邊界

上述四個區(qū)域（content、 padding、border和margin）分別有他們自己的邊界，細化來說，每個區(qū)域都有top、right、bottom、left四個邊界。

◆content 邊界/內(nèi)邊界

Content 邊界環(huán)繞在由該元素的寬和高決定的一個矩形上，這個尺寸通常由該元素渲染后的內(nèi)容決定。這四個content邊界組成的矩形框就是該元素的 content box。

◆padding邊界

Padding 邊界環(huán)繞在該元素的 padding區(qū)域的四周，顧名思義，填充背景色，在此范圍內(nèi)有效。如果padding的寬度為0，則padding邊界與content邊界重合。這四個padding邊界組成的矩形框就是該元素的padding box。

◆border 邊界

Border 邊界環(huán)繞在該元素的border區(qū)域的四周，如果border的寬度為0，則border邊界與padding邊界重合。這四個border邊界組成的矩形框就是該元素的 border box。

◆margin 邊界/外邊界

Margin 邊界環(huán)繞在該元素的margin區(qū)域的四周，如果margin的寬度為0，則margin邊界與border邊界重合。這四個margin邊界組成的矩形框就是該元素的 margin box。下面分別說一下各個部分。一個簡單的例子，來自 W3C 官方：

     UL {  background: yellow;  margin: 12px 12px 12px 12px;  padding: 3px 3px 3px 3px;   /* No borders set */  }  LI {  color: white; /* text color is white */  background: blue; /* Content, padding will be blue */  margin: 12px 12px 12px 12px;  padding: 12px 0px 12px 12px; /* Note 0px padding right */  list-style: none /* no glyphs before a list item */  /* No borders set */  }  LI.withborder {  border-style: dashed;  border-width: medium; /* sets border width on all sides */  border-color: lime;  }     
 
First element of list
 Second element of list is  a bit longer to illustrate wrapping. 
  

示意圖：

margin

'margin' 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的簡寫，表明 margin 的大小范圍。它的值可以是寬度值、百分比值或‘auto’這3者之一，注意：寬度值必須帶有單位。

margin簡寫

1. 以上、右、下、左的順序給以上四個值賦值。

CSS codemargin: 1px 2px 3px 4px;

等價于：

CSS codemargin-top: 1px  margin-right: 2px  margin-bottom: 3px  margin-left: 4px

記住，從上面開始，順時針旋轉一圈。

2. 以上下、左右的順序賦值

CSS codemargin: 1px 2px;

那么相當于：

CSS codemargin-top: 1px  margin-right: 2px  margin-bottom: 1px  margin-left: 2px

這種賦值方式，適合下面講到的 *-top，*-right，*-bottom，*-left的簡寫的賦值，如padding，border-width，border-color等，下面不再說明。

可以應用在什么元素上

非table類型的元素，以及table類型中table-caption, table 和inline-table這3類。例如 TD TR TH等，margin是不適用的。

什么時候無效

對于行內(nèi)非替換元素（例如 SPAN），垂直方向的margin不起作用。例如：

 ddd