CSS 차원

CSS 크기

CSS 크기(치수) 속성에는 다음과 같은 측면이 포함됩니다.

높이 요소의 높이를 설정합니다.

width 요소의 너비를 설정합니다.

max-height 요소의 최대 높이를 설정합니다.

max-width 요소의 최대 너비를 설정합니다.

min-height 요소의 최소 높이를 설정합니다.

min-width 요소의 최소 너비를 설정합니다.

line-height 줄 높이를 설정합니다.

max/min-height/width는 요소의 최대 및 최소 높이 너비를 설정합니다.

line-height는 첫 번째 줄의 상단을 참조하는 줄 높이를 설정합니다. 두 번째 행 상단의 높이.

요소 높이 설정

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img class="normal" src="http://www.visionunion.com/admin/data/file/img/20140111/20140111004002.jpg" width="95" height="84" /><br>
<img class="big" src="http://www.visionunion.com/admin/data/file/img/20140111/20140111004002.jpg" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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="http://www.visionunion.com/admin/data/file/img/20140111/20140111004002.jpg" width="95" height="84" /><br>
<img class="big" src="http://www.visionunion.com/admin/data/file/img/20140111/20140111004002.jpg" width="95" height="84" /><br>
<img class="small" src="http://www.visionunion.com/admin/data/file/img/20140111/20140111004002.jpg" width="95" height="84" />
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> img.normal { height:auto; } img.big { height:120px; } p.ex { height:100px; width:100px; } </style> </head> <body> <img class="normal" src="http://www.visionunion.com/admin/data/file/img/20140111/20140111004002.jpg" width="95" height="84" /><br> <img class="big" src="http://www.visionunion.com/admin/data/file/img/20140111/20140111004002.jpg" width="95" height="84" /> <p class="ex">这个段落的高和宽是 100px.</p> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear