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) 实例总结
