溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css的display屬性是什么意思，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
首先我們來看css display屬性的定義
css display屬性的定義是可以將頁面元素隱藏或者顯示出來，也可以將元素強制改成塊級元素或內聯元素，在頁面布局和JavaScript特效中常常用到display屬性。
css display屬性中最常用的屬性值有四個，分別是block、inline-block、inline和none。
下面我們來詳細解析一下這四個display屬性值。
1、display的block屬性值（display:block）
設置元素為塊狀元素，如果不指定寬高，默認會繼承父元素的寬度，并且獨占一行，即使寬度有剩余也會獨占一行，高度一般以子元素撐開的高度為準，當然也可以自己設置寬度和高度。
我們來看一個例子：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!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屬性值的示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!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的時候既不會占據空間，也無法顯示，相當于該元素不存在；該屬性可以用來改善重排與重繪。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“css的display屬性是什么意思”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
