CSS에서 최소 높이와 최대 높이를 사용하는 방법

최대 및 최소 높이 스타일은 사용하기 매우 편리하며 고정 높이의 단점을 충족합니다. 이 글에서는 CSS에서 min-height 및 max-height를 사용하는 방법을 소개합니다.

Css min-height 적용 위치 설명

내용이 없을 때 개체가 열리지 않도록 개체 상자를 설정하는 경우도 있지만 내용을 확인할 수 없어 높이를 고정할 수 없습니다. 이제 최소 높이를 설정하려면 CSS가 필요합니다. 개체 상자가 올라갑니다. 콘텐츠가 작은 경우 최소 높이로 콘텐츠를 표시할 수 있습니다. 콘텐츠가 최소 높이보다 크면 콘텐츠가 증가함에 따라 개체도 늘어납니다.

Css max-height 최대 높이 적용 설명

이 속성은 거의 사용되지 않습니다. 아마도 높이를 높이고 레이아웃의 미화와 균일성에 영향을 미치는 너무 많은 콘텐츠를 피하기 위해 이 때 최대 높이 제한을 설정합니다. 예를 들어, 테이블 tr td 테이블 개체에 그림이 포함되어 있고 그림의 높이가 확실하지 않은 경우 그림이 tr td 테이블을 깨뜨리는 것을 원하지 않으면 최대 높이를 제한해야 합니다. CSS 최대 높이를 통해 그림을 만듭니다.

CSS 최대 및 최소 높이 디렉터리

구문 및 구조

최대 및 최소 높이 사용 사례

max-height 최소 높이 최대 및 최소 높이 요약

추가 읽기:

1 CSS는 오버플로 콘텐츠를 숨깁니다

2 .html 콘텐츠

3, CSS 숨겨진 컬렉션

4, CSS height

5, css min-width

6, css max-width

구문 및 구조

min-height 및 max- 숨기기 height 값은 숫자 + html 단위입니다

Exp

min-height:50px 最小高度50px
max-height:50px 最大高度50px

CSS 사용 구조

div{min-height:50px }
div{max-height:50px }

최대 및 최소 높이 사용 사례

에 대한 최소 높이(min-height:) 및 최대 높이(max-height) 제한을 설정합니다. 2개의 개체 상자, 적용 사례의 효과를 쉽게 관찰할 수 있도록 두 상자의 CSS 너비와 CSS 테두리 스타일을 동일하게 설정했습니다.

1. 해당 CSS 코드

.div-min,.div-max{ width:300px; border:1px solid #F00} 
.div-min{ min-height:60px} 
.div-max{ max-height:60px; margin-top:10px}

2. Case html 소스 코드 조각:

<div class="div-min"> 
    最小高度为60px 
</div> 
<div class="div-max"> 
    最大高度为60px 
</div>

두 개체의 내용을 늘립니다.

Html 코드:

<div class="div-min"> 
    最小高度为60px<br /> 
   增加内容<br /> 
    增加内容<br /> 
    增加内容 
</div> 
<div class="div-max"> 
    最大高度为60px<br /> 
    www.php.cn<br /> 
    增加内容<br /> 
     增加内容<br /> 
    增加内容 
</div>

여기서 두 개체 상자의 내용을 늘립니다. 60px 높이 제한 초과에 대한 팁 여기서 CSS 이름 ".div-max"에

overflow

:hidden 스타일을 추가하면 최대 높이를 숨기고 오버플로 내용을 표시할 수 있습니다. 최소 높이를 제한하는 상자와 최대 높이를 제한하는 상자 두 개를 설정합니다. 최소 높이 제한이 있는 개체에 콘텐츠가 많지 않으면 이때는 최소 높이 제한을 초과하지 않습니다. , 개체는 최소 높이 제한 값을 표시합니다. 콘텐츠가 더 많으면 제한을 초과하게 됩니다. 최소 높이 제한은 주문을 수용할 수 있으며 개체 높이가 자동으로 증가합니다. 후자는 max-height라는 최대 높이 제한이 있습니다. 콘텐츠가 작은 경우에는 차이가 없습니다. 그러나 콘텐츠가 많아 최대 높이 제한을 수용할 수 없는 경우 콘텐츠가 최대 높이 제한을 초과하게 됩니다. , 그러나 개체 자체는 여전히 최대 높이이므로 내용이 표시됩니다. 오버플로가 개체 상자를 초과하는 경우 CSS 오버플로 속성을 사용하여 오버플로 내용을 숨길 수 있습니다.

min-height와 max-height를 사용하는 방법은 매우 많습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트에서 다른 관련 기사를 주목하세요!

관련 읽기:

HTML에서 공백 문자를 입력하는 방법

HTML에서 p 단락 줄 높이와 줄 간격을 설정하는 방법

브라우저가 html5를 지원하는지 확인하는 방법

위 내용은 CSS에서 최소 높이와 최대 높이를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!