왜 `display: block`은 내 입력 요소가 컨테이너의 너비를 채우지 못합니까?

'Display:block'을 사용하여 입력 요소가 블록 컨테이너 너비로 확장되지 않음

'display:block'을 입력 요소에 할당했음에도 불구하고, div처럼 동작하지 않고 컨테이너 너비를 채울 수 있습니다. 이러한 편차는 CSS 입력 요소의 고유한 동작에서 비롯됩니다.

CSS에서 'display:block'을 사용하면 일반적으로 요소가 확장되어 사용 가능한 전체 너비를 차지할 수 있습니다. 그러나 입력 요소는 기본 표시 모드로 'display:inline'을 갖도록 설계되었습니다. 즉, 패딩과 테두리를 포함한 콘텐츠의 너비만 차지하게 됩니다.

이 문제를 해결하고 입력 요소가 너비를 채우도록 하려면 '너비:100%'를 사용할 수 있습니다. 그러나 이 접근 방식은 입력에 0이 아닌 패딩과 테두리가 있는 경우 문제가 될 수 있습니다. 최종 너비가 100%를 초과하게 되기 때문입니다.

CSS3 'box-sizing을 사용한 크로스 브라우저 솔루션 '

포괄적인 솔루션에는 CSS3의 상대적으로 알려지지 않은 'box-sizing:border-box' 속성을 사용하는 것이 포함됩니다. 이 속성은 입력 요소(또는 다른 요소)의 너비에 패딩과 테두리가 포함되도록 보장합니다.

제공된 CSS 코드의 수정된 버전은 다음과 같습니다.

form { display: block; margin: 0; padding: 0; width: 50%; border: 1px solid green; overflow: visible }
div, input { display: block; border: 1px solid red; padding: 5px; width: 100%; font: normal 12px Arial; }

.bb {
    box-sizing: border-box; /* CSS 3 rec */
    -moz-box-sizing: border-box; /* Firefox 2 */
    -ms-box-sizing: border-box; /* Internet Explorer 8 */
    -webkit-box-sizing: border-box; /* Safari 3 */
    -khtml-box-sizing: border-box; /* Konqueror */
}

'.bb' 클래스를 입력 요소에 추가하려면 브라우저 간 호환성을 위해 'box-sizing:border-box'를 활성화할 수 있습니다. 이렇게 하면 입력 요소가 패딩 및 테두리에 관계없이 항상 사용 가능한 전체 너비를 차지하게 됩니다.

추가 참고 사항:

1. Internet Explorer 6 및 7은 CSS3 'box-sizing'을 지원하지 않지만 동작 스크립트를 사용하여 활성화할 수 있습니다.
2. 'box-sizing:border-box' 속성은 Google Chrome, Firefox, Safari, Opera를 포함한 대부분의 최신 브라우저에서 지원됩니다.

위 내용은 왜 `display: block`은 내 입력 요소가 컨테이너의 너비를 채우지 못합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!