CSS 측정 속성: 높이, 너비 및 최대 높이/최대 너비

CSS 측정 속성: 높이, 너비 및 최대 높이/최대 너비, 특정 코드 예제 필요

웹 디자인 및 개발에서는 요소의 크기를 제어하는 ​​것이 매우 중요합니다. CSS 측정 속성을 사용하면 요소의 높이와 너비는 물론 요소 크기의 최대 제한을 정확하게 정의할 수 있습니다. 이 문서에서는 CSS에서 일반적으로 사용되는 측정 속성인 높이, 너비, 최대 높이 및 최대 너비를 소개하고 구체적인 코드 예제를 제공합니다.

1. height(높이) 속성은 요소의 높이를 정의하는 데 사용됩니다. 픽셀(px), 백분율(%), 뷰포트 단위(vh) 또는 기타 지원되는 단위를 사용하여 지정할 수 있습니다.

샘플 코드:

.box {
  height: 200px; /* 使用像素设置高度 */
}

.container {
  height: 50%; /* 使用百分比设置高度 */
}

.header {
  height: 10vh; /* 使用视口单位设置高度 */
}

2. width(너비) 속성은 요소의 너비를 정의하는 데 사용됩니다. 높이 속성과 마찬가지로 픽셀, 백분율, 뷰포트 단위 또는 기타 지원되는 단위를 사용하여 지정할 수 있습니다.

샘플 코드:

.box {
  width: 300px; /* 使用像素设置宽度 */
}

.container {
  width: 70%; /* 使用百分比设置宽度 */
}

.sidebar {
  width: 20vw; /* 使用视口单位设置宽度 */
}

3. max-height(최대 높이) 속성은 요소의 최대 높이를 제한하는 데 사용됩니다. 요소 내용이 최대 높이를 초과하면 스크롤 막대가 자동으로 표시됩니다.

샘플 코드:

.box {
  max-height: 500px; /* 设置最大高度为500像素 */
}

.container {
  max-height: 80%; /* 设置最大高度为父元素高度的80% */
}

4. max-width(최대 너비) 속성은 요소의 최대 너비를 제한하는 데 사용됩니다. max-height 속성과 마찬가지로 콘텐츠가 최대 너비를 초과하면 스크롤 막대가 자동으로 표시됩니다.

샘플 코드:

.box {
  max-width: 800px; /* 设置最大宽度为800像素 */
}

.container {
  max-width: 90%; /* 设置最大宽度为父元素宽度的90% */
}

위의 코드 예는 CSS 측정 속성을 사용하여 요소의 높이와 너비는 물론 최대 높이와 ​​최대 너비를 제어하는 ​​방법을 보여줍니다. 이러한 속성은 특히 반응형 디자인에서 다양한 장치 크기에 따라 요소의 크기를 자동으로 조정하는 데 매우 유용합니다.

요약:

• height 속성은 요소의 높이를 정의하는 데 사용됩니다.
• width 속성은 요소의 너비를 정의하는 데 사용됩니다.
• max-height 속성은 요소의 최대 높이를 제한하는 데 사용됩니다.
• max-width 속성은 요소의 최대 너비를 제한하는 데 사용됩니다.

이러한 측정 속성을 적절하게 사용하면 웹 페이지의 요소를 더 잘 제어하고 레이아웃할 수 있으며 더 나은 사용자 경험을 얻을 수 있습니다. 이 기사의 코드 예제가 독자가 이러한 속성을 더 잘 이해하고 적용하는 데 도움이 되기를 바랍니다.

위 내용은 CSS 측정 속성: 높이, 너비 및 최대 높이/최대 너비의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!