詳解css display屬性中常見的四個屬性值用法（程式碼實例）-css教學-PHP中文網

首頁

web前端

css教學

詳解css display屬性中常見的四個屬性值用法（程式碼實例）

青灯夜游

Sep 07, 2018 pm 02:00 PM

我們在進行網頁前端開發的時候，為了讓網站在視覺上顯得更加美觀，效果更加豐富，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 display屬性中常見的四個屬性值用法（程式碼實例）

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>

以上程式碼的效果圖如下：

詳解css display屬性中常見的四個屬性值用法（程式碼實例）

其中的span標籤寬高都顯示為30px。當我們把程式碼中的display:block去掉後，顯示的效果圖如下：

詳解css display屬性中常見的四個屬性值用法（程式碼實例）

顯然，當我們把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>

以上程式碼的效果圖如下：

詳解css display屬性中常見的四個屬性值用法（程式碼實例）