'너비: 100%'가 포함된 CSS 입력이 상위 경계를 넘어 확장되는 이유는 무엇입니까?

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

CSS 박스 모델과 백분율 불일치의 광기

CSS 영역에서는 div와 두 개의 입력 하위 항목은 할당된 범위에서 벗어나는 것 같습니다. 이것은 무슨 마법인가?

이 미스터리를 풀어보자!

원인 – 패딩의 일탈성

CSS 박스 모델의 원리에 따르면 요소의 너비와 높이는 내부에서 잘 작동한다. 콘텐츠 상자. 그러나 패딩은 이 상자 밖으로 나가 전체 요소를 효과적으로 확대하는 것을 좋아합니다.

패딩이 있는 요소에 width: 100%를 적용하면 과도한 여유가 부여되어 100% 상위 요소보다 넓어집니다. 이 경우 입력은 컨테이너보다 더 넓어집니다.

구조를 위한 상자 크기 조정

패딩의 장난스러운 동작을 길들이기 위해 상자 크기 조정 속성을 도입합니다. border-box로 설정하면 패딩이 요소의 정의된 크기 내로 제한됩니다.

고급 상속 기술

웹 디자인 마법사 Paul Irish와 Chris Coyier는 inherited를 옹호합니다. 다음 스니펫에 의해 전파된 접근 방식:

html {
  box-sizing: border-box;
}

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

데모

수정 사항이 실제로 작동하는 모습을 확인하기 위해 수정된 코드는 다음과 같습니다.

input[type=text],
input[type=password] {
  width: 100%;
  height: 30px;
  padding: 5px 10px;
  background-color: rgb(215, 215, 215);
  line-height: 20px;
  font-size: 12px;
  color: rgb(136, 136, 136);
  border-radius: 2px 2px 2px 2px;
  border: 1px solid rgb(114, 114, 114);
  box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
  box-sizing: border-box;
}

짜잔! 이제 어떤 입력 필드도 감히 경계를 넘을 수 없습니다. 박스모델의 정신이 회복되었습니다.

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