[size=xx-small][align=center]html布局之塊級元素和行內元素[/align][/size]
1.1布局之css display屬性
display屬性規定元素應該生成的框的型別。
語法1、常用
display:inline;
將元素設定為內聯物件。對其設定屬性height和width是沒有用的，致使它變寬變大的原因是內部元素的『寬高+padding『。display:inline，能夠修復著名的ie雙倍浮動邊界問題。
display:block;
將元素設定為塊物件。可以對其設定寬高，但是它的實際寬高是『本身寬高+padding『。
display:inline-block;
將元素設定為兼顧了兩者的物件，既像行內元素一樣流動布局，又像block元素一樣有自己的padding margin等。
display:none;
刪除元素本該顯示的空間,使生成的元素不顯示，不占用文件中的空間。但如果使用css visibility屬性設定為visibility: hidden的話，元素佔據的空間是會保留的。
[b]注意：css visibility屬性指定是否顯示乙個元素生成的元素框。這意味著元素仍佔據其本來的空間，不過可以完全不可見。[/b]
2、其他
display:list-item; 元素會作為列表顯示。
display:run-in; 元素會根據上下文作為塊級元素或內聯元素顯示。
display:compact; ss 中有值 compact，不過由於缺乏廣泛支援，已經從 css2.1 中刪除。
display:marker; ss 中有值 marker，不過由於缺乏廣泛支援，已經從 css2.1 中刪除。
display:table; 元素會作為塊級**來顯示（類似table），**前後帶有換行符。
display:inline-table; 元素會作為內聯**來顯示（類似table），**前後沒有換行符。
display:table-row-group; 元素會作為乙個或多個行的分組來顯示（類似tbody）。
display:table-header-group; 元素會作為乙個或多個行的分組來顯示（類似thead）。
display:table-footer-group; 元素會作為乙個或多個行的分組來顯示（類似tfoot）。
display:table-row;此元素會作為乙個**行顯示（類似 tr ）。
display:table-column-group;此元素會作為乙個或多個列的分組來顯示（類似 colgroup ）。
display:table-column; 元素會作為乙個單元格列顯示（類似 col ）。
display:table-cell; 元素會作為乙個**單元格顯示（類似 td 和 th）。
display:table-caption; 元素會作為乙個**標題顯示（類似 caption）。
1.2 塊級元素和內聯元素
塊元素(block element)一般是其他元素的容器元素，能容納其他塊元素或內聯元素。內聯元素(inline element)也叫內嵌元素或行內元素，一般都是基於語義級(semantic)的基本元素。內聯元素只能容納文字或者其他內聯元素。
通過修改屬性display的值，可以改變元素的型別。
1.2.1塊級元素
「塊級元素」對應的屬性值是block，會生成乙個元素框，（預設地）它會填充其父級元素的內容，旁邊不能有其他元素。換句話說，他在元素框之前和之後生成了「分隔」符。
塊級元素的特點：
1、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定乙個寬度。
2、每個塊級元素總是從新的一行開始，並且其後的元素也另起一行。
3、盒子模型涉及的所有屬性都可以被修改。如元素的高度、寬度、行高以及頂和底邊距都可設定。
4、可以容納內聯元素和其他塊元素。
[b]注意：沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css後，便可以改變這種html預設的布局模式，把塊元素擺放到想要的位置上。[/b]
1.2.2內聯元素
「內聯元素」對應的屬性值是inline。乙個行內元素只佔據它對應標籤的邊框所包含的空間。即元素的寬和高是隨標籤裡的內容而變化。並且內聯元素是在乙個文字行內生成元素框，而不會打斷這行文字，不會在它本身之前或之後生成「分隔符」，所以可以出現在另乙個元素的內容中，而不會破壞其顯示。
內聯元素的特點：
1、在塊級元素裡，且只會佔據自己內容部分的空間。
2、行內元素在同一行，不能在前後元素之間生成空行。
3、元素的高度、寬度、行高及頂部和底部邊距不可設定。
4、只能容納文字或者其他內聯元素。
1.2.3塊元素與內聯元素的區別
1、格式區別
塊元素，總是在新行上開始；內聯元素，和其他元素都在一行上。
2、內容區別
內聯元素，只能容納文字或者其他內聯元素；塊元素，能容納其他塊元素或內聯元素。這種結構上的包含繼承區別可以使塊級元素建立比行內元素更」大型「的結構。
3、屬性區別
塊元素中高度，行高以及頂和底邊距都可控制；內聯元素中高，行高及頂和底邊距不可改變。
[b]注意：上述區別，指的是預設情況下的，不包括css的刻意控制。也就是說當使用css控制時，塊元素和內聯元素的屬性差異會越來越小。[/b]
1.3可變元素
可變元素是根據上下文關係確定該元素是塊元素或者內聯元素。可變元素還是屬於上述兩種元素類別，一旦上下文關係確定了類別，就要遵循塊元素或者內聯元素的規則限制。
附：html中的塊元素(block element)和內聯元素(inline element)分類明細
塊級元素列表
定義位址
定義**標題
定義列表中定義條目
定義文件中的分割槽或節
定義列表
定義列表中的專案
定義乙個框架集
建立 html 表單
定義最大的標題
定義副標題
定義標題
定義標題
定義標題
定義最小的標題
建立一條水平線
元素為 fieldset 元素定義標題
標籤定義列表專案
為那些不支援框架的瀏覽器顯示文字，於 frameset 元素內部
定義在指令碼未被執行時的替代內容
定義有序列表
定義無序列表
標籤定義段落
定義預格式化的文字
標籤定義 html **
標籤**主體（正文）
**中的標準單元格
定義**的頁尾（腳注或表注）
定義表頭單元格
標籤定義**的表頭
定義**中的行
行內元素列表
標籤可定義錨
表示乙個縮寫形式
定義只取首字母縮寫
字型加粗
可覆蓋預設的文字方向
大號字型加粗
換行引用進行定義
定義計算機**文字
定義乙個定義專案
定義為強調的內容
斜體文字效果
輸入框定義鍵盤文字
標籤為 input 元素定義標註（標記）
定義短的引用
定義樣本文字
建立單選或多選選單
呈現小號字型效果
組合文件中的行內元素
語氣更強的強調的內容
定義下標文字
定義上標文字
多行的文字輸入控制項
打字機或者等寬的文字效果
定義變數
可變元素素列表
按鈕定義文件中已被刪除的文字
建立包含另外乙個文件的內聯框架（即行內框架）
標籤定義已經被插入文件中的文字
客戶端影象對映（即熱區）
object物件
客戶端指令碼
HTML行內元素 塊級元素 行內塊級
html標籤按照元素種類可以分為行內元素 display inline 塊級元素 display block 和行內塊級元素 display inline block 三種。了解元素種類有利於，我們進行css布局及屬性的使用。也叫內聯元素或內嵌元素，只能容納文字或其他內聯元素。預設特點 示例 關關雎...
HTML 塊級元素和行內元素
行內內容是說由行內元素組成的內容，行內元素大家都知道吧，比如 span 元素，iframe元素和元素樣式的display inline的都是行內元素。例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。塊級內容跟則是由塊級元素構成，div 是最常用的塊級元素，元素樣式的display blo...
html塊級元素和行內元素
塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊，它只能用來容納其他塊元素。如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的預設布局模式，把塊元素擺放到你想要 的位置上去。而不...