溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“css中display屬性是什么意思”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css中display屬性是什么意思”這篇文章吧。
首先我給大家列舉出cssdisplay常用的幾個值：none、block、inline、inline-block
接下來我們通過具體的代碼實例來一一詳解cssdisplay屬性用法。
一、cssdisplayblock屬性具體示例介紹
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>cssdisplay:block屬性實例</title>
<style>
*{padding:0;margin:0;list-style:none;}
ulli{float:left;}
a{
display:block;
width:30px;height:30px;
color:#fff;
background:green;margin:5px;
text-decoration:none;
text-align:center;
line-height:30px;
}
</style>
</head>
<body>
<divclass="demo">
<ul>
<li><ahref="">1</a></li>
<li><ahref="">2</a></li>
<li><ahref="">3</a></li>
<li><ahref="">4</a></li>
<li><ahref="">5</a></li>
</ul>
</div>
</body>
</html>
以上代碼通過瀏覽器訪問，效果如圖1：
eb43f3f17448da89e19b35d8d70e4b7.png
我們把a標簽中的display:block;屬性注釋掉，其效果如圖2：
1b897a81fdb8a9e72c12eec7d6c0f42.png
那么大家通過圖1和圖2的比較可以發現，圖1中因為設置了display:block屬性，a中元素塊能顯示寬高以及內外邊距設置。而圖2中只是把displayblock屬性去掉，就導致全部元素塊不能設置寬高。
也就是說displayblock屬性可以將行內元素設置為塊級元素，隨后設置它的寬高和上下左右的內外邊距padding和margin。可以通過這個屬性進而達到我們想要的效果。
二、cssdisplaynone屬性具體示例介紹
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>cssdisplay:none屬性實例</title>
<style>
*{padding:0;margin:0;list-style:none;}
ulli{float:left;}
a{
display:none;width:30px;height:30px;color:#fff;background:green;margin:5px;text-decoration:none;text-align:center;line-height:30px;}
</style>
</head>
<body>
<divclass="demo">
<p>a元素不會顯示出來</p>
<ul>
<li><ahref="">1</a></li>
<li><ahref="">2</a></li>
<li><ahref="">3</a></li>
<li><ahref="">4</a></li>
<li><ahref="">5</a></li>
</ul>
</div>
</body>
</html>
效果如下圖3：
ad0cb1f3cb1e3fd0fe8a8d9550f354a.png
從圖3可以發現，我們在給a設置了display:none;屬性后，其所有元素就隱藏了不會顯示出來。所以顯然決定display隱藏顯示的屬性值就是none屬性。displaynone通常會被用在導航欄一二級欄目的設計上。
三、cssdisplayinline屬性介紹
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>cssdisplay:inline屬性實例</title>
<style>
p{display:inline}
</style>
</head>
<body>
<p>p標簽是塊級元素。</p>
<p>此時顯示為內聯元素，不換行。</p>
</body>
</div>
</body>
</html>
以上是“css中display屬性是什么意思”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
