입력 요소에서 `display: block`이 예상대로 작동하지 않는 이유는 무엇입니까?

디스플레이: 블록을 사용한 입력 요소의 특성 이해

CSS에서 요소의 디스플레이 속성을 블록으로 설정하면 해당 요소가 일반적으로 컨테이너의 전체 너비에 걸쳐 있는 블록 수준 요소입니다. 그러나 이 속성을 입력 요소에 적용하면 예기치 않은 동작이 발생할 수 있습니다.

문제

표시할 때: 블록이 텍스트 입력에 적용됩니다(<입력 유형= "text">) 일반적인 블록 수준 요소처럼 동작하지 않습니다. 대신, 입력의 크기는 변경되지 않고 한 줄에 텍스트 레이블만 나타납니다.

왜 Div처럼 작동하지 않나요?

이러한 불일치는 입력 요소가 렌더링되는 독특한 방식 때문입니다. 주로 콘텐츠 레이아웃을 위한 div와 달리 입력 필드는 사용자 상호 작용 및 데이터 입력을 위해 설계되었습니다. 따라서 디스플레이: 블록 속성을 재정의하는 자체 기본 스타일 세트가 있습니다.

원하는 효과 달성

입력 필드를 가져오려면 div와 같은 컨테이너의 너비를 변경하려면 기본 스타일을 극복해야 합니다. 가능한 해결 방법은 다음과 같습니다.

• 최대 너비 추가: 100%: 이 해결 방법은 입력 필드가 너비에 패딩과 borders.
• box-sizing 속성 사용: CSS3에서는 box-sizing 기능을 도입했습니다. 속성을 사용하면 요소의 너비를 계산하는 방법을 지정할 수 있습니다. box-sizing 설정: border-box에는 요소 너비에 패딩과 테두리가 모두 포함됩니다.

크로스 브라우저 지원

-sizing 속성은 모든 브라우저에서 지원되지 않으므로 추가 브라우저별 접두사(예: Firefox의 경우 -moz-box-sizing) 브라우저 간 호환성을 위해 필요할 수 있습니다.

위 내용은 입력 요소에서 `display: block`이 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!