從塊級元素和內聯元素淺談標籤的嵌套規則

從一個問題說起吧------------div能不能放在p標籤裏面???

首先還是一個老概念

  • 塊級元素---h1,h2,h3,h4,h5,h6,hr,div,fieldset,form,dl,address,ol,p,table,ul,pre等常見
  • 內聯元素---a,b,br,em,i,img,input,strong,textarea,span,label等常見

 

他們兩個的區別

 

  • 塊級元素一般用來搭建網站架構、佈局、承載內容
  • 內聯元素一般用來在網站內容中的某些細節或者部位,用以“強調、區分樣式、上標、下標、錨點”等等。
  • 它們可以互相轉換。display:inline|block
  • 塊級元素的特點:每一個塊級元素都識從一個新行開始顯示,其後的元素需要另起一行

CSS權威指南上-------------

 

任何不是塊級元素的可見元素都是內聯元素。

 

好了 簡單地說了一下塊級元素和內聯元素,下面我們開始我們的重點-----嵌套規則

 

  1. 塊級元素可以包含內聯元素或某些塊級元素,但內聯元素不能包含塊級元素,它只能包含其它內聯元素。
  2. 塊級元素不能放在p裏面
  3. 有幾個特殊的塊級元素只能包含內聯元素,不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
  4. li內可以包含div
  5. 塊級元素與塊級元素並列、內聯元素與內聯元素並列。(錯誤的:<div><h2></h2><span></span></div>)

最後附上圖----來源於網絡(感謝原作者)

 

點擊打開鏈接

 點擊打開鏈接

CSS文檔流與塊級元素和內聯元素

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章