>  기사  >  웹 프론트엔드  >  CSS의 최소 너비 min-width 및 최대 너비 max-width 속성 사용 요약

CSS의 최소 너비 min-width 및 최대 너비 max-width 속성 사용 요약

伊谢尔伦
伊谢尔伦원래의
2017-06-03 10:06:316919검색

CSS 너비 속성은 단어 너비이며 너비 너비에는 최대 너비 속성 max-width와 최소 너비 속성 min-width라는 두 가지 중요한 속성이 포함됩니다. 최대 너비 속성(max-width)은 표시 범위를 최대값보다 크게 만들기 위해 브라우저 테두리를 드래그할 때 너비 표시의 최대값을 정의하는 데 사용됩니다. width,요소는 최대 너비 값으로 정의된 너비를 표시합니다. 최대 너비 속성 값에는 자동 값, 길이 값, 백분율 값의 세 가지 속성 값을 사용할 수 있습니다. 최소 너비 속성(min- width )는 너비 표시의 최소값을 정의하는 데 사용됩니다. 표시 범위를 최소 너비보다 작게 만들기 위해 브라우저 테두리를 드래그하면 요소가 표시됩니다 최소 너비 값 정의 너비, 최소 너비 속성에는 자동 값, 길이 값 및 백분율 값의 세 가지 속성 값을 사용할 수 있습니다. 이 기사에서는 max-width 및 min-width 두 가지 속성의 사용을 요약합니다.

최소 너비 및 최대 너비 속성 사용

최소 너비 및 최대 너비 속성 사용

1. IE6의 최소 너비 및 최소 높이와 호환

사이트가 와이드스크린인 경우 네, 브라우저 창을 왼쪽이나 오른쪽으로 드래그하면 창의 크기에 따라 웹사이트의 너비가 변경됩니다. 브라우저 창의 너비가 어느 정도 줄어들면 아래의 스크롤 막대가 나타나며 너비도 변경됩니다. 이 간단한 기능은 CSS의 min-width를 사용하여 쉽게 구현할 수 있다는 것을 알고 있지만, 안타깝게도 많은 사용자를 보유하고 있는 IE6에서는 이러한 매우 편리한 속성을 지원하지 않습니다. ? 웹페이지를 디자인할 때 다음 사항만 추가하면 CSS 문을 해결할 수 있습니다.

2. @media 속성과 (max-width:)를 자세히 설명하세요. 및 ( min-width 간의 관계 및 사용법)

width/height는 출력 장치에서 페이지의 표시 영역의 너비/높이를 정의합니다.

max/min-width/height는 출력 장치에서 페이지의 최대/최소 표시 영역 너비/높이를 정의합니다.

device-width/height는 출력 장치의 보이는 화면 너비/높이를 정의합니다.

max/min-device-width/height는 출력 장치 화면의 최대/최소 표시 너비/높이를 정의합니다.

3. CSS 레이아웃 연구 노트 최대 너비 p >

블록 수준 요소의 너비를 설정하여 컨테이너가 왼쪽에서 오른쪽으로 채워지지 않도록 합니다. 그런 다음 왼쪽 및 오른쪽 여백을 자동으로 설정하여 가로 중앙에 배치할 수 있습니다. 요소는 지정한 너비를 차지하며 나머지 너비는 왼쪽과 오른쪽 여백 두 개로 나뉩니다.

유일한 문제는 브라우저 창이 요소의 너비보다 좁은 경우 브라우저가 페이지를 수용하기 위해 가로 스크롤 막대를 표시한다는 것입니다. 이 경우 너비 대신 max-width를 사용하면 브라우저가 작은 창 상황을 더 잘 처리할 수 있습니다.

4. jquery는 이미지 크기 조정을 구현하며 최대 너비는 IE에서 호환되지 않습니다

웹 페이지를 처리할 때 이미지를 로드할 때 특히 일부 이미지 목록 애플리케이션에서는 이미지 크기를 균일하게 유지하기가 어렵습니다. 이미지 크기를 직접 설정하면 이미지가 늘어나고 이미지가 흐릿해집니다. 이미지가 로드됩니다. 최대 너비와 최대 높이는 ie6에서 호환되지 않습니다. 이러한 문제는 jQuery로 해결할 수 있습니다.

5. IE6에서 최소 너비 최소 너비 지원

많은 사람들이 이 방법을 사용하여 다음을 달성한다고 생각합니다. 컨테이너의 최소 너비 Shidu는 설명할 수 없는 충돌로 인해 문제가 되는 경우가 많습니다. 여기에 지적해야 할 두 가지 사항이 있습니다. 1. IE6의 표준 모드와 특수 모드에서 뷰포트를 나타내는 요소는 2. IE6-위의 두 가지 모드에서는 포함된 내용이 오버플로될 때 표현이 달라져 할당 판단에서 무한 루프가 발생합니다.

관련 Q&A

1. @media 화면 및 (최소 너비:800px)

2. max-width와 max-device-width의 차이점이 무엇인지 물어보세요 p>

3. CSS의 잘못된 최대 너비에 대해

【관련 추천】

1. PHP 중국어 웹사이트 항목: 최소 너비

2. PHP 중국어 웹사이트 항목: max-width

3. PHP 중국어 웹사이트의 비디오 튜토리얼: CSS 비디오 튜토리얼

위 내용은 CSS의 최소 너비 min-width 및 최대 너비 max-width 속성 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.