Zi 字媒體
2017-07-25T20:27:27+00:00
此篇文章瀏覽量：
742
display屬性決定了html元素的顯示特性，常見設定值有：inline、block、inline-block、none，這幾個是比較重要且常用的。
將依以下順序介紹：
1、如何區分html標籤是屬於行內元素(inline)或區塊元素(block)
2、inline-block
3、display:none與visibility:hidden的差異
一、如何區分html標籤是屬於行內元素或區塊元素
只要你將兩個相同元素寫下來後，看第二個會不會段行，就可以知道該元素是屬於inline行內元素或是block區塊元素了，例：
.theDiv{
width:200px;
border:1px solid black;
}
.para{
border:1px solid black;
}
.link{
border:1px solid red;
}
這是段落一
這是段落二
這是連結一
這是連結二
顯示如圖，可見是block區塊元素(因為會斷行)、是inline行內元素(在同一行內繼續顯示，沒有斷行)：
另外要注意的是，當一個元素是inline行內元素時，就無法使用margin-top、margin-bottom、height，就算你設定了，其實也不會有任何效果喔。當然你可以將改成區塊元素(display:block)，這樣它就擁有block區塊元素的特性(會斷行、可設定margin-top、margin-bottom、height)。
二、inline-block
例如以上範例的元素，我們希望它不要斷行，但能擁有block區塊元素的特性，只要將它設定成display:inline-block這個行內區塊元素即可。例：
.link{
border:1px solid red;
display: inline-block; /* 新增這行，設定行內區塊元素(inline-block) */
margin-top:100px; /* 這增這行，這時設定margin-top就會有其效果了 */
}
三、display:none與visibility:hidden的差異
以上的.para修改成以下：
.para{
border:1px solid black;
display:none; /* 新增這行 */
}
顯示如圖：(會發現消失了，且連結的部份會往上移取代原先的位置)
若將.para修改成以下：
.para{
border:1px solid black;
visibility: hidden; /* 新增這行 */
}
顯示如圖：(會發現雖然消失了，但仍”佔位”原來的位置)
參考資料：
htmldog：Display
如果文章對您有幫助，請您不吝分享，
這將是我繼續寫下去的原動力啊！感謝。
若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。
Facebook
Twitter
寫了
5860316篇文章，獲得
23313次喜歡