一、CSS盒子模型

1、盒子模型解釋

元素在頁面中顯示成一個方塊，類似一個盒子，模型示意圖如下：

把元素叫做盒子，設定對應的樣式分別為：盒子的寬度(width)、盒子的高度(height)、盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。

2、設定寬高 width height

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

3、設定邊框 border

設定一邊邊框，例如頂部如下：

border-top:10px solid red；

10px表示線框的粗細，soid表示線性
設定四個邊一樣：

border:10px solid red;

4、設定內間距 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 */

5、設定外間距 margin

同上，將padding改為margin即可
外間距居中技巧
如果子元素是塊元素，且它的寬度小於父元素，可以將子元素左右設定auto來水平居中子元素

/* 子元素上下外邊距設為0，左右設定為auto */
margin:0px auto

6、盒子的真實尺寸

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

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