`width: 100%`를 사용하는 CSS 입력이 상위 경계를 넘어 확장되는 이유는 무엇입니까?

너비가 있는 CSS 입력: 100%가 부모 경계를 벗어남

왜 이런 일이 발생합니까?

CSS에서는 너비와 높이 속성이 콘텐츠 상자의 크기입니다. 그러나 패딩이 콘텐츠 상자 외부에 추가되어 요소의 전체 크기가 늘어납니다.

패딩이 있는 요소를 너비: 100%로 설정하면 패딩이 포함된 요소의 100%보다 넓어집니다.

해결책

패딩이 요소의 너비나 높이에 영향을 주지 않도록 하려면 상자 크기 속성을 다음과 같이 설정하세요. border-box:

box-sizing: border-box;

이렇게 하면 너비와 높이 속성에 패딩과 테두리가 포함되어 총 너비가 100%가 됩니다.

브라우저 호환성

box -sizing은 브라우저 호환성이 좋습니다(IE8). 접두사는 필요하지 않습니다.

대체 접근 방식: "상속된" 상자 크기 조정

일부 전문가는 다음과 같은 "상속된" 접근 방식을 사용할 것을 권장합니다.

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

이렇게 하면 상자 크기가 설정됩니다. 전체 문서의 테두리 상자에 추가하고 모든 요소가 이를 상속하도록 허용합니다.

데모

다음은 입력 요소에 테두리 상자를 적용한 데모입니다.

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

위 내용은 `width: 100%`를 사용하는 CSS 입력이 상위 경계를 넘어 확장되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!