비대의 차이점은 무엇입니까 : 100% 디스플레이 효과 부모 요소의 디스플레이 유형이 인라인 또는 인라인 블록 일 때?

width: 100% 동작 차이

요소 width: 100% 설정할 때, 폭은 부모 요소에 비해 계산됩니다. 그러나 상위 요소의 display 속성이 inline 또는 inline-block 인 경우 계산 방법에 차이가있어 디스플레이 효과가 다릅니다.

코드 예제 및 분석

코드 예제를 통해이 차이점을 이해해 봅시다.

예 1 : 부모 요소 display: inline-block

<div>
  <div style="height: 100px;">테스트 내용</div>
  <div style="display: inline-block; border: 1px solid red; padding: 10px; width: 100%;">
    이것은 인라인 블록 요소입니다</div>
</div>

이 예에서, 내부 inline-block 요소의 너비 width: 100% 모성 요소의 너비 (첫 번째 div )에 따라 계산됩니다. 상위 요소 너비는 내용에 따라 적응 적으로 조정됩니다.

예제 2 : 부모 요소 display: inline

<div>
  <div style="height: 100px;">테스트 내용</div>
  <div style="display: inline; border: 1px solid red; padding: 10px; width: 100%;">
    이것은 인라인 요소입니다</div>
</div>

여기에서 width: 100% 내부 inline 요소의 100%가 유효하지 않습니다. inline 요소의 너비는 내용에 의해 결정되며 width 속성은 작동하지 않습니다. width: 100% 부모 요소의 너비에 영향을 미치지 않습니다.

예 3 : 상위 요소의 너비를 제어합니다

inline 요소의 동작을보다 명확하게 보여주기 위해 예제 2를 수정하여 부모 요소에 대한 고정 너비를 설정합니다.

<div style="width: 800px; background-color: aqua;">
  <div style="height: 100px;">테스트 내용</div>
  <div style="display: inline; border: 1px solid red; padding: 10px; width: 50%;">
    이것은 인라인 요소입니다</div>
</div>

width: 50% 설정 되더라도 inline 요소의 너비는 여전히 콘텐츠에 의해 결정되며 부모 요소의 50%를 차지하지 않습니다.

요약 :

width: 100% inline-block 요소에 대해 100% 유효합니다. 폭은 부모 요소의 내용에 따라 적응 적으로 조정되지만 inline 요소에 대해 유효하지 않습니다. 폭은 항상 내용에 의해 결정됩니다. width 속성이 작동하지 않습니다. 부모 요소가 블록 레벨 요소 인 경우 ( display: block , display: flex 등), width: 100% 부모 요소의 전체 너비를 진정으로 점유 할 수 있습니다.

위 내용은 비대의 차이점은 무엇입니까 : 100% 디스플레이 효과 부모 요소의 디스플레이 유형이 인라인 또는 인라인 블록 일 때?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!