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

오늘은 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 cssmin-height

2. -height

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 소스 코드 스니펫

原图片大小：
 
 

 宽为165px 高度60px
 
 

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

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

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

추천 도서:

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