龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

CSS教程之:CSS尺寸

时间:2009-12-21 11:47来源:未知 作者:admin 点击:
分享到:
在前面的教程中,我们已经学习过如何使用CSS控制元素的margin和padding, 在这一章中,我们将学习如何控制元素的尺寸。 下面的几个CSS属性可以用于控制元素尺寸: height : 设置元素高度
在前面的教程中,我们已经学习过如何使用CSS控制元素的margin和padding, 在这一章中,我们将学习如何控制元素的尺寸。

下面的几个CSS属性可以用于控制元素尺寸:
height : 设置元素高度
width : 设置元素宽度
line-height : 设置文本行高度
max-height : 设置元素最大高度
min-height : 设置元素最小高度
max-width : 设置元素最大宽度
min-width : 设置元素最小宽度

Height与width属性:
height属性可以设置元素高度,width属性可以设置元素宽度。
它们的值可以是指定长度,百分比,或者是auto.

例子:
<p style="width:400px; height:100px;border:1px solid red;
             padding:5px; margin:10px;"
>
    This paragraph is 400pixels wide and 100 pixels high
</p>
line-height属性:
通过line-height属性,我们可以控制文本行的高度。它的值可以是指定长度,或者百分比。

例子:
<p style="width:400px; height:100px;border:1px solid red;
             padding:5px; margin:10px;line-height:30px;"
>
This paragraph is 400pixels wide and 100 pixels high
and here line height is 30pixels.This paragraph is 400 pixels
wide and 100 pixels high and here line height is 30pixels.
</p>
max-height 属性:
使用max-height属性,我们可以指定一个元素的最大高度。它的值可以是指定长度,百分比。

注意:IE6与Netscape7不支持此属性

例子:
<p style="width:400px; max-height:10px;border:1px solid red;
             padding:5px; margin:10px;"
>
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />
min-height属性:
通过min-height属性,我们可以指定元素的最小高度。它的值可以是指定长度,百分比。

注意:IE6与Netscape7不支持此属性

例子:
<p style="width:400px; min-height:200px;border:1px solid red;
             padding:5px; margin:10px;"
>
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />
max-width 属性:
通过max-width属性,可以控制元素的最大宽度。它的值可以是指定长度,百分比。

注意:IE6与Netscape7不支持此属性

例子:
<p style="max-width:100px; height:200px;border:1px solid red;
             padding:5px; margin:10px;"
>
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />
min-width 属性:
通过min-width属性,可以设置元素的最小宽度。它的值可以是指定长度,百分比。

注意:IE6与Netscape7不支持此属性

例子:
<p style="min-width:400px; height:100px;border:1px solid red;
             padding:5px; margin:10px;"
>
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />
精彩图集

赞助商链接