常用標簽的行內類型標簽有:a、span、img;塊級標簽有:div、p、h1~6、ul、ol、li、dl、dt、dd。 行內類型標簽的特征:標簽的大小由標簽的內容決定,不能設置width和height,不會自動換行。 塊級標簽的特征:可以設置width和height,會自動換行。 行內類型標簽還有一 ...
常用標簽的行內類型標簽有: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;----------------->占位隱藏。將元素隱藏,但是元素還占用著那個位置。