W3School-CSS 尺寸 (Dimension) 实例

CSS 尺寸 (Dimension) 实例

CSS 实例

• CSS 背景实例
• CSS 文本实例
• CSS 字体(font)实例
• CSS 边框(border)实例
• CSS 外边距 (margin) 实例
• CSS 内边距 (padding) 实例
• CSS 列表实例
• CSS 表格实例
• 轮廓（Outline)实例
• CSS 尺寸 (Dimension) 实例
• CSS 分类 (Classification) 实例
• CSS 定位 (Positioning) 实例
• CSS 伪类 (Pseudo-classes)实例
• CSS 伪元素 (Pseudo-elements)实例

---

01使用像素值设置图像的高度

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>01使用像素值设置图像的高度</title>
		<style type="text/css">
			img.normal {
				height: auto;
			}

			img.big {
				height: 160px;
			}

			img.small {
				height: 30px;
			}
		</style>
	</head>

	<body>
		<img class="normal" src="smile.gif">
		<br />
		<img class="big" src="smile.gif">
		<br />
		<img class="small" src="smile.gif">
	</body>

</html> 

---

02使用百分比设置图像的高度

<html>
	<head>
		<meta charset="utf-8">
		<title>02使用百分比设置图像的高度</title>
		<style type="text/css">
			img.normal {
				height: auto
			}

			img.big {
				height: 50%
			}

			img.small {
				height: 10%
			}
		</style>
	</head>

	<body>

		<img class="normal" src="smile.gif" />
		<br />
		<img class="big" src="smile.gif" />
		<br />
		<img class="small" src="smile.gif" />

	</body>

</html>

---

03使用像素值和百分比来设置元素的宽度

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>03使用像素值和百分比来设置元素的宽度</title>
		<style type="text/css">
			img.one {
				width: 300px;
			}

			img.two {
				width: 50%;
			}
		</style>
	</head>

	<body>
		<img class="one" src="smile.gif" />
		<br />
		<img class="two" src="smile.gif" />
	</body>

</html>

---

04设置元素的最大高度

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>04设置元素的最大高度</title>
		<style type="text/css">
			p {
				max-height: 10px;
			}
		</style>
	</head>

	<body>
		<p>
		我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。
		</p>
		<img src="444.jpg" />
	</body>

</html>

---

05使用像素值和百分比来设置元素的最大宽度

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>05使用像素值和百分比来设置元素的最大宽度</title>
		<style type="text/css">
			p.one {
				max-width: 300px;
			}

			p.two {
				max-width: 10%;
			}
		</style>
	</head>

	<body>
		<p class="one">我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。
			我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。
		</p>
		<br />
		<p class="two">我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。
			我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。
		</p>

	</body>

</html>

---

06使用像素值和百分比来设置元素的最小宽度

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>06使用像素值和百分比来设置元素的最小宽度</title>
		<style type="text/css">
			p.one {
				min-width: 3000px;
			}

			p.two {
				min-width: 200%;
			}
		</style>
	</head>

	<body>
		<p class="one">我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。
		我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。
		</p>
		<br />
		<p class="two">我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。
		我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。 我是一个段落。我是一个段落。我是一个段落。
		</p>

	</body>

</html>

---

07使用像素值来设置元素的最小高度

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>07使用像素值来设置元素的最小高度</title>
		<style type="text/css">
			p {
				min-height: 250px;
			}
		</style>
	</head>

	<body>
		<p>这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。
		</p>
		<img src="777.jpg" />
	</body>

</html>

---

08使用百分比,像素值，数值来设置行间距

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>08使用百分比,像素值，数值来设置行间距</title>
		<style type="text/css">
			p.small {
				line-height: 80%;
			}

			p.big {
				line-height: 200%;
			}

			p.small-px {
				line-height: 10px;
			}

			p.big-px {
				line-height: 50px;
			}

			p.small-num {
				line-height: 0.5;
			}

			p.big-num {
				line-height: 2;
			}
		</style>
	</head>

	<body>
		<p>
			这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%,大约是 20px,默认行高大约是 1。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
		</p>

		<p class="small">
			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
		</p>

		<p class="big">
			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
		</p>
		<p class="small-px">
			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
		</p>

		<p class="big-px">
			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
		</p>
		<p class="small-num">
			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
		</p>

		<p class="big-num">
			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
		</p>

	</body>

</html>

---

CSS 尺寸 (Dimension) 实例总结