這篇文章主要介紹css display屬性如何使用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
我們在進行網頁前端開發的時候，為了使網站在視覺上顯得更加美觀，效果更加豐富，css的強大屬性自然是功不可沒。那么這里就要提到 一個我們在網頁前端開發的時候常常使用的屬性，css display屬性。所有主流瀏覽器都支持 display 屬性。其次，我們都知道display 屬性規定元素應該生成的框的類型。而在css display屬性中經常被用到，也是最常見的幾種屬性值：none、block、inline、inline-blockt。
接下來我們就通過具體的代碼實例來一一詳解css display屬性中最常見的屬性值用法。
一：display ：none，設置元素不會顯示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:none</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.demo{
width: 200px;
height: 200px;
margin:50px auto;
}
ul li {
float: left;
}
span {
width: 30px;
height: 30px;
color: #fff;
background: red;
margin: 5px;
text-align: center;
line-height: 30px;
}
.a1{
display: none;
}
</style>
</head>
<body>
<div class="demo">
<p>數字2不會顯示出來</p>
<ul>
<li>
<span>1</span>
</li>
<li>
<span class="a1">2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span>4</span>
</li>
<li>
<span>5</span>
</li>
</ul>
</div>
</body>
</html>以上代碼的效果圖如下：
display ：none，設置元素不會顯示，而且會使元素現實的空間也不會保留下來。但有另外一個 visibility: hidden， 是保留元素的空間的。詳細了解，看閱讀 css visibility屬性。
二：display:block， 將元素顯示為塊級元素
將元素顯示為塊級元素，元素前后會帶有換行符。設置為block后，元素可以設置width和height了。元素獨占一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:block</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.demo{
width: 500px;
height: 200px;
margin:50px auto;
}
ul li {
float: left;
}
span {
display:block;
width: 30px;
height: 30px;
color: #fff;
background: red;
margin: 5px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="demo">
<p>span元素定義了寬與高，寬與高都顯示為30px</p>
<ul>
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span>4</span>
</li>
<li>
<span>5</span>
</li>
</ul>
</div>
</body>
</html>以上代碼的效果圖如下：
其中的span標簽寬高都顯示為30px。當我們把代碼中的display:block去掉后，顯示的效果圖如下：
顯然，當我們把display:block去掉后，span的高度、寬度無法設置了。
span 標簽是內聯元素，不可設置元素高度、寬度及上下左右的內外邊距padding和margin，但當給 span 標簽設置 display:block后，可以把內聯元素轉換為塊狀元素，這樣就可以設置元素高度、寬度及上下左右的內外邊距padding和margin。
三：display:inline，將元素顯示為內聯元素
display的默認屬性。將元素顯示為內聯元素，元素前后沒有換行符。我們知道內聯元素是無法設置寬高的，所以一旦將元素的display 屬性設為 inline， 設置屬性height和width是沒有用的。此時影響它的高度一般是內部元素的高度（font-size）和padding。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:block</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.demo{
width: 1000px;
height: 200px;
margin:50px auto;
}
.demo p{
display:inline ;
color: #0081EF;
}
.demo div{
display:inline ;
color: #70DBDB;
}
</style>
</head>
<body>
<div class="demo">
<p>p標簽和div標簽同為塊狀元素，本應無法在同一行顯示;</p>
<div>此時全為內聯元素，不換行，在同一行顯示。</div>
</div>
</body>
</html>以上代碼的效果圖如下：
四：inline-block，將元素顯示為行內塊元素
行內塊元素。這個屬性值融合了inline 和 block 的特性，可以結合inline 和 block來了解 inline-block，即是它既是內聯元素，可以在同一行顯示，又可以設置width和height。
以上是css display屬性如何使用的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
