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

時間 2019-12-05

標籤一篇文章瞭解 html 文檔 normal flow 欄目 HTML 简体版

原文原文鏈接

題外話

以前在知乎中寫的幾篇文章，可是因爲不太適合寫技術文章，因此來到了這裏，接下來的幾篇文章就搬運過來吧！html

PS：排版很費時間啊。。。瀏覽器

文檔流（normal flow）

要想了解什麼是文檔流，那就要知道流的概念。想象一下，什麼是「流」？咱們日常說的「水流」「流體」，咱們就能夠把像河流那樣長長的東西做爲流。佈局

那這裏所指的文檔流指的是什麼呢？因爲這是顯示在瀏覽器上面的，顯示在電腦屏幕前的。若是咱們將屏幕的兩側想象成河道，將屏幕的上面做爲流的源頭，將屏幕的底部做爲流的結尾的話，那咱們就抽象出來了文檔流！測試

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

塊級元素和內聯元素

別被這兩個東西嚇到了，塊級元素（block）內聯元素（inline）。看過英文是否是很簡單呢？
塊級元素：四四方方的塊，在文檔中本身佔一行。如<div> <p>
內聯元素：（行內元素）多個內聯元素，能夠在一行顯示。如<span> <img>設計

咱們對塊級元素和內聯元素的初級印象已經掌握，可是還不夠！code

如何區分哪些是塊級元素，哪些是內聯元素？

若是咱們是開發html的語言的人，你會把什麼元素設計成塊狀（杜佔一行）什麼元素又設計成內聯元素呢？以個人觀點來看，將展示宏觀的元素設置成塊（相對宏大）將修飾細節的東西設置成行內元素（相對細微）。例如：<div>元素就是做爲容器出道的，他確定就是塊級元素。而<strong> 這些修飾個別文字的樣式，就是內聯元素。固然這不是絕對，只是我yy的結果。orm

是否是還感受到濛濛的狀態呢？再來一劑提神醒腦的神藥！
多說無心，請看代碼：htm

<!--html中-->
<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>元素的特殊性呢？

咱們接下來繼續測試。

<!--在上面html代碼中修改-->
<body>
        <span class="inline">hello</span>
        <span class="inline">world</span>
        hello
        <div class="block">
            hello world
        </div>
</body>

效果：

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

<!--在上面html代碼中修改-->
<body>
        <span class="inline">hello</span>
        <span class="inline">w<strong>o</strong>rld</span>
        hello
        <div class="block">
            hello world
        </div>
</body>

效果：

並無以空格分隔。
關於空格問題的進一步思考：這兩個不一樣顯示的區別在哪裏呢？第一次span是在新起一行，而第二個strong 則是在其餘元素的前面。因此猜想有多是這個換行符搞的鬼！

如今咱們將strong新起一行顯示，觀察效果。

Amazing！

由此咱們總結一下

在內聯元素中回車符會被顯示成爲一個空格，因此很好的解決了矛盾

然而行內元素並不是只有文本，圖片元素仍然是一個頭疼的問題，緣由是：他的大小不必定啊，和文字不一樣。因此有必要再拿圖片來測試一下。

<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就能夠轉換了！

舉個栗子：

<!--Html-->
    <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 第四版：更新了第三版加入的錯誤。進一步探究。2017.12.14 第五版：將內聯元素的空格問題這個錯誤修復

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。