CSS에서 높이와 너비를 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 높이와 너비를 설정하는 방법

青灯夜游

풀어 주다： 2023-01-05 16:10:27

원래의

10661명이 탐색했습니다.

CSS에서 높이와 너비를 설정하는 방법: 1. width 및 height 속성을 사용하여 요소의 너비와 높이를 설정합니다. 2. max-width 및 max-height 속성을 사용하여 요소의 최대 너비와 높이를 설정합니다. 3. min-width 및 min을 사용하십시오. -height 속성은 요소의 최소 너비와 높이를 설정합니다.

CSS에서 높이와 너비를 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

방법 1: 너비 및 높이 속성 사용

너비 및 높이 속성은 요소의 너비와 높이를 설정할 수 있으며 패딩, 테두리 또는 여백을 제외한 요소 콘텐츠 영역의 너비와 높이를 정의합니다.

속성 값:

값	설명
auto	기본값. 브라우저는 실제 너비나 높이를 계산할 수 있습니다.
length	px, cm 등의 단위를 사용하여 너비 또는 높이를 정의합니다.
%	이를 포함하는 블록 수준 개체(상위 요소)의 너비 또는 높이 백분율을 기준으로 합니다.

방법 2: max-width 및 max-height 속성 사용

max-width 및 max-height 속성은 패딩, 테두리 또는 여백을 제외한 요소의 최대 너비와 높이를 설정합니다!

속성 값:

값	설명
none	기본값. 정의에서는 요소의 최대 너비나 높이에 제한을 두지 않습니다.
length	은 요소의 최대 너비 값 또는 최대 높이 값을 정의합니다.
%	이를 포함하는 블록 수준 객체의 백분율을 기준으로 최대 너비 또는 최대 높이를 정의합니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p
{
	max-width:100px;
	max-height:100px;
	background-color:yellow;
}
</style>
</head>

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

로그인 후 복사

CSS에서 높이와 너비를 설정하는 방법

방법 3: min-width 및 min-height 속성을 사용

min-width 및 min-height 속성을 사용하여 패딩을 제외한 요소의 최소 너비 및 높이 설정 , 테두리 또는 페이지 여백!

속성 값:

값	설명
length	요소의 최소 너비 또는 최소 높이를 정의합니다. 기본값은 0입니다.
%	이를 포함하는 블록 수준 개체의 비율을 기준으로 최소 너비 또는 최소 높이를 정의합니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p
{
	min-width:150px;
	min-height:100px;
	background-color:yellow;
}
</style>
</head>

<body>
<p>这个段落的最小宽度设置为 150px，最小高度设置为 100px。</p>
</body>
</html>

로그인 후 복사

CSS에서 높이와 너비를 설정하는 방법