'너비: 100%'가 포함된 CSS 입력이 상위 경계를 초과하는 것을 방지하는 방법은 무엇입니까?

너비가 있는 CSS 입력: 100% 부모 경계 외부로 이동

CSS에서는 요소의 너비와 높이가 패딩을 포함한 콘텐츠 영역에 적용됩니다. 그러나 패딩이 있는 요소를 100% 너비로 설정하면 상위 요소의 크기를 초과할 수 있습니다.

CSS 기본 상자 모델 이해

CSS 기본 상자 모델은 요소의 크기와 레이아웃을 정의합니다. 계산됩니다. 콘텐츠, 패딩, 테두리, 여백으로 구성됩니다.

width: 100% 적용 시 콘텐츠 영역의 너비에 영향을 미칩니다. 그러나 요소에 패딩이 있는 경우 콘텐츠 영역 이상으로 확장되어 전체 크기가 효과적으로 늘어납니다.

패딩 장벽 깨기

패딩이 요소의 너비와 높이에 영향을 미치지 않도록 하려면 상자를 설정하세요. -CSS 속성을 border-box로 크기 조정:

box-sizing: border-box;

이는 요소의 너비와 높이에 대한 내부 패딩 내부 절반을 포함하도록 브라우저에 지시하여 요소가 상위 경계를 넘어 확장되는 것을 방지합니다.

브라우저 호환성

상자 크기 조정은 모든 주요 브라우저에서 지원되지만 이전 버전의 Internet Explorer(버전 8 이전)에서는 접두사 사용을 고려하세요.

컨텍스트에서 상자 크기 조정

제공된 JSFiddle에서 문제를 해결하려면 box-sizing: border-box;를 추가하세요. 다음 규칙을 따르세요.

input[type=text],
input[type=password] {
  box-sizing: border-box;
}

권장되는 "상속된" 사용

Paul Irish와 Chris Coyier는 페이지 전체의 일관성을 보장하기 위해 html 요소에서 상자 크기를 상속할 것을 권장합니다.

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

위 내용은 '너비: 100%'가 포함된 CSS 입력이 상위 경계를 초과하는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!