web頁面的製作，是個“流”，像水流一樣，必須從上往下，一點點的編織，不像畫畫，可以這個地方畫一個，另一個地方畫一個，隨意而為。

一、標準文件流的一些微觀現象

1. 空白摺疊現象

1)標籤與標籤之間緊密連線，網頁上兩個內容也是緊密連線，中間沒有空格。
2)標籤與標籤之間中間有一個空格，網頁上兩個內容之間也有一個空格的間隙。
3)標籤與標籤之間有一個以上的空格（n>1），網頁上兩個內容之間也只有一個空格。
通過第3)個現象可知，多出的空格摺疊了，這就是所謂的空白摺疊現象。

2.高矮不齊，底邊對齊

網頁上的兩個不同的內容出現高低不同時，底邊對齊。如圖：

3.自動換行

二、塊級元素和行內元素

在HTML中，我們已經將標籤分為了：文字級、容器級。
文字級：p、span、a、b、i、u、em
容器級：div、h系列、li、dt、dd

CSS標準文件流也將標籤分為兩種等級：
1） 塊級元素
● 霸佔一行，不能與其他任何元素並列
● 能接受寬、高
● 如果不設定寬度，那麼寬度將預設變為父親的100%。
2） 行內元素
● 與其他行內元素並排
● 不能設定寬、高。預設的寬度，就是文字的寬度。

CSS的分類和HTML分類很像，就p不一樣：

• 所有的文字級標籤，都是行內元素，除了p，p是個文字級，但是是個塊級元素。
• 所有的容器級標籤都是塊級元素。

總結如下圖：

三、塊級元素和行內元素的互換

1.塊級元素可以設定為行內元素，其語法為：display: inline;

示例：

div{
    display: inline;
    background-color: pink;
    width: 500px;
    height: 500px;
}

display是“顯示模式”的意思，用來改變元素的行內、塊級性質
inline就是“行內”。
一旦，給一個塊級元素設定display: inline;
那麼，這個div將立即變為行內元素。此時它和一個span無異， 此時這個div：
●不能設定寬度、高度；
● 可以和別人並排了。

2.行內元素可以設定為塊級元素，其語法為：display: block;

span{
    display: block;
    width: 200px;
    height: 200px;
    background-color: pink;
}

“block”是“塊”的意思

讓標籤變為塊級元素。此時這個標籤，和一個div無異，此時這個span：
● 能夠設定寬度、高度；
● 必須霸佔一行了，別人無法和他並排；
● 如果不設定寬度，將撐滿父親。

標準流裡面限制非常多，但是實際建立網頁時，我們要讓不同的塊級元素並排佈局，這該如何實現呢？那就是“脫離標準流”，CSS中一共有三種手段使一個元素脫離標準流，下面的部落格，我將一一總結。謝謝！