html的塊級元素與內(nèi)嵌元素詳細(xì)分析

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

　　舉例：

　　 請把下面二行代碼放進(jìn)body標(biāo)簽里：

　　 瀏覽器的呈現(xiàn)效果：

　　 div1

　　 div1

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

　　 再把下面二行代碼也放進(jìn)body標(biāo)簽里：

　　 span1

　　 span2

　　瀏覽器的呈現(xiàn)效果：

　　 span1 span1

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

　　塊級元素和內(nèi)嵌元素的區(qū)別：

　　 · 塊級元素 用來搭建網(wǎng)站架構(gòu)、布局、承載內(nèi)容，如：div、ul、li、dl、dt、dd、h1-h6、p、address……

　　 內(nèi)聯(lián)元素 用在文本之中的某一行的修飾，如：a、span、strong、sub、sup、img……

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

　　 內(nèi)聯(lián)元素是袋子，其寬高由里面的東西撐起來的。

　　 · 塊級元素和內(nèi)嵌元素之間互相轉(zhuǎn)換，轉(zhuǎn)換的代碼如下：

　　 display:block; /* 轉(zhuǎn)成塊元素 */

　　 display:inline; /* 轉(zhuǎn)成內(nèi)嵌元素 */

　　· 塊級元素和內(nèi)嵌元素對于CSS的調(diào)用規(guī)則：

　　 1. 塊元素可以包含內(nèi)聯(lián)元素或某些塊元素，但內(nèi)聯(lián)元素卻不能包含塊元素，它只能包含其它的內(nèi)聯(lián)元素：

　　 —— 對

　　 2. 有幾個特殊的塊級元素只能包含內(nèi)嵌元素，不能再包含塊級元素，這幾個特殊的標(biāo)簽是：

　　 h1-h6、p、dt。

　　 3. li內(nèi)可以包含div標(biāo)簽/父級ul或者是ol

　　 li和div標(biāo)簽都是裝載內(nèi)容的容器，地位平等，沒有級別之分。

　　 4. 塊級元素與塊級元素并列、內(nèi)嵌元素與內(nèi)嵌元素并列：