CSS 차원

CSS Dimension 속성

Property	Description
height	요소의 높이를 설정합니다.
line-height	줄 높이를 설정합니다.
max-height	요소의 최대 높이를 설정합니다.
max-width	요소의 최대 너비를 설정합니다.
min-height	요소의 최소 높이를 설정합니다.
min-width	요소의 최소 너비를 설정합니다.
width	요소의 너비를 설정합니다.

예

백분율을 사용하여 이미지 높이 설정

<!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>

프로그램을 실행하여 사용해 보세요

예시

세트 요소의 최소 높이

       <!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>

프로그램을 실행하고 사용해 보세요

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전