CSS文法——盒子模型

1. 盒子模型的介紹

所謂的盒子模型就是把HTML頁面的元素看作一個矩形盒子，矩形盒子是由内容(content)、内邊距(padding)、邊框(border)、外邊距(margin)四部分組成。

盒子模型示意圖如下：

2. 盒子模型相關樣式屬性

• 盒子的内容寬度(width)，注意：不是盒子的寬度
• 盒子的内容高度(height)，注意：不是盒子的高度
• 盒子的邊框(border)
• 盒子内的内容和邊框之間的間距(padding)
• 盒子與盒子之間的間距(margin)

設定寬高：

設定盒子的寬高，此寬高是指盒子内容的寬高，不是盒子整體寬高

width:200px;  /* 設定盒子的寬度，此寬度是指盒子内容的寬度，不是盒子整體寬度(難點) */ 
height:200px; /* 設定盒子的高度，此高度是指盒子内容的高度，不是盒子整體高度(難點) */      

設定邊框:

設定一邊的邊框，比如頂部邊框，可以按如下設定：

border-top:10px solid red;      

說明:

其中10px表示線框的粗細；solid表示線性；red表示邊框的顔色

設定其它三個邊的方法和上面一樣，把上面的’top’換成’left’就是設定左邊，換成’right’就是設定右邊，換成’bottom’就是設定底邊。

四個邊如果設定一樣，可以将四個邊的設定合并成一句：

border:10px solid red;      

設定内間距padding

設定盒子四邊的内間距，可設定如下：

padding-top：20px;     /* 設定頂部内間距20px */ 
padding-left:30px;     /* 設定左邊内間距30px */ 
padding-right:40px;    /* 設定右邊内間距40px */ 
padding-bottom:50px;   /* 設定底部内間距50px */      

上面的設定可以簡寫如下：

padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分别設定的是 上 右 下 左  
四個方向的内邊距值。 */      

padding後面還可以跟3個值，2個值和1個值，它們分别設定的項目如下：

padding：20px 40px 50px; /* 設定頂部内邊距為20px，左右内邊距為40px，底部内邊距為50px */ 
padding：20px 40px; /* 設定上下内邊距為20px，左右内邊距為40px*/ 
padding：20px; /* 設定四邊内邊距為20px */      

設定外間距margin

外邊距的設定方法和padding的設定方法相同，将上面設定項中的’padding’換成’margin’就是外邊距設定方法。

盒子的真實尺寸

盒子的width和height值固定時，如果盒子增加border和padding，盒子整體的尺寸會變大，是以盒子的真實尺寸為：

• 盒子寬度 = width + padding左右 + border左右
• 盒子高度 = height + padding上下 + border上下

小結

• 盒子模型的5個主要樣式屬性

• width：内容的寬度(不是盒子的寬度)
• height：内容的高度(不是盒子的高度)
• padding：内邊距。
• border：邊框。
• margin：外邊距

• 盒子的真實尺寸隻會受到寬度、高度、邊框、内邊距四個屬性的影響，不會受到外邊距屬性的影響。

• border：邊框。
• margin：外邊距
• 盒子的真實尺寸隻會受到寬度、高度、邊框、内邊距四個屬性的影響，不會受到外邊距屬性的影響。