一，文件流佈局

• 1，也稱標準流佈局，或者普通流佈局
• 2，是瀏覽器預設的排版方式
• 3，有兩種排版方式：
  • 垂直排版, 如果元素是塊級元素, 那麼就會垂直排版；
  • 水平排版, 如果元素是行內元素/行內塊級元素, 那麼就會水平排版

二，所有display佈局引數

1. block :塊物件的預設值。用該值為物件之後新增新行
2. none :隱藏物件。與visibility屬性的hidden值不同，其不為被隱藏的物件保留其物理空間
3. inline :內聯物件的預設值。用該值將從物件中刪除行
4. compact :分配物件為塊物件或基於內容之上的內聯物件
5. marker :指定內容在容器物件之前或之後。要使用此引數，物件必須和:after及:before 偽元素一起使用
6. inline-table :將表格顯示為無前後換行的內聯物件或內聯容器
7. list-item :將塊物件指定為列表專案。並可以新增可選專案標誌
8. run-in :分配物件為塊物件或基於內容之上的內聯物件
9. table :將物件作為塊元素級的表格顯示
10. table-caption :將物件作為表格標題顯示
11. table-cell :將物件作為表格單元格顯示
12. table-column :將物件作為表格列顯示
13. table-column-group :將物件作為表格列組顯示
14. table-header-group :將物件作為表格標題組顯示
15. table-footer-group :將物件作為表格腳註組顯示
16. table-row :將物件作為表格行顯示
17. table-row-group :將物件作為表格行組顯示

三，常用的屬性

1，inline：

1. 多個內聯元素佔同一行，直到放不下才換行。
2. 設定width,height,margin-top,margin- bottom,padding-top,padding-bottom無效； 
3. 元素的寬度就是它包含的文字或圖片的寬度，不可改變
4. <span> <a> <label> <input> <img> <strong> <em>就是典型的行內元素（inline）元素

2，block：

1. 單獨佔一行；
2. 可以設定width,height，maigin四個方向，padding四個方向； 
3. 元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度；
4. <div> <p> <h1> <form> <ul> <li>就是塊級元素

3，inline-block

1. 像inline一樣放置(比如和它相鄰的元素處在同一行)，像block一樣表現。
2. 和內聯元素在同一行，但自身相當於塊級元素，可以設定width,height等屬性
3. 比如標籤：input,select,img等

4，none

1. 隱藏該區域，不佔實際空間。但對後臺來說真實存在，可以獲取被隱藏的元素
2. display:none通常被 JavaScript 用來在不刪除元素的情況下隱藏或顯示元素。它和visibility屬性不一樣。把 display 設定成 none
3. 不會保留元素本該顯示的空間，但是 visibility: hidden;還會保留