Dimensi CSS

Properti Dimensi CSS

属性描述
height设置元素的高度。
line-height设置行高。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。

Instance

Tetapkan ketinggian imej menggunakan peratusan

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        html {height:100%;}
        body {height:100%;}
        img.normal {height:auto;}
        img.big {height:30%;}
        img.small {height:10%;}
    </style>
</head>

<body>
<img class="normal" src="/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" /><br>
<img class="big" src="/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" /><br>
<img class="small" src="/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" />
</body>
</html>

Jalankan program untuk mencubanya


Contoh

Tetapkan ketinggian minimum elemen

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            min-height:100px;
            background-color:yellow;
        }
    </style>
</head>

<body>
<p>这一段的最小高度设置为100 px。</p>
</body>
</html>

Jalankan atur cara untuk mencubanya




Meneruskan pembelajaran
||
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php(php.cn)</title>
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:30%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="95" height
    ="84" /><br>
<img class="big" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="95" height
    ="84" /><br>
<img class="small" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="95" height
    ="84" />
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
图片放大关闭