집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 최소 너비 및 최대 너비를 설정하는 방법

CSS 최소 너비 및 최대 너비를 설정하는 방법

php中世界最好的语言원래의: 2017-11-21 17:18:273005검색

오늘은 CSS의 min-width 및 max-width 설정 방법을 소개하겠습니다. 많은 친구들이 최소 너비 min-width 및 최대 너비 max-width 스타일이 무엇인지 궁금해하시나요? 최소 너비와 최대 너비는 어디에 사용됩니까? 신청하는 방법? 그래서 오늘은 하나씩 설명드리겠습니다.

DIV+CSS 레이아웃의 웹 페이지에 html img 이미지 삽입

다음으로 DIVCSS5를 사용하면 모든 사람이 min-width 및 max-width의 기본 구문 구조를 익히고 사례를 통해 사용법을 배울 수 있습니다.

min-width 최대 너비 디렉토리

CSS 기본 구문구조

min-width 및 max-width 뒤에는 특정 숫자 + html 단위

min-width:50px 최소 너비는 50px

max- width :50px 최대 너비는 50px입니다.

CSS 스타일 구조

p{min-width:50px}

p{max-width:50px}

1 css min-height

2. -height

3, css width

4, css height

실용 적용 지침

최소 너비(min-width)와 최대 너비(max-width)는 이미지의 최소 및 최대 너비 제한을 설정하는 데 자주 사용됩니다. . 예를 들어, 그림을 메인 목록으로 사용하고 개체의 그림 크기가 가변적일 때 너무 작고 일관성이 없게 만들기 위해 CSS 최소 너비 스타일을 사용할 수 있습니다. 또 다른 예로, 상자 안에 기사와 그림이 섞여 있는 경우, 그림의 너비를 알 수 없는 경우가 있습니다. 이때 html img 그림의 너비가 p 상자의 너비를 초과하면 그림이 터질 수 있습니다. p 상자에 들어가 그림에 혼란을 야기합니다.

확장 읽기:

1. 이미지 높이와 너비를 설정하는 CSS

2. CSS는 DIV 웹페이지를 깨기에는 너무 큰 이미지 문제를 해결합니다.

3.css img

min-width 및 max- Width 사용 사례

두 개의 p 상자를 설정하고 각각 최대 및 최소 너비 스타일을 설정하고 CSS 테두리를 1px로, CSS 색상을 빨간색 실선 상자로, CSS 높이를 100px. 첫 번째 및 두 번째 상자의 CSS 이름은 각각 css-min-width 및 css-max-width입니다. 첫 번째 상자에 있는 이미지의 원래 이미지 크기는 너비가 165px이고 높이가 60px입니다. 두 번째 상자는 너비가 375px이고 높이가 65px입니다.

케이스 CSS 코드

.css-min-width,.css-max-width{ height:100px; border:1px solid #F00} 
.css-min-width img{ min-width:200px} 
.css-max-width{margin-top:10px} 
/* css注释：margin-top设置css-max-width对象上间距为10px */ 
.css-max-width img{ max-width:200px; }

CSS+DIV 케이스 html 소스 코드 스니펫

<p>原图片大小：<br /> 
<br /> 
<img src="http://www.php.cn" /><br /><br /> 
宽为165px 高度60px<br /> 
<br /> 
<img src="http://www.php.cn" /><br /><br />

폭은 375px, 높이는 65px입니다

94b3e26ee717c64999d7867364b1b4a3

케이스는 다음과 같습니다.

<p class="css-min-width"> 
    <img src="http://www.PHP.com/img201301/PHP-logo-2013.gif" /> 
</p> 
<p class="css-max-width"> 
    <img src="http://www.PHP.com/img201301/topad1.gif" />

분은 어떻습니까? -현재 CSS의 너비와 최대 너비는 여기까지입니다. 필요한 친구는 이를 저장할 수 있습니다. 이 사이트의 다른 업데이트에도 계속 관심을 가져주세요.

CSS 최소 너비 및 최대 너비를 설정하는 방법

관련 기사