CSS文檔流與區塊層級元素（block）、內嵌元素（inline）
文檔流
將表單自上而下分成一行行， 並在每行中按從左至右的順序排放元素，即為文檔流。
每個非浮動區塊層級元素都獨佔一行， 浮動元素則按規定浮在行的一端。 若當前行容不下， 則另起新行再浮動。
內嵌元素也不會獨佔一行。 幾乎所有元素(包括塊級，內聯和列表元素）均可產生子行， 用於擺放子項目。
有三種情況將使得元素脫離文檔流而存在，分別是浮動，絕對位置， 固定定位。
基於文檔流， 我們可以很容易理解以下的定位元模式：
相對定位， 即相對於元素在文檔流中位置進行位移。 但保留原佔位。
絕對位置， 即完全脫離文檔流， 相對於position屬性非static值的最近父級元素進行位移。
固定定位， 即完全脫離文檔流， 相對於視區進行位移。
《CSS權威指南》中文字顯示：任何不是區塊層級元素的可見元素都是內嵌元素。其表現的特性是“行布局”形式，這裡的“行布局”的意思就是說其表現形式始終以行進行顯示。比如，我們設定一個內嵌元素border-bottom:1px solid #000;時其表現是以每行進行重複，每一行下方都會有一條黑色的細線。如果是區塊層級元素那麼所顯示的的黑線只會在塊的下方出現。
* 行內就是在一行內的元素，只能放在行內；區塊層級元素，就是一個四方塊，可以放在頁面上任何地方。
* 說白了，行內元素就好像一個單詞；區塊層級元素就好像一個段落，如果不另加定義的話，它將獨立一行出現。
* 一般的 區塊層級元素諸如段落<p>、標 題<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而內嵌元素則如: 表單元素<input>、超級連結<a>、映像<img>、<span> ........
* 塊級無素的顯著特點是：每個區塊層級元素都是從一個新行開始顯示，而且其後的無素也需另起一行進行顯示。
* <span>在CSS定義中屬於一個行內元素，而<div>是區塊層級元素。
塊元素（block element）
* address - 地址
* blockquote - 區塊引述
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易，也是css layout的主要標籤
* dl - 定義列表
* fieldset - form控制組
* form - 互動表單
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內容（對於不支援frame的瀏覽器顯示此區塊內容）
* noscript - 可選指令碼內容（對於不支援script的瀏覽器顯示此內容）
* ol - 排序列表
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
內嵌元素（inline element）
代碼
1
2 * a - 錨點
3 * abbr - 縮寫
4 * acronym - 首字
5 * b - 粗體（不推薦）
6 * bdo - bidi override
7 * big - 大字型
8 * br - 換行
9 * cite - 引用
10 * code - 電腦代碼（在引用源碼的時候需要）
11 * dfn - 定義欄位
12 * em - 強調
13 * font - 字型設定（不推薦）
14 * i - 斜體
15 * img - 圖片
16 * input - 輸入框
17 * kbd - 定義鍵盤文本
18 * label - 表格標籤
19 * q - 短引用
20 * s - 中劃線（不推薦）
21 * samp - 定義範例電腦代碼
22 * select - 項目選擇
23 * small - 小字型文本
24 * span - 常用內聯容器，定義文本內區塊
25 * strike - 中劃線
26 * strong - 粗體強調
27 * sub - 下標
28 * sup - 上標
29 * textarea - 多行文本輸入框
30 * tt - 電傳文本
31 * u - 底線
32 * var - 定義變數
可變元素
可變元素為根據上下文語境決定該元素為塊元素或者內嵌元素。 * applet - java applet * button - 按鈕 * del - 刪除文本 * iframe - inline frame * ins - 插入的文本 * map - 圖片區塊（map） * object - object對象 * script - 用戶端指令碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
