自上而下被分成一行行的元素就是指區塊層級元素，而在每行中按照自左至右的順序排放的元素稱為行內元素（有很多種叫法，這裡只取一種）：
| 常見的區塊層級元素 | 常見的行內元素 |
| 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 - 非排序列表 |
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 - 定義變數 |
我們可以使用display屬性改變元素的類型，設定dispaly為block使得行內表現的像區塊層級元素一樣，設定display為inline使得區塊層級元素表象的和行內元素一樣；還可以通過把 display 設定為 none，讓產生的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不佔用文檔中的空間。
Position屬性規定元素的定位類型;
| 值 | 描述 |
|---|---|
| absolute | 產生絕對位置的元素，相對於 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| fixed | 產生絕對位置的元素，相對於瀏覽器視窗進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| relative | 產生相對定位的元素，相對於其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 |
| static | 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
幾種定位：
1、普通流定位：除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。
2、浮動定位：浮動元素可以向左或者向右，知道它的外邊緣碰到包含框或者另一個浮動框的邊框為止；浮動元素不佔任何正常文檔流空間，而浮動元素的定位還是基於正常的文檔流，然後從文檔流中抽出並儘可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出後，仍然在文檔流中的其他元素將忽略該元素並填補他原先的空間(即不保留原佔位)，clear 屬性規定元素的哪一側不允許其他浮動元素。浮動元素會產生一個塊級框，而不論它本身是何種元素；且要指明一個寬度，否則它會儘可能地窄；另外當可供浮動的空間小於浮動元素時，它會跑到下一行，直到擁有足夠放下它的空間。。
3、相對定位： 即相對於元素在文檔流中位置進行位移。 但保留原佔位，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框；
4、絕對位置：即完全脫離文檔流， 相對於position屬性非static值(即已經定位)的最近父級元素進行位移，可以覆蓋頁面上的其他元素；
5、固定定位：它可以讓HTML元素脫離文檔流固定在瀏覽器的某個位置。
6、Z-index:控制元素的擺放順序，如果設定其值為-1，可被用於將在一個元素放置於另一元素之後；
小結：1：相對定位是“相對於”元素在文檔中的初始位置，而絕對位置是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。父容器使用相對定位，子項目使用絕對位置後，這樣子項目的位置不再相對於瀏覽器左上方，而是相對於父視窗左上方，相對定位和絕對位置需要配合top、right、bottom、left使用來定位具體位置，這四個屬性只有在該元素使用定位後才生效，其它情況下無效。另外這四個屬性同時只能使用相鄰的兩個，不能即使用上又使用下，或即使用左，又使用右；2：實現高度可變的布局；在布局的時候經常遇到的一個問題就是高度可變，尤其是中間內容部分需要可變：如下面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body> <div id="header"></div> <div id="content" style="border:solid 1px blue;background-color:green;"> <div id="left" style="float:left;border:solid 1px red;margin-left:3px;"> 左側 </div> <div id="middle" style="float:left;border:solid 1px blue;margin-left:3px;"> 中間 </div> <div id="right" style="float:left;border:solid 1px green;margin-left:3px;"> 右側 </div> </div><div id="footer"></div></body></html>
顯示效果：
，ID為content的層縮成了一條藍色的線（不是大家想象的被子項目給沖開），而他的子選元素則正常的飄向左側，如何使content層被沖開呢，就是把它的背景色展開呢，只要把也設定為浮動就可以了，設定為浮動之後該元素就會儘可能的窄，按照自己的需要制定寬度：為content設定浮動之後的如下：
這樣以來只要其內部的浮動的子項目高度變化就會影響到content的高度，從而實現高度可變的布局
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
