文檔流（normal flow）
網頁是一個多層的結構，一層摞着一層，通過 CSS 可以分別為每一層設置樣式，作為用戶只能看到最頂上的一層，這些層中，最底下的一層稱為文檔流。文檔流是網頁的基礎，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
我們所創建的元素默認都是在文檔流中進行排列的。
元素主要有兩個狀態：
在文檔流中
不在文檔流中（脫離文檔流） 只有絕對定位和浮動float才會脫離文檔流。
元素在文檔流中的特點
塊級元素
塊元素會在頁面中獨占一行（自上向下垂直排列）
默認寬度是父元素的全部（會把父元素撐滿）
默認高度是被內容撐開（子元素撐開）,元素有多少，高度就是多少
行內元素
行內元素不會獨占頁面中的一行，只占自身的大小
行內元素在頁面中自左向右水平排列，如果一行之中不能容納所有的行內元素，則元素會換到第二行繼續自左向右排列（和習慣的書寫順序一致）
行內元素的默認寬度和默認高度都是被內容撐開
區分塊級元素和內聯元素
每一個網頁元素都有一個display屬性，用於設置元素顯示的類型，通過display屬性設置不同的值可以將塊級元素、內聯元素、行內塊元素之間進行轉換。
常見的可選值包括：
none : 元素不會被顯示，也不會保留該元素原先占有的文檔流位置。
inline ：內聯元素，元素后沒有換行符。
inline-block : 行內塊元素，（CSS 2.1 增加的值）。
block ：塊級元素，元素后帶有換行符。
table ： 此元素會作為塊級表格來顯示，表格前后帶有換行符。
特點
塊級元素獨占一行，可以設置元素的寬高，會自動換行,可以容納內聯元素和其他塊級元素。
內聯元素不獨占一行，不能設置元素的寬高及外邊距和內邊距,內聯元素只能容納文本或者其他內聯元素。
行內塊元素既可以設置寬度和高度，又不會獨占一行，但一般不建議使用
當把行內元素設置為浮動 （float：left/right）后，行內元素的display屬性會轉換為block，且具備浮動的特性。
當為行內元素進行定位時，position:absolute與position:fixed都會使得原先的行內元素變為塊級元素。
行內元素又分為替換元素(行內塊元素 display：inline-block)和非替換元素（display：inline），替換元素可以設置寬高，非替換元素不可以 。
- 替換元素(行內塊元素 display：inline-block)是瀏覽器根據其標簽的元素與屬性來判斷顯示具體的內容。html中的
<img>、<input>、<textarea>、<select>、<object>等都是替換元素，這些元素都沒有實際的內容。- 非替換元素：html的大多數元素是不可替換元素，他們將內容直接告訴瀏覽器，將其顯示出來。比如
<p>非替換元素</p>瀏覽器將把這段內容直接顯示出來。
常見的塊級元素有：
blockquote - 塊引用
dir - 目錄列表
div - 常用塊級容易，也是css layout的主要標簽
dl - 定義列表
form -交互表單
h1 ~ h6 - 1-6級標題
hr - 水平分隔線
isindex - input prompt
menu - 菜單列表
noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
noscript - 可選腳本內容（對於不支持script的瀏覽器顯示此內容）
ol - 排序表單
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
header - 頭部，定義文檔的頁眉
section - 定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。
aside - 定義其所處內容之外的內容，可用作文章的側欄，是 HTML 5 的新標簽。
footer - 定義文檔或節的頁腳，是 HTML 5 中的新標簽。
html - 限定了文檔的開始點和結束點，可告知瀏覽器其自身是一個 HTML 文檔。
body - 定義文檔的主體,是HTML頁面必須的標簽。
nav - 定義導航鏈接的部分。
article - 定義外部的內容，標簽的內容獨立於文檔的其余部分，是 HTML 5 的新標簽。
thead - 表格的頭，用來放標題之類
tbody - 表格的身體，用來放數據本體
tfoot - 表格的腳，用來放表格的腳注之類
tr - 定義 HTML 表格中的行。
常見的內聯元素有：
a - 錨點
b - 粗體
big - 大字體
br - 換行
code - 計算機代碼(在引用源碼的時候需要)
em - 強調
font - 字體設定
i - 斜體
label - 表格標簽
q - 短引用
small - 小字體文本
span - 常用內聯容器，定義文本內區塊
strike - 中划線
strong - 粗體強調
sub - 下標
sup - 上標
tt - 呈現類似打字機或者等寬的文本效果
u - 下划線
var - 定義變量
常見的行內塊元素有
button - 按鈕
img - 圖片
input - 輸入框
select - 選擇框
textarea - 多行輸入框