免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

cssdisplay屬性如何使用

這篇文章主要介紹css display屬性如何使用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)是一家專業(yè)從事成都網(wǎng)站建設(shè)、成都網(wǎng)站制作的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)站制作公司,成都創(chuàng)新互聯(lián)依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開發(fā)服務(wù)！

                                                           我們在進(jìn)行網(wǎng)頁前端開發(fā)的時(shí)候，為了使網(wǎng)站在視覺上顯得更加美觀，效果更加豐富，css的強(qiáng)大屬性自然是功不可沒。那么這里就要提到 一個(gè)我們在網(wǎng)頁前端開發(fā)的時(shí)候常常使用的屬性，css display屬性。所有主流瀏覽器都支持 display 屬性。其次，我們都知道display 屬性規(guī)定元素應(yīng)該生成的框的類型。而在css display屬性中經(jīng)常被用到，也是最常見的幾種屬性值：none、block、inline、inline-blockt。

接下來我們就通過具體的代碼實(shí)例來一一詳解css display屬性中最常見的屬性值用法。

一：display ：none，設(shè)置元素不會顯示

<!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>數(shù)字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，設(shè)置元素不會顯示，而且會使元素現(xiàn)實(shí)的空間也不會保留下來。但有另外一個(gè) visibility: hidden， 是保留元素的空間的。詳細(xì)了解，看閱讀 css visibility屬性。

二：display:block， 將元素顯示為塊級元素

將元素顯示為塊級元素，元素前后會帶有換行符。設(shè)置為block后，元素可以設(shè)置width和height了。元素獨(dú)占一行。

<!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標(biāo)簽寬高都顯示為30px。當(dāng)我們把代碼中的display:block去掉后，顯示的效果圖如下：

css display屬性如何使用

顯然，當(dāng)我們把display:block去掉后，span的高度、寬度無法設(shè)置了。

span 標(biāo)簽是內(nèi)聯(lián)元素，不可設(shè)置元素高度、寬度及上下左右的內(nèi)外邊距padding和margin，但當(dāng)給 span 標(biāo)簽設(shè)置  display:block后，可以把內(nèi)聯(lián)元素轉(zhuǎn)換為塊狀元素，這樣就可以設(shè)置元素高度、寬度及上下左右的內(nèi)外邊距padding和margin。

三：display:inline，將元素顯示為內(nèi)聯(lián)元素

display的默認(rèn)屬性。將元素顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。我們知道內(nèi)聯(lián)元素是無法設(shè)置寬高的，所以一旦將元素的display 屬性設(shè)為 inline， 設(shè)置屬性height和width是沒有用的。此時(shí)影響它的高度一般是內(nèi)部元素的高度（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標(biāo)簽和div標(biāo)簽同為塊狀元素，本應(yīng)無法在同一行顯示;</p>
			<div>此時(shí)全為內(nèi)聯(lián)元素，不換行，在同一行顯示。</div>
		</div>
	</body>

</html>

以上代碼的效果圖如下：

css display屬性如何使用

四：inline-block，將元素顯示為行內(nèi)塊元素

行內(nèi)塊元素。這個(gè)屬性值融合了inline 和 block 的特性，可以結(jié)合inline 和 block來了解 inline-block，即是它既是內(nèi)聯(lián)元素，可以在同一行顯示，又可以設(shè)置width和height。

以上是css display屬性如何使用的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：cssdisplay屬性如何使用
網(wǎng)站鏈接：http://m.newbst.com/article32/gdodpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、小程序開發(fā)、定制開發(fā)、搜索引擎優(yōu)化、網(wǎng)站營銷、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化