文檔流
將表單自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文檔流.
每個非浮動區塊層級元素都獨佔一行, 浮動元素則按規定浮在行的一端. 若當前行容不下, 則另起新行再浮動.
內嵌元素也不會獨佔一行. 幾乎所有元素(包括塊級,內聯和列表元素)均可產生子行, 用於擺放子項目.
有三種情況將使得元素脫離文檔流而存在,分別是浮動,絕對位置, 固定定位. 但是在IE中浮動元素也存在於文檔流中(還讓我覺得這樣很合理><).
浮動元素不佔任何正常文檔流空間，而浮動元素的定位還是基於正常的文檔流，然後從文檔流中抽出並儘可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出後，仍然在文檔流中的其他元素將忽略該元素並填補他原先的空間。
浮動概念讓人迷惑根源在於瀏覽器對理論的解讀造成的。只能說很多人以IE做標準，其實它不是。
基於文檔流, 我們可以很容易理解以下的定位元模式:
內嵌元素是什麼意思呢？什麼是塊層級元素。
《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>就是小容器，這樣一說你也許會在腦海中有一個初步的印象了吧，如果我們想在大容器中裝一些清水。但我也想在裡裝一些墨水怎麼辦？很簡單，我們把小容器拿出來裝上墨水然後放入大容器裡的清水中不就成了嗎。
我在舉個簡單的一個實際例子吧：比如
我想用CSS定義字母c的樣式，因此我們就可以用到<span>了。
< W3C標準< span> <span>www.51ini.com<>
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
