CSS에서 최소 높이와 최소 너비를 사용하는 방법 요약-CSS 튜토리얼-php.cn

CSS에서 최소 높이와 최소 너비를 사용하는 방법 요약

黄舟

풀어 주다： 2017-07-21 10:24:07

원래의

2772명이 탐색했습니다.

큰 미인에게 min-width를 설명하다가 속성이 생각한 것과 다르다는 것을 알았습니다. 과시하지 못해서 맹목적으로 울었습니다(ಥ_ಥ)

max-height, max-height 여기서는 논의하지 않겠습니다. 똑똑하다면 min-height, min-width 이후에는 모두가 이해할 것입니다...

먼저 min(max), (width)height를 선언하세요. 적용 대상: 대체되지 않은 인라인 요소 제외 및 테이블 요소를 제외한 모든 요소

1.min-heigh

사용: 영역의 최소 높이를 설정합니다. 예를 들어

    <p class="test">
        我是一只小青蛙我是一只小青蛙我是一只小青蛙
        我是一只小青蛙我是一只小青蛙我是一只小青蛙
        我是一只小青蛙我是一只小青蛙我是一只小青蛙
    </p>

로그인 후 복사

    .test{        
    width: 200px;        
    height: 60px;        
    background-color: #E5B783;    
    }

로그인 후 복사

입니다.

결과는 그림과 같습니다.

CSS에서 최소 높이와 최소 너비를 사용하는 방법 요약

추가 콘텐츠가 표시되지 않기를 원할 경우, Overflow: Hidden이 도움이 될 수 있습니다.

CSS에서 최소 높이와 최소 너비를 사용하는 방법 요약

때때로 얼마나 높은지 알 수 없습니다. 중간 콘텐츠 영역이 있지만 영역의 높이가 중간 콘텐츠 영역에 딱 맞도록 하고 싶습니다. 이때 min-height

    .test{        
    width: 200px;        
    min-height: 60px;        
    background-color: #E5B783;    
    }

로그인 후 복사

를 사용할 수 있습니다. 결과는 그림과 같습니다.

CSS에서 최소 높이와 최소 너비를 사용하는 방법 요약

If 여전히 최소 높이 속성이 걱정됩니다. 이 효과를 달성하는 또 다른 방법은 다음과 같습니다.

    .test{        
    width: 200px;        
    height: auto;        
    background-color: #E5B783;        
    overflow: hidden;    
    }

로그인 후 복사

2.min -width

그런 다음 최소 높이에 대한 생각을 사용하여 최소 너비를 이해하고 다음을 발견했습니다. 브롬이 너무 크다...

    <p class="test">我是一只小青蛙我是一只小青蛙我是一只小青蛙</p>

로그인 후 복사

    .test{        
    min-width: 100px;        
    height: 60px;        
    background-color: #E5B783;    
    }

로그인 후 복사

결과는 사진과 같습니다

CSS에서 최소 높이와 최소 너비를 사용하는 방법 요약

사실 다들 왜 그런 일이 일어나는지 알고 싶어해서 이렇게 테스트를 해봤습니다

    
        <p class="test">我是一只小青蛙我是一只小青蛙我是一只小青蛙</p>

로그인 후 복사

    .parent{        
    width: 200px;        
    height: auto;    
    }
    .test{        
    min-width: 100px;        
    height: 60px;        
    background-color: #E5B783;    
    }

로그인 후 복사

결과는 다음과 같습니다. :

CSS에서 최소 높이와 최소 너비를 사용하는 방법 요약

부모 요소의 너비와 동일한 것으로 확인되었습니다. 이는 min-width가 부모 요소의 너비를 상속하지만 min-height는 상속하지 않음을 의미합니다.

부모 요소가 없으면, 즉 가장 바깥쪽 레이어가 body이면 기본값은 100%입니다.

이제 원인을 알았으니 다음 단계는 해결하는 것입니다...

Baidu 및 블로그 게시물을 확인하고,

방법 1: display: inline;

    <p class="test">我是一只小青蛙我是一只小青蛙我是一只小青蛙</p>

로그인 후 복사

    .test{        
    min-width: 100px;        
    /*height: 60px;*/
        background-color: #E5B783;        
        display: inline;    
        }

로그인 후 복사

Rendering:

CSS에서 최소 높이와 최소 너비를 사용하는 방법 요약

이유 없이 너비와 높이 적응 효과를 얻었으나 요소가 인라인 요소가 되어 좀 안 좋은 것 같습니다.. .

방법 2: inline- block

    .test{        
    min-width: 100px;        
    height: 60px;        
    background-color: #E5B783;        
    display: inline-block;    
    }

로그인 후 복사

Rendering:

CSS에서 최소 높이와 최소 너비를 사용하는 방법 요약

효과를 얻었지만 display: inline-block 사용으로 인해 이 속성의 "3px" 문제가 발생합니다(^ o^)/~ 간략한 답변

이 속성을 설정하는 인접한 두 블록은 서로 가깝지는 않지만 3px의 간격이 있습니다(일반적으로 3px-4px, 브라우저 차이는 때때로 변경됨).

방법 3: 위치: 절대;

    .test{        min-width: 100px;        height: 60px;        background-color: #E5B783;        position: absolute;        top: 0;        left: 0;    }

로그인 후 복사

방법 4: 위치: 고정; 인터넷에 따르면 IE6 이하에서는 호환성이 손상되어 테스트할 수 없습니다. .

최소 너비 방법 적용 요약:

인라인 속성으로 설정

플로팅 및 위치 지정이 문서 흐름에서 벗어났습니다.

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