淺談css的行內類型標簽和塊級標簽


常用標簽的行內類型標簽有:a、span、img;塊級標簽有:div、p、h1~6、ul、ol、li、dl、dt、dd。

行內類型標簽的特征:標簽的大小由標簽的內容決定,不能設置width和height,不會自動換行。

塊級標簽的特征:可以設置width和height,會自動換行。

行內類型標簽還有一個特點就是:在同一行上每個標簽之間有間隙。

a標簽的現象:

 

p標簽的現象:

 

img標簽的現象:

 

解決這一現象最簡單的辦法就是將兩個標簽寫在同一行。導致這一現象的原因還有待研究。

同樣是行內標簽,現在想給他們設置width和height,其中的一種方式就是給他們設置display:inline-block;但是這種方式也會導致和上面一樣的現象有間隙。

解決這一現象有兩種方式:1.將兩個標簽寫在同一行;2.不采用display的方式,采用浮動的方式。因為浮動也可以將行內類型轉換為塊級類型,而且沒有間隙。

塊級標簽,現在給他們設置display:inline-block;想讓他們都在同一行上,這種方式也會導致標簽之間有間隙,解決的兩種辦法同上。

也就是說當給行內標簽和塊級標簽設置display:inline-block這個屬性時,標簽之間都會出現間隙。

注意:給一個標簽同時設置display和float沒有任何意義。也就是說display和float不要混用。

設置元素的幾種類型:

display:inline;-------------------->將元素設置為行內類型,此時元素在同一行內,不會自動換行,不能設置width和height;

display:block;-------------------->將元素設置為塊級類型,此時元素自動換行,可以設置width和height;

diaplay:inline-block;------------>將元素設置為內聯塊(行內塊),此時元素在同一行內,不會自動換行,但是可以設置width和height;

display:none;--------------------->不占位隱藏。將元素隱藏,不顯示;

visibility: hidden;----------------->占位隱藏。將元素隱藏,但是元素還占用着那個位置。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM