CSS 크기 속성은 요소의 너비 및 높이 속성을 참조합니다. 매우 간단하지만 반드시 숙달해야 하는 기술입니다. CSS는 요소의 너비와 높이를 설정하기 위해 width, height, max-width, min-width, max-height 및 min-height와 같은 여러 속성을 제공합니다. 이러한 요소는 사용하기가 매우 간단합니다.
1. 높이
(1) 요소의 높이 설정: height 속성
높이: 속성은 요소의 높이를 지정합니다.
① 적용 범위 및 대상 : 기본 콘텐츠 영역
적용 대상: 모든 요소
대체되지 않은 인라인 요소, 테이블 열, 열 그룹
적용 범위: 기본적으로 이 속성은 콘텐츠 영역의 높이를 결정합니다.
② 적용범위 변경 :
box-sizing이 border-box로 설정된 경우 이 속성은 테두리 영역의 높이를 결정합니다.
③ 해당사항 없음
대체되지 않은 인라인 요소: 이 속성은 무시됩니다.
인라인 요소: 높이를 설정할 수 없습니다.
④ 속성값 재정의
min-height 및 max-height 속성은 높이를 재정의합니다.
(2) 높은 수준의 문법
높이: 자동|길이|%|상속;
실험적 속성 값 포함: [ <length> | <percentage> ] && [ border-box |
/*키워드 값Keywordvalue*/height:auto;/*길이 값<length>values*/height:120px;height:10em;/*백분율 값<percentage>value*/height:75%;/*전역 키워드 ValueGlobalvalues*/ 높이:상속;높이:초기;높이:설정 해제;
2.폭
(1) 요소의 너비 설정: 너비 속성
① 적용분야
콘텐츠 영역: 기본적으로 콘텐츠 영역의 너비를 설정합니다.
포함되지 않음: 콘텐츠 영역 외부에 패딩, 테두리 및 여백을 추가할 수 있습니다.
해당 영역 수정: 단, box-sizing을 border-box로 설정한 경우 테두리 영역의 너비를 설정합니다.
② 적용요소
다음 요소를 제외한 모든 요소
적용할 수 없는 요소: 대체되지 않은 인라인 요소, 테이블 행 및 행 그룹
대체되지 않은 인라인 요소는 이 속성을 무시합니다.
③ 표지
min-width 및 max-width 속성은 너비를 재정의할 수 있습니다.
(2) 너비의 구문
너비: 자동 | 길이|
실험적 속성 값 포함: [ <length> | <percentage> ] && [ border-box |
/*길이 값<길이>값*/width:300px;width:25em;/*백분율 값<percentage>값*/width:75%;/*키워드 값 키워드값*/width:25emborder-box;width:75 % 콘텐츠 상자 ;width:max-content;width:min-content;width:available;width:fit-content;width:auto;/*전역 값전역 값*/width:inherit;width:initial;width:unset;
3. 최대 너비 및 최대 높이
max-width 및 max-height 속성은 각각 요소 콘텐츠 영역의 최대 너비와 최대 높이를 설정하는 데 사용됩니다. max-width 및 max-height 속성이 정의되면 width 및 height 속성의 실제 값은 실제 값과 관계없이 max-width 및 max-height 속성의 값보다 작거나 같습니다. 너비 또는 높이 속성의 값. max-width 및 max-height 속성의 선택적 값은 다음과 같습니다.
max-width 속성을 예로 들어 보겠습니다. (max-height 속성의 특성은 유사합니다.)
(1) max-width 속성의 값이 width 속성보다 작은 경우, width 속성의 값은 max-width 속성과 동일한 값으로 재정의됩니다.
(2) max-width 속성의 값이 width보다 크면 max-width 속성은 무시됩니다.
(3) max-width 속성의 값이 min-width보다 작으면 max-width 속성은 무시됩니다.
4.최소 너비 및 최소 높이
min-width 및 min-height 속성은 요소의 콘텐츠 영역의 최소 너비 및 최소 높이를 설정하는 데 사용됩니다. min-width 및 min-height 속성이 정의되면 너비 또는 높이 속성의 실제 값에 관계없이 width 및 height 속성 실제 값은 min-width 및 min-height 속성 값보다 크거나 같습니다. min-width 및 min-height 속성의 선택적 값은 다음과 같습니다.
min-width 속성을 예로 들어 보겠습니다. (min-height 속성도 비슷한 특성을 가집니다)
(1) min-width 속성의 값이 width보다 작으면 min-width 속성은 무시됩니다.
(2) min-width 속성의 값이 width보다 큰 경우 min-width 속성의 값은 min-width 속성과 동일한 값으로 재정의됩니다.
(3) min-width 속성의 값이 max-width보다 큰 경우, max-width 속성은 무시됩니다.