CSS文檔流與塊級元素（block）、內聯元素（inline），之前翻閱不少書籍,看過不
少文章, 看到所多的是零碎的CSS佈局基本知識,比較表面.看過O'Reilly的<CSS權威指
南>,發現裏面提到的文檔流概念讓我很敏感. 可惡的是書中並沒有解釋文檔流是什麼東
西,或許作者覺得這個太簡單了以至於不值一提.但我覺得,這個概念實在太重要了.理解了
它,一堆css佈局的理論都 變得易於理解,並且體會到CSS這套設計的合理性所在. 於是我
根據猜測,再加實驗,得出一下說法.如有錯誤,純屬正常.
文檔流
將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即爲文檔流.
每個非浮動塊級元素都獨佔一行, 浮動元素則按規定浮在行的一端. 若當前行容不
下, 則另起新行再浮動.
內聯元素也不會獨佔一行. 幾乎所有元素(包括塊級,內聯和列表元素)均可生成子
行, 用於擺放子元素.
有三種情況將使得元素脫離文檔流而存在,分別是浮動,絕對定位, 固定定位. 但是在
IE中浮動元素也存在於文檔流中(還讓我覺得這樣很合理><).
浮動元素不佔任何正常文檔流空間，而浮動元素的定位還是基於正常的文檔流，然後從
文檔流中抽出並儘可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當
一個元素從正常文檔流中抽出後，仍然在文檔流中的其他元素將忽略該元素並填補他原
先的空間。
浮動概念讓人迷惑根源在於瀏覽器對理論的解讀造成的。只能說很多人以IE做標準，其
實它不是。
基於文檔流, 我們可以很容易理解以下的定位模式:
- 相對定位,
即相對於元素在文檔流中位置進行偏移. 但保留原佔位. - 絕對定位,
即完全脫離文檔流, 相對於position屬性非static值的最近父級元素進行偏移 - 固定定位,
即完全脫離文檔流, 相對於視區進行偏移.
接下來還有幾個問題我搞不明白的
- 作爲三大基本元素之一的內聯元素, 它跟塊級元素的主要區別在哪?
- Clear屬性取right值時怎麼理解? 貌似實驗情況總跟理論不符.
內聯元素是什麼意思呢？什麼是塊級別元素。
《
CSS權威指南》中文字顯示：任何不是塊級元素的可見元素都是內聯元素。其表
現的特性是“ 行佈局”形式，這裏的“行佈局”的意思就是說其表現形式始終以行進行
顯示。比如，我們設定一個內聯元素border-bottom:1px solid #000;時其表現是以
每行進行重複，每一行下方都會有一條黑色的細線。如果是塊級元素那麼所顯示的的黑
線只會在塊的下方出現。
p、h1、或div等元素常常稱爲塊級元素
，這些元素顯示爲一塊內容；
Strong,span等元素稱爲行內元素，它們的內容顯示在行中，即“行內框”。
（可以使用display=block將行內元素轉換成塊元素，display=none表示生成的元素根
本沒有框，也既不顯示元素，不佔用文檔中的空間）
A：行內就是在一行內的元素，只能放在行內；塊級元素，就是一個四方塊，可以放在頁
面上任何地方。
B：說白了，行內元素就好像一個單詞；塊級元素就好像一個段落，如果不另加定義的
話，它將獨立一行出現。
C：
一般的 塊級元素諸如段落<p>、標 題<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。
而內聯元素則如: 表單元素<input>、超級鏈接<a>、圖像<img>、<span> ........
D：
塊級無素的顯著特點是：每個塊級元素都是從一個新行開始顯示，而且其後的無素
也需另起一行進行顯示。
E：<span>在CSS定義中屬於一個行內元素，而<div>是塊級元素。
對於學過CSS的人來說一聽就能明白。可對於新手來說不易理解，我主要對
新手說通熟
點吧!
用容器這一詞會更容易形象理解它們的存在與用途，行內元素相當一個小容器，而
<div>相當於一個大容器，大容器當然可以放一個小容器 了。<span>就是小容器，這
樣一說你也許會在腦海中有一個初步的印象了吧，如果我們想在大容器中裝一些清水。
但我也想在裏裝一些墨水怎麼辦？很簡單，我們把小容器拿出來裝上墨水然後放入大容
器裏的清水中不就成了嗎。
我在舉個簡單的一個實際例子吧：比如
<div>上海手寫DIV+CSS培訓-www.xinran001.com</div>
我想用CSS定義字母
www.xinran001.com的
樣式，因此我們就可以用到<span>了。
<div>上海手寫DIV+CSS培訓- <span>www.xinran001.com</span> W3C標準
</div>
塊元素(block element)一般是其他元素的容器元素
塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標
籤'P"。“form"這個塊元素比較特殊，它只能用來容納其他塊元素。
如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以
後，我們可以改變這種
html的默認佈局模式，把塊元素擺放到你想要 的位置上去。而不
是每次都愚蠢的另起一行。
需要指出的是，table標籤也是塊元素的一種，table based layout和css based l
ayout從一般使用者（不包括視力障礙者、盲人等）的角度來看這兩種佈局，除了
頁面載
入速度的差別外，沒有其他的差別。但是如果普通使用者不經意點了 查看頁面源
代碼按
鈕後，兩者所表現出來的差異就非常大了。基於良好重構理念設計的
css佈局頁面源碼，
至少也能讓沒有web
開發經驗的普通使用者把內容快 速的讀懂。從這個角度來說，css
layout code應該有更好的美學體驗吧。
你能夠把塊容器元素div想象成一個個box，或者如果你玩過剪貼文載的話，那就更加容
易理解了。我們先把需要的文章從各種報紙、雜誌總剪 下來。每塊剪下來的內容就是一
個block。然後我們把這些紙塊按照自己的排版意圖，用膠水重新貼到一張空白的新紙
上。這樣就形成了你自己獨特的文摘快報 了。作爲一種
技術的延伸，
網頁佈局設計也遵
循了同樣的模式。.
內聯元素(inline element)一般都是基於語義級(semantic)的基本元素。內聯元
素只能容納文本或者其他內聯元素，常見內聯元素 “a”。
塊元素(block element)和內聯元素(inline element)都是html規範中的概念。塊元素和
內聯元素的基本差異是塊元素一般都從新行開始。而當加入了css控制以後，塊元素和內
聯元素的這種屬 性差異就不成爲差異了。比如，我們完全可以把內聯元素cite加上
display:block這樣的屬性，讓他也有每次都從新行開始的屬性。
可變元素的基本概念就是他需要根據上下文關係確定該元素是塊元素或者內聯元素。可
變元素還是屬於上述兩種元素類別，一旦上下文關係確定了他的類別，他就要遵循塊元
素或者內聯元素的規則限制。大致的元素分類見全文。
關於inline element的中文叫法，有多種內聯元素、內嵌元素、行內元素、直進式元素。
基本上沒有統一的翻譯，愛怎麼叫怎麼叫吧。另外提到內聯元素，我們會想到有個
display的屬性是display:inline;這個屬性能夠修復著名的IE雙倍浮動邊界問題。
塊元素(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)
* a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code -
計算機代碼(在引用源碼的時候需要)
* dfn - 定義字段
* em - 強調
* font - 字體設定(不推薦)
* i - 斜體
* img -
圖片* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格標籤
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義範例計算機代碼
* select - 項目
選擇* small - 小字體文本
* span - 常用內聯容器，定義文本內區塊
* strike - 中劃線
* strong - 粗體強調
* sub - 下標
* sup - 上標
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變量
可變元素
可變元素爲根據上下文語境決定該元素爲塊元素或者內聯元素。
* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區塊(map)
* object - object對象
* script - 客戶端腳本