css的display屬性是我們在網頁開發中經常需要用到的一個屬性,今天的這篇文章就帶大家來深入了解一下什麼是display屬性, 有需要的朋友可以看一看。
首先我們來看css display屬性的定義
css display屬性的定義是可以隱藏頁面元素或顯示出來,也可以將元素強制改成區塊級元素或內嵌元素,在頁面佈局和JavaScript特效中常用到display屬性。
css display屬性中最常用的屬性值有四個,分別是block、inline-block、inline和none。
下面我們來詳細解析一下這四個display屬性值。
在介紹這四個屬性值之前,我們要先了解一下區塊級元素和行內元素,大家可以參考這兩篇文章:http://www.php. cn/css-tutorial-409377.html和http://www.php.cn/css-tutorial-409376.html在這裡就不多說了,我們就直接來看display屬性常用的四個屬性值的介紹。
1、display的block屬性值(display:block)
設定元素為區塊狀元素,如果不指定寬高,預設會繼承父元素的寬度,並且獨佔一行,即使寬度有剩餘也會獨佔一行,高度一般以子元素撐開的高度為準,當然也可以自己設定寬度和高度。
我們來看一個範例:
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> a { background: lightblue; width: 300px; display: block; } </style> </head> <body> <div> <a href="http//:www.php.cn">php中文网</a> <a href="http//:www.php.cn">php中文网</a> <a href="http//:www.php.cn">php中文网</a> </div> </body> </html>
display的block屬性值設定效果如下:
##2、display的inline屬性值(display:inline)
內容撐開寬度,不會獨佔一行,不支援寬高,程式碼換行會被解析成空格。 inline屬性值的範例:<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div{ background: lightblue; } li{ display: inline; } </style> </head> <body> <div> <li><a href="http//:www.php.cn">php中文网</a></li> <li><a href="http//:www.php.cn">php中文网</a></li> <li><a href="http//:www.php.cn">php中文网</a></li> </div> </body> </html>
display的inline屬性值設定效果如下:
##3、display的inline-block屬性值(display:inline-block)#不設定寬度時,內容撐開寬度;不會獨佔一行,支援寬高,程式碼換行被解析成空格。總之,將物件呈現為inline,但是物件的內容以block呈現,使其既具有block的寬度高度特性又具有inline的同儕特性。
4、display的none屬性值(display:none)#將元素設為none的時候既不會佔據空間,也無法顯示,相當於該元素不存在;此屬性可以用來改善重排與重繪。
這篇文章到這裡就全部結束了,關於display屬性中其他屬性值的介紹大家可以參考php中文網的
css學習手冊以上是css display屬性是什麼意思? css中display屬性的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!