所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。

內邊距（padding）： 內容與邊框之間的距離 
外邊距（margin）: 盒子與盒子之間的距離

邊框border

1、border-width:   設定邊框寬度

2、border-style:     設定邊框樣式
   none    沒有邊框
   solid     實線
   dotted    點線
   dashed    虛線

3、border-color：   設定邊框顏色

4、borde具體屬性設定：
    border-top-color:green;

5、border屬性聯寫
    改變具體邊框屬性聯寫：
    border-top:2px dotted red;
    改變所有邊框屬性聯寫：
    border:1px solid green;

6、去掉邊框寫法：
    border: 0 none;

7、邊框合併：
    border-collapse:collapse;

8、點選文字設定輸入框游標焦點方式
    <label for="name">姓名：</label>
    <input type="text" class="namecls" id="name">
 

內邊距（padding）

padding-top:上內邊距
padding-right:右內邊距
padding-bottom:下內邊距
padding-left:左內邊距

頁面中盒子大小計算問題

border可以影響盒子大小。 
padding可以影響盒子大小 
margin不會影響盒子大小。

頁面中盒子寬度=設定的寬度值+左右邊框+左右內邊距。

注意：以後在頁面中設定盒子大小的時候，如果遇到padding和border要給盒子寬度和高度減去對應的值。

padding影響盒子大小特殊地方

1. 如果一個塊級元素中包含另外一個塊級元素（子元素沒有寬度），給子元素設定padding值，不會影響子盒子大小。

2. 子元素繼承父元素的盒子，padding不會影響子盒子大小

外邊距margin

外邊距用法與padding一樣，但是外邊距對盒子寬度沒有影響。

外邊距特點

1、垂直外邊距合併（外邊距以最大值為準），只發生在塊級元素之間。

2、外邊距塌陷解決方案： 
第一種：給父盒子新增border值，但是影響父盒子的寬度。 
第二種：給父盒子設定 overflow: hidden; （推薦這種） 
注意： overflow:hidden 觸發 bfc (格式化上下文)，將頁面中的元素設定為獨立的元素。

行內元素關於padding與margin問題

1.需要使用背景圖的時候必須用padding。 
2.會出現外邊距合併或者margin塌陷的時候用padding。 
3.行內元素上下只能設定padding，不能設定margin。（行內高16px） 
4.看border，如果是a連線，看能不能讓字型變色，或者顯示小手。

隱藏盒子問題

1.overflow：hidden; 隱藏盒子超出的部分。 
2.display: none; 隱藏盒子，而且不佔位置。(用的最多) 
3.visibility: hidden; 隱藏盒子，而且佔位置。 
4.opacity: 0; 隱藏盒子，而且佔位置。 
5.Position/top/left/…-999px 隱藏盒子，而且佔位置。