在基礎1中,我詳細講了css的常見屬性,幾種不同的選擇器,在此基礎之上我們來進一步地認識它們的特性以便更好地學習和掌握相關開發技能。 HTML標籤的分類 在講標籤分類的時候,我們作為初學者在剛使用標籤的時候會發現有些屬性在一些標籤上不起作用,比如寬、高、水平居中等,其實這個屬性的使用只有在區塊級標籤上使用才會起作用。個人認為這也是初學者非常容易忽略的地方,所以我就把它記下來! 首先我們可以依照顯示的不同將HTML標籤分為:區塊級標籤,行內標籤,行內區塊標籤;現對其分別介紹。 區塊級標籤 特點:獨佔一行,對高度、寬度、行高以及頂和底邊距都可設定的屬性值生效;如果不給寬度,區塊級元素就預設為瀏覽器的寬度,即就是100%寬; 典型的區塊級標籤有: ,h系列, ,, ,< ;p> ,, 行內標籤 特點:可以多個標籤存在一行,不能直接設定行內標籤的高度、寬度、行高以及頂和底邊距,完全靠內容撐開寬高! 典型的行內標籤有:,,,,,,,,,, ;, 行內區塊標籤 : 特點:結合的行內和區塊級的有點,不僅可以對寬高屬性值生效,還可以多個標籤存在一行顯示; 典型的行內標籤有:, 那麼有的同學就會想了,難道我就不可以控制span或者font的寬高了嗎?可以的,那麼我們這次拋開浮動和定位不說,就說透過display屬性來將它們互相轉換: 1、區塊級標籤轉換為行內標籤:display: inline; 2、行內標籤轉換為區塊級標籤:display:block; 3、轉換為行內區塊標籤:display:inline-block; 只要給對應的標籤使用這個display這個屬性,取對應的值,就可以將顯示模式互相轉換。 下面請看如下範例: 1:將行內標籤轉換為區塊級標籤 行内标签转块级标签 a{ width: 200px; height: 200px; background-color: red; display: block; } 百度 登入後複製運行結果如下;點紅色任一區域都能實現跳到百度,所以他可以實現擴大連結範圍。 2:將行內標籤轉換為行內區塊標籤 上面已經講過行內區塊級標籤和區塊級標籤的區別,我在強調一遍:區塊級標籤和行內區塊級標籤都是可以設定長和寬的,但區塊級標記當你設定好後它是自動換行的,你不能在這一行再放其它東西,而行內區塊級標籤在同一行中可以放置多個行內標籤,具體我有案例來解釋。 块级和行内块级 a{ width: 100px; height: 100px; background-color: green; display: inline-block; } div{ width:100px; height:100px; background-color: red; margin-top:10px; /* margin-top是来设置上下两个块的上下间距,关于盒子下一节我单独来讲*/ } 百度 百度一下 我是div1 我是div2 登入後複製運作結果: 3.將區塊級標籤轉換為行內標籤 块级标签转行内标签 div{ width: 100px; height: 100px; background-color: red; display: inline; } 谷歌 https://www.google.com 登入後複製效果如下: 有關塊級標籤,行內標籤,行內塊級標籤我就先寫到這裡,也歡迎大家看了之後能夠多指點,感謝。 更多css塊級標籤,行內標籤,行內塊標籤的轉換相關文章請關注PHP中文網!