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

css中的display是什麼意思

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

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中的display是什麼意思

相關文章