html的塊級元素與內嵌元素詳細分析

2013/1/7 1:01:34  出處：本站原創   人氣：124次    字號：小  中  大

　　舉例：

　　 請把下面二行代碼放進body標簽里：

　　 瀏覽器的呈現效果：

　　 div1

　　 div1

　　這二個div占據了二行空間，叫做塊級元素(block)。

　　 再把下面二行代碼也放進body標簽里：

　　 span1

　　 span2

　　瀏覽器的呈現效果：

　　 span1 span1

　　這兩個span并列在一行，叫做內聯元素(inline)。

　　塊級元素和內嵌元素的區別：

　　 · 塊級元素 用來搭建網站架構、布局、承載內容，如：div、ul、li、dl、dt、dd、h1-h6、p、address……

　　 內聯元素 用在文本之中的某一行的修飾，如：a、span、strong、sub、sup、img……

　　 · 塊級元素是盒子，盒子是有寬高的，即不管里面有多少東西，外部就可以設置其寬高。

　　 內聯元素是袋子，其寬高由里面的東西撐起來的。

　　 · 塊級元素和內嵌元素之間互相轉換，轉換的代碼如下：

　　 display:block; /* 轉成塊元素 */

　　 display:inline; /* 轉成內嵌元素 */

　　· 塊級元素和內嵌元素對于CSS的調用規則：

　　 1. 塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素：

　　 —— 對

　　 2. 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標簽是：

　　 h1-h6、p、dt。

　　 3. li內可以包含div標簽/父級ul或者是ol

　　 li和div標簽都是裝載內容的容器，地位平等，沒有級別之分。

　　 4. 塊級元素與塊級元素并列、內嵌元素與內嵌元素并列：