CSS 線上手冊
/ CSS 尺寸 (Dimension)
CSS 尺寸 (Dimension)
CSS 尺寸 (Dimension)
CSS 尺寸 (Dimension) 屬性允許你控制元素的高度和寬度。同樣，它允許你增加行間距。
更多實(shí)例
實(shí)例：設(shè)置元素的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img class="normal" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" /><br>
<img class="big" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
<p class="ex">這個(gè)段落的高和寬是 100px.</p>
<p>這是段落中的一些文本。這是段落中的一些文本。
這是段落中的一些文本。這是段落中的一些文本。
這是段落中的一些文本。這是段落中的一些文本.</p>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
這個(gè)例子演示了如何設(shè)置不同元素的高度。
實(shí)例：使用百分比設(shè)置圖像的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" /><br>
<img class="big" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" /><br>
<img class="small" src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
這個(gè)例子演示了如何使用百分比值設(shè)置元素的高度。
實(shí)例：使用像素值來設(shè)置元素的寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
img {width:200px;}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
本例演示如何使用像素值來設(shè)置元素的寬度。
實(shí)例：設(shè)置元素的最大高度
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
p
{
max-height:50px;
background-color:yellow;
}
</style>
</head>
<body>
<p>本段落的最大高度被設(shè)置為 50px。 本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。本段落的最大高度被設(shè)置為 50px。</p>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
此示例演示如何設(shè)置元素的最大高度。
實(shí)例：使用百分比來設(shè)置元素的最大寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p
{
max-width:20%;
background-color:yellow;
}
</style>
</head>
<body>
<p>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
本例演示如何使用百分比值來設(shè)置元素的最大寬度。
實(shí)例：設(shè)置元素的最低高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p
{
min-height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<p>The minimum height of this paragraph is set to 100px.</p>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
此示例演示如何設(shè)置元素的最小高度。
實(shí)例：使用像素值設(shè)置元素的最小寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p
{
min-width:150px;
background-color:yellow;
}
</style>
</head>
<body>
<p>這個(gè)段落的最低限度設(shè)置為o 150px.</p>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
這個(gè)例子演示了如何使用像素值設(shè)置元素的最小寬度。
所有CSS 尺寸 (Dimension)屬性
| 屬性 | 描述 |
|---|---|
| height | 設(shè)置元素的高度。 |
| line-height | 設(shè)置行高。 |
| max-height | 設(shè)置元素的最大高度。 |
| max-width | 設(shè)置元素的最大寬度。 |
| min-height | 設(shè)置元素的最小高度。 |
| min-width | 設(shè)置元素的最小寬度。 |
| width | 設(shè)置元素的寬度。 |