詳解css display屬性中常見的四個屬性值用法（程式碼實例）
- 青灯夜游原創
- 2018-09-07 14:00:505419瀏覽
我們在進行網頁前端開發的時候，為了讓網站在視覺上顯得更加美觀，效果更加豐富，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>以上程式碼的效果圖如下：
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>以上程式碼的效果圖如下：
三：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屬性中常見屬性值用法的具體介紹，其中包含none、block、inline、inline-block的具體使用範例。具有一定的參考價值，希望對有需要的朋友有所幫助!以上是詳解css display屬性中常見的四個屬性值用法（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn