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;

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

2. 行內元素可以設置成塊級元素

語法為：display:block;

“block”是“塊”的意思。讓標簽變為塊級元素。此時這個標簽，和一個div無異，此時這個span：能夠設置寬度、高度；必須霸占一行了，別人無法和他并排；如果不設置寬度，將撐滿父親。

標準流里面限制非常多，但是實際創建網頁時，我們要讓不同的塊級元素并排布局，這該如何實現呢？那就是“脫離標準流”，CSS中一共有三種手段使一個元素脫離標準流，明天我再跟大家分享。

學習相關推薦(編程必備輔助)：

①：關注公眾號“只會寫BUG”，分享更多干貨知識，資訊，教程等

②：海量編程類資料零基礎到高級亟待領取！！！