首頁 > 文章 > web前端 > css3中什麼屬性定義盒子高度

css3中什麼屬性定義盒子高度

青灯夜游原創: 2022-03-15 14:03:413273瀏覽

css3定義盒子高度的屬性：1、height屬性，可設定元素盒子的高度；2、max-height屬性，可設定元素盒子的最大高度；3、min-height屬性，可設定元素盒子的最小高度。

css3中什麼屬性定義盒子高度

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

盒子的佈局

把HTML中的元素看做是一個矩形的盒子（盛裝內容的的容器），每個容器都是由元素內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。

css3中什麼屬性定義盒子高度

css3中定義盒子高度的屬性：

#height屬性
##max -height屬性
min-height屬性

height屬性

height屬性可設定元素盒子的高度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p{
	background-color: #FFC0CB;
}
p.ex
{
	height:100px;
	width:100px;
}
</style>
</head>

<body>
<p class="ex">这个段落的高和宽是 100px.</p>
<p>这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本.</p>
</body>
</html>

css3中什麼屬性定義盒子高度

#max-height屬性##max-height屬性可設定元素盒子的最大高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p {
				max-height: 50px;
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<p>这一段的最大高度设置为50 px。这一段的最大高度设置为50 px。这一段的最大高度设置为50 px。这一段的最大高度设置为50 px。这一段的最大高度设置为50 px。这一段的最大高度设置为50
			px。这一段的最大高度设置为50 px。这一段的最大高度设置为50 px。</p>
	</body>
</html>

css3中什麼屬性定義盒子高度

#min-height屬性min-height屬性可設定元素盒子的最小高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p {
				min-height: 100px;
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<p>这段的最小高度设置为100 px。</p>
	</body>
</html>

css3中什麼屬性定義盒子高度相關推薦：《

html影片教學

》

以上是css3中什麼屬性定義盒子高度的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

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

上一篇：jquery怎麼查詢同級元素下一篇：jquery怎麼查詢同級元素

看更多