首頁 >web前端 >css教學 >css中的display是什麼意思

css中的display是什麼意思

王林
王林原創
2020-11-16 17:57:3317372瀏覽

css中的display是用來規定應該產生的框的類型的屬性。對於html等文件類型,必須謹慎使用display屬性,否則可能會違反html中已經定義的顯示層次結構。

css中的display是什麼意思

屬性介紹:

display 屬性規定元素應該產生的框的類型。

對於 HTML 等文件類型,如果使用 display 不謹慎會很危險,因為可能違反 HTML 中已經定義的顯示層次結構。對於 XML,由於 XML 沒有內建的這種層次結構,所有 display 是絕對必要的。

(學習影片分享:css影片教學

常用屬性值:

  • none    此元素不會被顯示。   

  • block    此元素將顯示為區塊層級元素,此元素前後會帶有換行符號。   

  • inline    預設。此元素會被顯示為內聯元素,元素前後沒有換行符號。   

  • inline-block    行內區塊元素。 (CSS2.1 新增的值)    

  • list-item    此元素顯示為清單。   

  • run-in    此元素會依上下文顯示為區塊級元素或內聯元素。   

範例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>display属性的none属性值</title>
		<style type="text/css">
			body {
				background-color: #aaa;
			}
			.div {
				width: 400px;
				height: 60px;
				border: 1px solid;
				margin-top: 10px;
			}
			.none {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="div">元素1</div>
		<div class="div none">元素2</div>
		<div class="div">元素3</div>
	</body>
</html>

相關推薦:CSS教學

以上是css中的display是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn