當前位置: 首頁IT技術(shù) → html的塊級元素與內(nèi)嵌元素詳細分析

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

更多

  舉例:

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

  

div1

  

div1

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

   div1

   div1

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

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

   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)嵌元素,不能再包含塊級元素,這幾個特殊的標簽是:

   h1-h6、p、dt。

  

—— 錯

  

—— 錯

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

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

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

  

—— 對

  

—— 對

  

—— 錯

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