溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹css中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">億速云</a>
<a href="http//:www.php.cn">億速云</a>
<a href="http//:www.php.cn">億速云</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">億速云</a></li>
<li><a href="http//:www.php.cn">億速云</a></li>
<li><a href="http//:www.php.cn">億速云</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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
