溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css中display屬性是什么意思

發(fā)布時間：2022-03-02 11:46:38 來源：億速云 閱讀：218 作者：小新 欄目：web開發(fā)

這篇文章主要為大家展示了“css中display屬性是什么意思”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“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的比較可以發(fā)現(xiàn)，圖1中因為設(shè)置了display:block屬性，a中元素塊能顯示寬高以及內(nèi)外邊距設(shè)置。而圖2中只是把displayblock屬性去掉，就導致全部元素塊不能設(shè)置寬高。

　　也就是說displayblock屬性可以將行內(nèi)元素設(shè)置為塊級元素，隨后設(shè)置它的寬高和上下左右的內(nèi)外邊距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可以發(fā)現(xiàn)，我們在給a設(shè)置了display:none;屬性后，其所有元素就隱藏了不會顯示出來。所以顯然決定display隱藏顯示的屬性值就是none屬性。displaynone通常會被用在導航欄一二級欄目的設(shè)計上。

　　三、cssdisplayinline屬性介紹

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>cssdisplay:inline屬性實例</title>

　　<style>

　　p{display:inline}

　　</style>

　　</head>

　　<body>

　　<p>p標簽是塊級元素。</p>

　　<p>此時顯示為內(nèi)聯(lián)元素，不換行。</p>

　　</body>

　　</div>

　　</body>

　　</html>
css中display屬性是什么意思

以上是“css中display屬性是什么意思”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手