當(dāng)前位置: 首頁(yè)IT技術(shù) → html的塊級(jí)元素與內(nèi)嵌元素詳細(xì)分析

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

更多

  舉例:

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

  

div1

  

div1

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

   div1

   div1

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

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

   span1

   span2

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

   span1 span1

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

  

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

   · 塊級(jí)元素 用來(lái)搭建網(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……

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

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

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

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

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

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

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

  

—— 對(duì)

   —— 對(duì)

  

—— 錯(cuò)

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

   h1-h6、p、dt。

  

—— 錯(cuò)

  

—— 錯(cuò)

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

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

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

  

—— 對(duì)

  

—— 對(duì)

  

—— 錯(cuò)

熱門評(píng)論
最新評(píng)論
發(fā)表評(píng)論 查看所有評(píng)論(0)
昵稱:
表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
字?jǐn)?shù): 0/500 (您的評(píng)論需要經(jīng)過(guò)審核才能顯示)