CSS 최대 블록 사이즈 속성

정의와 사용 방법

max-block-size 속성은 요소의 블록 방향의 최대 크기를 지정합니다.

내용의 블록 방향의 크기가 최대 값보다 작으면 max-block-size 속성 값이 작동하지 않습니다.

내용의 블록 방향의 크기가 최대 값보다 크면 적용됩니다. max-block-size 속성 값.

주의:관련 CSS 속성 writing-mode 블록 방향을 정의하며 이는 max-block-size 속성의 결과입니다. 영어 페이지에서는 블록 방향은 아래로, 인라인 방향은 왼쪽에서 오른쪽으로流向합니다.

CSS max-block-size 속성은 CSS 속성 최대 높이 및 max-width 매우 유사하지만 max-block-size 속성은 블록 방향에 의존합니다.

다음과 같은 <div> 요소의 블록 방향의 최대 크기를 60픽셀로 설정합니다:

div {
  max-block-size: 60px;
}

다음과 같은 <div> 요소의 writing-mode 속성 값이 vertical-lr로 설정되면, 블록 방향이 아래에서 laterally로 변하며 이는 max-block-size 속성의 작동 방식:

div {
  max-block-size: 60px;
  writing-mode: vertical-lr;
}

하나의 <div> 요소(block-size 100px(또는 100px)와 다른 <div> 요소(max-block-size 100px(또는 100px)의 크기를 가진 다른 <div> 요소(

#div1 {
  max-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

max-block-size: 자동|길이|기본|상속;

값	설명
자동	기본. 요소의 기본 max-block-size 값.
길이	max-block-size를 지정합니다. 단위는 px, pt, cm 등입니다. 참조:CSS 단위.
%	부모 요소에 비해 해당 축에서의 크기를 비율로 지정한 max-block-size.
기본	이 속성을 기본 값으로 설정합니다. 참조 기본.
상속	부모 요소에서 이 속성을 상속합니다. 참조 상속.

기본 값:	자동
상속성:	아니요
애니메이션 제작:	지원됩니다. 참조:애니메이션 관련 속성.
버전:	CSS3
JavaScript 문법:	object.style.maxBlockSize="60px"

표格에서의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬	에지	파이어폭스	사파리	오페라
57.0	79.0	41.0	12.1	44.0