Chrome에서 컨테이너를 채우기 위해 \'display: block\' 및 \'width: auto\' 늘이기 버튼을 사용하지 않는 이유는 무엇입니까?

"display: block" 및 "width: auto"가 컨테이너를 채우기 위해 버튼을 늘리지 않는 이유

"display: block" 및 "width: auto"를 버튼에 추가하면 다른 블록 요소처럼 컨테이너를 늘려 채울 것으로 예상할 수 있습니다. 하지만 최신 버전의 Chrome에서는 이 동작이 발생하지 않습니다.

동작 이해

이 동작의 이유는 버튼을 "대체 요소"로 분류하기 때문입니다. " 입력, 선택, 버튼, img, 개체 및 텍스트 영역 요소를 포함하는 대체 요소에는 특정 기본 표시 속성이 있습니다.

CSS 사양에 따르면 대체 요소는 이미지와 같은 외부 리소스에 의해 결정되는 고유 크기를 가질 수 있습니다. 또는 브라우저 컨트롤. 예를 들어, 이미지 요소의 너비가 "자동"으로 설정된 경우 연결된 이미지 파일의 실제 너비가 사용됩니다.

또한 대체된 요소에는 요소 자체에서 부과하는 시각적 서식 요구 사항이 있을 수 있습니다. CSS의 제어 범위를 벗어나는 양식 요소에 대한 사용자 인터페이스 컨트롤의 모양입니다.

이것이 버튼에 미치는 영향

버튼은 순수하게 대체된 요소로 간주되지 않습니다. W3C에서 정의한 대로 이 컨텍스트에서 유사하게 작동합니다. 기본적으로 콘텐츠에 따른 고유한 크기가 있으며 "display: block"은 이 동작을 재정의하지 않습니다.

버튼 늘리기 솔루션

원하는 경우 버튼을 늘려 컨테이너를 채우는 경우 대체 접근 방식을 사용할 수 있습니다.

<code class="css">button {
  display: flex;
  width: 100%;
}</code>

Flexbox를 사용하면 요소 크기 조정을 더 효과적으로 제어할 수 있으며 사용 가능한 공간을 채우기 위해 요소를 늘릴 수 있습니다.

위 내용은 Chrome에서 컨테이너를 채우기 위해 \'display: block\' 및 \'width: auto\' 늘이기 버튼을 사용하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!