CSS 尺寸 (Dimension) 实例
CSS 尺寸属性
CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。
属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。
#############
1.使用像素值设置图像的高度
本例演示如何使用像素值设置元素的高度。
<style type="text/css">
img.normal{
height:auto
}
img.big{
height:160px
}
img.small{
height:30px
}
</style>
</head>
<body>
<img class="normal" src="eg_smile.gif" />
<br />
<img class="big" src="eg_smile.gif" />
<br />
<img class="small" src="eg_smile.gif" />
</body>
2.使用百分比设置图像的高度
本例演示如何使用百分比值来设置元素的高度。
<style type="text/css">
img.normal{
height:auto
}
img.big{
height: 50%;
}
img.small{
height:10%;
}
</style>
</head>
<body>
<img class="normal" src="eg_smile.gif" />
<br />
<img class="big" src="eg_smile.gif" />
<br />
<img class="small" src="eg_smile.gif" />
</body>
3.使用像素值来设置元素的宽度
本例演示如何使用像素值来设置元素的宽度。
<style type="text/css">
img{
width:300px;
}
</style>
</head>
<body>
<img src="eg_smile.gif">
</body>
4.使用百分比来设置元素的宽度
本例演示如何使用百分比值来设置元素的宽度。
<style type="text/css">
img{
width:50%;
}
</style>
</head>
<body>
<img src="eg_smile.gif">
</body>
5.设置元素的最大高度
本例演示如何设置一个元素的最大高度。
<style type="text/css">
p{
max-height: 10px;
}
</style>
</head>
<body>
<p>这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。</p>
<img src="eg_smile.gif" />
6.使用像素值来设置元素的最大宽度
本例演示如何使用像素值来设置元素的最大高度。
<style type="text/css">
p{max-width:300px}
</style>
</head>
<body>
<p>这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p>
</body>
7.使用像素值来设置元素的最大宽度
本例演示如何使用像素值来设置元素的最大高度。
p
{
max-width: 300px
}
8.使用百分比来设置元素的最大宽度
本例演示如何使用百分比值来设置元素的最大高度。
p
{
max-width: 50%
}
9.使用像素值来设置元素的最小高度
本例演示如何使用像素值来设置元素的最小高度。
p
{
min-height: 100px
}
10.使用像素值来设置元素的最小宽度
本例演示如何使用像素值来设置元素的最小宽度。
p
{
min-width: 1000px
}
11.使用百分比来设置元素的最小宽度
本例演示如何使用百分比值来设置元素的最小宽度。
<style type="text/css">
p
{
min-width: 200%
}
</style>
</head>
<body>
<p>这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。</p>
<img src="/i/eg_smile.gif" />
12.使用百分比设置行间距
本例演示如何使用百分比值来设置段落中的行间距。
<style type="text/css">
p.small {line-height:90%;}
p.big {
line-height: 200%;}
</style>
</head>
<body>
<p>这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 110% 到 120%。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>
<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>
<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>
</body>
13.使用像素值设置行间距
本例演示如何使用像素值来设置段落中的行间距。
<style type="text/css">
p.small {line-height:10px;}
p.big {
line-height: 30px;}
</style>
14.使用数值来设置行间距
本例演示如何使用一个数值来设置段落中的行间距。
<style type="text/css">
p.small {line-height:0.5}
p.big {
line-height: 2}
</style>
