一：HTML元素分類

       HTML元素分類：

       1，塊級元素 block
       如：div、p、h1-h6、li、ul、ol、dl
       特點：
       ①獨佔一行顯示；
       ②可以設定寬度、高度、行高和上下邊距；

       ③不設寬度，則和父元素的寬度一致

       2，行內元素 inline
       如：a、span
       特點：
       ①可以和其他行內元素在一行上顯示
       ②不可以設定寬度、高度、行高和上下邊距

       ③元素的寬度就是它包含的文字或圖片的寬度

       3，行內塊元素 inline-block
       如：img、input
       特點：
       ①可以和其他行內塊元素或行內元素在一行上顯示

       ②可以設定寬度、高度、行高和上下邊距

       不同型別元素可以相互轉換：
       display:block;
       display:inline-block;

二：盒模型

       在CSS看來，任何元素都是一個盒子。

       CSS框模型：

1，基礎知識點

①width和height不能應用於行內元素(行內非替換元素)

②width、height預設值為auto；padding、border、margin預設寬度為0；                                          
margin可取值auto，padding和border不可以！                                                                                            
背景會延伸到內邊距中，但不會延伸到外邊距

③margin、border、padding取值方式：
四個值(上、右、下、左)  top right bottom left
三個值(上、左右、下)
兩個值(上下 、左右)

一個值(上右下左)

2，margin

①不僅是左右margin，還有上下margin，其百分數取值都是相對於父元素的width計算的
②正常流中的塊級元素垂直相鄰外邊距會合並
③對於行內非替換元素（行內元素）：上下外邊距無效果(因為它對行高沒有任何影響？)，左右外邊距有效

④對於行內替換元素（行內塊元素）：上下外邊距會影響行高，所以有效果，左右外邊距也有效 

⑤width、margin-left、margin-right這三個屬性都設定非auto的某個值，此時，總會把margin-right強制為auto
⑥width:100px;margin-left:auto;margin-right:auto;這會將兩個外邊距設定為相等的長度，從而將元素居中
⑦將某個外邊距及width設定為auto，該外邊距會減為0；將width、margin-left、margin-right三個都設定為auto，則兩個外邊距都會重置為0，而width儘可能寬

⑧正常流中一個塊級元素的margin-top或margin-bottom設定為auto，它會自動計算為0

⑨標準流中，第一個子元素的margin-top會作用在父元素身上
原因：根據規範，一個盒子如果沒有上補白（padding-top）和上邊框（border-top），那麼這個盒子的上邊距會和其內部文件流中的第一個子元素的上邊距重疊

解決辦法：給父元素加個padding-top或border-top或overflow:hidden

⑩標準流元素、浮動元素可以相互佔對方類的margin，但不可佔其同類的margin；絕對定位與固定定位，誰的margin都可以佔，即使是同類，然而，任意的元素也可以佔它們的margin

3，border/padding

①對於行內非替換元素（行內元素）：上下邊框(或內邊距)對行高沒有任何影響，所以有可能覆蓋上下內容；左右邊框(或內邊距)正常顯示，相鄰文字會在其旁邊顯示

②對於行內替換元素（行內塊元素）：上下邊框(或內邊距)會影響行高，所以不會覆蓋上下內容，左右邊框(或內邊距)也正常顯示

/* 屬性型別寫法舉例 */
margin: 10px;
margin-top: 10px;

padding: 10px;
padding-top: 10px;

border: 1px red solid;
border-top: 1px red solid;
border-top-width: 1px;
border-width: 1px;
border-style: solid;
border-color: red;

4，行內塊元素顯示多餘空白問題

行內塊元素的盒子之間會存在一定的空隙(4px)；是由於盒子間的空白字元造成的

解決辦法：①可以把程式碼首尾相連寫在一起，不留空白字元（不能消除底部空白），不推薦使用

 ②設定其父元素 font-size:0;

/* 要使高度不同，有內容的inline-block盒子以底部整齊排列 */
/* 方式一： */
vertical-align: bottom;
/* 方式二： */
overflow: hidden;

去除圖片底部4px空白：
①給其父元素設定font-size:0; 或  line-height:0;

②給圖片設定display:block;   或  vertical-align:bottom;

三：浮動

CSS允許浮動任何元素。

float: left |  right  | none
①浮動元素會從文件的正常流中刪除，不佔原來的位置；即元素浮動後會脫離標準流
②一個元素浮動時，其他內容會“環繞”該元素（不僅對於浮動影象）
③要浮動一個非替換元素，則必須為該元素宣告一個width

④元素浮動後就具有了行內塊元素的特性，浮動元素會生成一個塊級框

浮動規則(部分)：
①浮動元素只能在其包含塊內容區內浮動（除了設定負外邊距和浮動元素比其包含塊更寬）
②浮動元素互相貼靠，不會相互重疊
③浮動元素的頂端應當與其標記所在行框(源文件中)的頂端對齊
④行內框與浮動元素重疊時，其所有都在浮動元素“之上”顯示；

   塊框與浮動元素重疊時，僅內容在浮動元素“之上”顯示，邊框和背景在浮動元素“之下”顯示

浮動元素的包含塊是其最近的塊級祖先元素

四：定位

靜態定位  static：預設值  元素標準流的顯示方式
相對定位  relative：相對其原位置定位，仍佔原來的空間
絕對定位 absolute：①不佔原來的空間，元素框從文件流完全刪除；②能將行內元素轉化為行內塊元素；                                          ③相對於其包含塊定位，其包含塊為最近的position值不是static的祖先元素。
固定定位 fixed：①不佔原來的空間，元素框從文件流完全刪除；②能將行內元素轉化為行內塊元素；                                        ③相對於其包含塊定位，其包含塊為視窗

絕對定位元素的包含塊為最近的position值不是static的祖先元素，祖先是塊級元素，包含塊則為由邊框界定的區域；祖先是行內元素，包含塊則為該祖先元素的內容邊界

定位需使用到偏移屬性；偏移屬性：left  right  top  bottom  (可取正值也可取負值)

z-index：應用於定位元素，可以改變元素相互覆蓋的順序；
               取值越高的元素離使用者越近，並覆蓋值低的元素；可以取所有整數，包括負數