跟大家講解下有關display block是什么意思？怎么用？，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說display block是什么意思？怎么用？，小編也收集到了有關display block是什么意思？怎么用？的相關資料，希望大家看到了會喜歡。
我們都知道display屬性中有一個block屬性值，那么這個display:block是什么意思呢？又能怎么用呢？本篇文章就來給大家來介紹一下display:block的意思及其用法，有需要的朋友可以參考一下。首先我們來看一下display:block是什么意思？
其實在css display屬性是什么意思？css中display屬性的詳解這篇文章中我們已經說過了display:block屬性的意思了，簡單的來說就是設置display:block就是將元素顯示為塊級元素。
看完了display:block的意思后，如果你還是不太了解，那么我們接著就往下看，看看display:block該怎么用？通過display:block的用法來更進一步的認識display:block的意思。
推薦手冊：CSS在線手冊display:block的用法：
對于所有的塊級元素來說都是不需要用display:block來定義的，因為塊級元素的默認屬性就是block；所以display:block比較常用于像是<a>和<span>等不是塊級元素的元素中，下面我們就來看看具體的示例：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> span{ width: 200px; height: 30px; } </style></head><body> <span style="background-color: red ">php中文網</span> <span style="background-color: red ">php中文網</span> <span style="background-color: red ">php中文網</span></body></html>上述代碼是沒有用display:block來定義的，效果如下：
從上面的效果圖可以很明顯的看到，對span設置寬高是沒有用的，而且內容都處于同一行，下面我們來看看用display:block定義會是怎樣的，代碼如下：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> span{ width: 200px; height: 30px; display: block; } </style></head><body> <span style="background-color: red ">php中文網</span> <span style="background-color: red ">php中文網</span> <span style="background-color: red ">php中文網</span></body></html>使用display:block的效果如下：
上述效果可以很明顯看到對寬高設置有效了并且也都獨占于一行。
相關文章推薦：1.css中display如何使用 2.img標簽設置display:block屬性時寬度無法設定為100%的解決辦法 相關視頻推薦：1.CSS視頻教程-玉女心經版看完了上面所介紹的內容，現在對于display:block是不是有了更深的理解了呢，更多display:block屬性的相關知識大家可以參考php中文網的css學習手冊。
以上就是display block是什么意思？怎么用？的詳細內容，更多請關注php中文網其它相關文章！
來源：php中文網