一篇文章了解HTML文檔流(normal flow)

05-13

題外話

我認為基礎是最重要的，要想要爬到山頂，你必須要做充足的準備，一味的攀登，最後只能看見一些表面的風景，一旦颳風下雨，就無功而返。

我說的什麼意思呢？就是要注重基礎，自己實踐，不要覺得自己進度慢，要慢慢來。

那就開始正題吧！

文檔流（normal flow）

要想了解什麼是文檔流，那就要知道流的概念。想像一下，什麼是「流」？我們平常說的「水流」「流體」，我們就可以把像河流那樣長長的東西作為流。

那這裡所指的文檔流指的是什麼呢？由於這是顯示在瀏覽器上面的，顯示在電腦屏幕前的。如果我們將屏幕的兩側想像成河道，將屏幕的上面作為流的源頭，將屏幕的底部作為流的結尾的話，那我們就抽象出來了文檔流！

像水流，流動的是水，電磁流流動的是電磁。那文檔流流動的又是什麼呢？那就是元素！可以將屏幕中顯示的內容都可以一一對應為文檔中的一個元素，在這裡就引出兩個概念：內聯元素與塊級元素

塊級元素和內聯元素

別被這兩個東西嚇到了，塊級元素（block）內聯元素（inline）。看過英文是不是很簡單呢？

塊級元素：四四方方的塊，在文檔中自己佔一行。如<div><p>

內聯元素：（行內元素）多個內聯元素，可以在一行顯示。如<span><img>

對於內聯元素的進一步探究請前往這裡進一步探究行內元素，必看！（很重要）

如何區分哪些是塊級元素，哪些是內聯元素？如果我們是開發html的語言的人，你會把什麼元素設計成塊狀（杜佔一行）什麼元素又設計成內聯元素呢？以我的觀點來看，將展現宏觀的元素設置成塊（相對宏大）將修飾細節的東西設置成行內元素（相對細微）。例如：<div>元素就是作為容器出道的，他肯定就是塊級元素。而<strong>這些修飾個別文字的樣式，就是內聯元素。當然也不是絕對，這些東西不需要記，實在叫不準就google或百度一下。

是不是還感覺到蒙蒙的狀態呢？再來一劑提神醒腦的神葯！

多說無意，請看代碼：

<body> <span class="inline">hello</span> <span class="inline">world</span> <div class="block"> hello world </div></body>

有兩個內聯元素，這一次再深刻的理解一下，在《CSS權威》中：內聯元素是始終以「行布局」，意思是，始終以行的形式表現。不理解沒關係，馬上你就會知道了。

沒加CSS樣式的效果圖：

接下來我們再加上邊框效果，你會看的更清晰。

/*CSS樣式表*/.inline{ border:1px solid #ccc;}.block{ border:1px solid #ccc;}

效果如圖：

我們能看見：

內聯元素有兩個框，並且在一行顯示，而塊級元素，雖然第一行的後面能「放下」它，但是卻另起一行。（可以更加簡單粗暴的理解為前後都加了一個換行符）
內聯元素的連接不是絕對的無縫連接，而是正好是一個空格單位的間隔。你可能會問會不會是<span>元素的特殊性呢？我們接下來繼續測試。

<body> <span class="inline">hello</span> <span class="inline">world</span> hello <div class="block"> hello world </div></body>

效果：

可見新加的元素也是一空格分隔。先別急著下結論，接著看：

<body> <span class="inline">hello</span> <span class="inline">w<strong>o</strong>rld</span> hello <div class="block"> hello world </div></body>

效果：

並沒有以空格分隔。

關於空格問題的進一步思考：瀏覽器會有一個默認樣式表，在沒有指定樣式的情況下會應用默認樣式。有沒有可能是這個樣式表搞的鬼呢？

//將所有元素的內外邊距均設置為0*{ padding:0px; margin:0px;}.inline { border:1px solid #ccc;}.block { border:1px solid #ccc;}

效果圖：

由此我們總結一下：嵌套的內聯元素不會以空格分隔，而新的內聯元素加進來，會以其他內聯元素以空格分隔。這是確確實實存在的！

為了證明正確性，最後再來一次測試：將l嵌套成<span>元素。

<body> <span class="inline">hello</span> <span class="inline">w<strong>o</strong>r<span>l</span>d</span> <div class="block"> hello world </div></body>

AMAZING!!還是沒有變！即使加入<span>也沒有變，證明猜想正確！

所以下面這張圖說明了一切：

當然還沒有完！眾所周知，圖片元素是一個頭疼的問題，原因是：他的大小不一定啊，和文字不同。所以有必要再拿圖片來測試一下。

<body> <span class="inline">hello</span> <span class="inline">w<strong>o</strong><span>r</span>ld</span> hello <img class="inline" src="test.gif"/> <div class="block"> hello world </div> </body>

效果圖：

好好觀察有沒有一點熟悉呢？像不像word裡面的排版呢？讓我們來看一下。

是不是容易理解多了呢？在圖片後面添加內聯元素，就和word中添加文字一樣！按這樣類比的話，塊級元素就是多加了一個回車！！！

最後的結論就是：嵌套的內聯元素不會以空格分隔，而新的內聯元素加進來，會以其他內聯元素以空格分隔。同時圖片的顯示和word中類似，下端與數字一齊，同時與其他元素會有空格分隔。

由此行內元素和塊級元素已經總結完。

塊級元素和行內元素的轉換

類似於文檔的排版，我可以把一個內聯元素加兩個回車，換成塊級元素。在CSS中是如何實現這種轉換的呢？

可以說是灰常的easy了，還記得開頭的兩個英文嗎？塊級元素（block）行內元素（inline）

只要加上display:block;或者是display：inline就可以轉換了！

舉個栗子：

 <body> <span class="inline">hello</span> <span class="inline">w<strong>o</strong><span>r</span>ld</span> hello <img class="inline" src="test.gif"/> <div class="block"> hello world </div> </body>

/*CSS*/.inline{ border:1px solid #ccc; display:block;}.block{ display:inline; border:1px solid #ccc;}

脫離文檔流

但是僅有的兩種排版，就滿足了我們的需求嗎？肯定是不夠的！！應該有一種更加自由的變換，從而滿足多樣的世界。有三種方式脫離文檔流：

position:absolute
position:fixed
float

回到文章開頭的例子上面，將文檔流比作是河流的話，水就相當於文檔流裡面的元素。而脫離文檔流就相當於脫離水跑到水的上面飄著，就像河流上的小船。關於定位的內容，會繼續講解。

總結

看到這裡都不點個贊嗎？
以上參雜了自己的一些理解，如有錯誤，歡迎指出，禁止轉載。

更新記錄

2017.11.21第一版

2017.12.02第二版：更新圖片不清晰的問題，加入關於內聯元素排列空格的問題。

2017.12.03第三版：加入內斂元素不能更改width，，，等的說明。

2017.12.04第四版：更新了第三版加入的錯誤。進一步探究。