言

說起文檔流，一臉懵逼，這啥東東？網頁是由各種HTML元素組成的，這些元素在計算布局排版的過程中,會自動的按照從左到右(行內元素),從上到下(塊級元素)的規則排列。

這樣的一個標準規則就是文檔流，不同的瀏覽器有稍微差異，尤其是過去的IE瀏覽器，很慶幸現在不需要太了解這些差異，知道就行了。

如下示例：

瀏覽器會按照如上規則排版網頁，標準文檔流有以下幾種特性：

1. 空白折疊現象
2. 高矮不齊，底邊對齊
3. 自動換行，一行排不滿，會換行

在這里就涉及到幾個概念：格式化上下文( Formatting context )。

格式化上下文

Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。

簡單理解，就是定義了布局規則的一片區域。它的類型包括：

• Block Formatting Context，簡稱BFC——塊級格式化上下文
• Inline Formatting Context，簡稱IFC——行內格式化上下文
• Flex Formatting Context，簡稱FFC——flex格式化上下文
• Grid Formatting Context，簡稱GFC——柵格格式化上下文

關于這方面的知識，后面會詳細介紹，你也可自行查詢相關資料。

有三種影響元素布局的方法：

• display —— 顯示模式
• Float —— 浮動
• position —— 定位

如上圖，默認情況下塊級元素從上到下布局，行內元素從左到右布局，如果想改變其中某些元素的布局，可以使用以上幾種方法改變文檔流默認行為。

display 顯示模式

display 屬性它有如下幾個值：

1. display:none;　隱藏不占位置
2. display:block;　塊級元素
3. display:inline;　行內元素
4. display:inline-block;　行內塊級元素

如下示例：

顯示效果：

從上圖可以看到第一個塊級元素不顯示。

隱藏元素—— display:none

display: none 和 visibility：hidden 一樣都可以隱藏元素。它們的區別是，前者不占據文檔流中空間，后者仍然占據一塊空間，如下圖示例：

class="vhide"的元素，看不見但卻占據了一塊空間。

塊級元素 —— display:block

塊級元素獨占一行，從上到下排列，可以設置寬和高，如果不設置寬度，那么默認寬度是父類的寬度的100%。

如下圖中的黃色區域：

常見塊級元素有div、h系列、li、dt、dd等，定義容器的標簽。

行內元素 —— display:inline

行內元素和其他行內元素可以并排，一行不夠時會自動換行，不能設置寬、高，默認的寬度，就是其元素內容的寬度；

如下示例：

<span style="width:100px;heidht:100px;">行內元素</span>
<div style="width:100px;heidht:100px;">塊級元素</div>

如下圖綠色區域，寬度和高度沒有起作用：

常見行內元素有 span、a、b、i、u、em等，這些元素大多是描述文本的標簽，除了段落p標簽比較特殊，它是塊級元素。

在圖3中你是否看到塊重疊了，這是什么原因？

其原因是行內元素設置了padding 填充，行內元素的寬度和高度只能是其內容的區域的寬高，在文檔流中雖然行內元素的padding 起作用了，但是在垂直方向上會和相鄰的塊元素出現重疊，也就是padding 填充這部分會覆蓋其它元素，所以要盡量避免使用，解決方法就是把行內元素轉換成塊級元素。

行內塊級元素 —— display: inline-block

行內塊級元素，是一種特殊的行內元素，同樣是從左到右排列，和 display:inline 不同之處有以下幾點：

1. 不會出現padding重疊現象。
2. 可以設置寬度和高度。

如下示例：

顯示效果：

如圖10中紅色區域就是塊級元素，它設置了寬度、高度和padding填充，但是它沒有重疊。但是它又和行內元素一樣并排排列。

float 浮動 和 position 定位

這二種屬性也可以改變文檔流中的元素，可以使元素從文檔流中脫離。

脫離文檔流,指的是元素脫離正常元素的布局排版規則,其他處于文檔流中的盒子在計算布局排版時,會自動無視已脫離文檔流的元素來進行定位。

浮動(float)與絕對定位(position)之間的區別就是：

1. 浮動會使元素脫離文檔流,但是不會脫離文本流,在于其他盒子的文本內容計算布局的時候,還是占位置的。
2. 絕對定位會使元素脫離文檔流,同時也會脫離文本流, 在于其他盒子的文本內容計算布局的時候,不占位置。

什么是文本流？

簡單來說就是元素內部的一系列的字符的排列規則，就是文本流。注意和文檔流的區別。

float 浮動，如下示例：

塊級元素3沒有浮動：

設置浮動后：

塊級元素3脫離了原始文檔流，浮動到右邊了。

定位 position 的示例：

position:absolute;
top:0;
left:0;

如上圖，塊級元素3脫離文檔流，顯示到上面去了，position 定位有相對定位、絕對定位、fixed定位，它們的都會相對不同的父元素作為基準點坐標。

結論

通過本文學習，主要講到以下幾點內容：

1. 瀏覽器中HTML元素按照一定的規則排列，這樣的規則排列方式稱為文檔流。
2. 格式化上下文，它有幾種？
3. 行內元素和塊級元素概念，及它們有什么區別？
4. 可以使用display（顯示），float（浮動），定位（position）改變文檔流中的元素定位及顯示。

要想學會網頁布局，這節所講的知識需要完全掌握，非常重要，重在理解它的原理，這樣才能游刃有余。關于浮動和定位由于涉及的知識太多，將會在之后分別單獨介紹。

感謝您的閱讀，歡迎指正錯誤，補充。

上篇：前端入門——css邊框和圓角

一篇我們介紹了前端的HTML認識。

今天我們來聊聊，html的一些常用元素:

前端開發中，有很多個元素，我們挑一些使用頻率最高，使用次數最多的元素，跟大家分享一下。

div元素：通常用來對頁面布局搭建及元素分組的一個塊元素

<div class="layout-wrap">
        <div class="top">
            頂部
        </div>
        <div class="left">
            左側
        </div>
        <div class="right">
            <div class="right-top">右側頂部</div>
            <div class="right-bottom">右側底部</div>
        </div>
    </div>

上述代碼，再加上css樣式即可搭建出自己想要的布局：

p元素：段落標簽，用來展示一段文本

    <p>人生就像一場單程的旅行，即使有些遺憾，我們也沒有從頭再來的機會，與其糾結無法改變的過去不如微笑著珍惜未來。因為生活，沒有如果</p>

span元素：組合文本的行內元素，用來組合的行內元素

<p><span>人生</span>就像一場單程的旅行，即使有些遺憾，我們也<span>沒有從頭再來的機會</span>，與其糾結無法改變的過去不如微笑著<span>珍惜未來</span>。因為生活，沒有如果</p>

img元素：圖片元素，用于在頁面中展示圖片

<img src="https:///www.superwbs.com/superwbs-server/upload/6O95pvqNqC20XhGz9WfqFrC2.png" alt="" srcset="">

input元素：簡單的表單元素，標簽用于搜集用戶信息

<input type="text" placeholder="用戶名">
    <input type="password" placeholder="密碼">
    <input type="button" value="提交">

table元素：簡單的表格元素，用來展示表格

<table border="1" width="100%">
        <tr>
            <th>姓名</th>
            <th>性別</th>
        </tr>
        <tr>
            <td>小成</td>
            <td>男</td>
        </tr>
    </table>

（本期完）

小成講前端---本系列將隔天不定時更新

歡迎點贊，關注我！！