블록 수준 입력 요소가 항상 Div처럼 컨테이너를 채우지 않는 이유는 무엇입니까?

블록으로 표시되는 입력 요소: Div와 다른 이유

입력 요소를 디스플레이: 블록 및 너비로 인식하는 것이 일반적입니다. auto는 div와 유사하게 작동하며 컨테이너의 전체 너비를 차지합니다. 그러나 제공된 코드 조각에서 볼 수 있듯이 이는 사실이 아닙니다.

불일치 이해

div와 달리 입력 요소는 다음과 같은 다른 상자 모델을 따릅니다. 테두리 상자 모델. 이 모델은 div에 사용되는 콘텐츠 상자 모델과 달리 전체 너비 계산에서 패딩과 테두리를 고려합니다.

문제 극복

입력 요소를 강제로 확장하려면 전체 컨테이너 너비에 대해 패딩과 테두리를 고려하면서 max-width: 100% 속성을 사용할 수 있습니다. 이 기술은 기본적으로 테두리 및 패딩으로 인해 계산된 너비가 이 값을 초과하더라도 입력 요소의 너비를 상위 컨테이너로 제한합니다.

브라우저 간 호환성

브라우저 전반에서 일관된 동작을 달성하기 위해 최근 도입된 box-sizing: border-box 속성을 사용할 수 있습니다. 이 속성은 기본 상자 모델에 관계없이 대상 요소에 대해 테두리 상자 모델을 사용하도록 브라우저에 명시적으로 지시합니다.

구현

다음 코드는 이 솔루션을 보여줍니다. :

<div class="wrapper">
  <input type="text" class="input" placeholder="Input Text" />
</div>

<style>
  .wrapper {
    width: 500px;
    border: 1px solid black;
    padding: 20px;
  }

  .input {
    width: 100%;
    box-sizing: border-box;
  }
</style>

이 접근 방식은 입력 요소가 모든 주요 영역에서 컨테이너의 전체 너비를 차지하도록 보장합니다. 브라우저.

위 내용은 블록 수준 입력 요소가 항상 Div처럼 컨테이너를 채우지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!