我們經(jīng)常在設(shè)計(jì)網(wǎng)站的導(dǎo)航部分的時(shí)候，如果想讓導(dǎo)航超鏈接hover顯示背景，但稍不注意，默認(rèn)的inline會(huì)讓你抓狂，因?yàn)閐isplay:inline會(huì)將超鏈接顯示為內(nèi)聯(lián)元素，即沒有寬和高的作用效果，這里無論你背景怎么設(shè)置，寬高都不會(huì)超出超鏈接的寬高范圍！所以我們可以使用 block 或 inline-block 來解決此問題！

display:block 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。
display:inline-block 行內(nèi)塊元素。（CSS2.1 新增的值）

當(dāng)我們?cè)?lt;a>標(biāo)簽里添加 display:block 或 display:inline-block 時(shí)，<a>標(biāo)簽也就有了塊元素的一些特性，此時(shí)我們?cè)O(shè)置<a>標(biāo)簽的寬高才會(huì)起作用，hover背景也才會(huì)有效果，不同的 是，display:block 會(huì)讓元素前后帶上換行符，所以如果想讓導(dǎo)航元素在一行內(nèi)顯示，則需要添加float屬性，完整的寫法如下：

<a href="#">block</a>

而display:inline-block 則不需要float屬性，因?yàn)樗谋旧砭褪切袃?nèi)塊元素，寫法如下：

<a href="#">block</a>

總結(jié)

以上是生活随笔為你收集整理的转：超链接a标签display属性的block和inline-block的用法说明的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。