블록 요소 스타일의 하위 요소가 포함된 경우 인라인 요소의 동작은 어떻게 변경되며, 이는 상위 요소가 블록 요소로 정의된 시나리오와 어떻게 다릅니까?

display:block 내부 디스플레이:인라인

CSS 세계에서 인라인 요소는 일반적으로 텍스트 덩어리처럼 동작합니다. 블록 요소는 새 줄을 시작하는 반면 부모 줄입니다. 그러나 인라인 요소의 동작은 블록 요소로 스타일이 지정된 하위 요소를 포함할 때 더욱 복잡해집니다.

CSS 2.1 사양에 설명된 대로 다음 시나리오를 고려하세요.

<code class="css">body { display: inline }
p    { display: block }</code>

여기서 이 경우 body 요소에는 display: 인라인 스타일이 있고 하위 요소 p에는 display: 블록 스타일이 있습니다. 이 조합은 처음에 인라인으로 정의된 body 요소가 블록 요소처럼 동작하는 것처럼 보이는 독특한 상황을 만듭니다.

블록 수준 p 요소가 있으면 body 요소가 익명 블록 상자로 분리됩니다. 텍스트 내용 주변(p 앞의 C1 및 p 뒤의 C2). p 요소는 이러한 익명 상자의 형제가 됩니다.

시각적으로 결과 상자는 다음과 같이 표시될 수 있습니다.

+- anonymous block box around body ---+
| +- anonymous block box around C1 -+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- P block box -------------------+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- anonymous block box around C2 -+ |
| |                                 + |
| +---------------------------------+ |
+-------------------------------------+

이 동작은 body 요소가 다음과 같이 정의된 시나리오와 다릅니다. 블록 요소(디스플레이: 블록). 블록 요소의 경우 본문의 텍스트 내용은 익명 상자로 분할되지 않고 본문 요소 자체 내에 포함됩니다.

+--------------------------------------+
| This is anonymous text before the P. |
|                                      |
| This is the content of P.            |
|                                      |
| This is anonymous text after the P.  |
+--------------------------------------+

두 사례의 주요 차이점 중 하나는 익명의 블록박스. CSS 2.1 사양에는 익명 블록 상자를 생성하는 요소에 설정된 속성이 해당 상자와 해당 내용에 계속 적용된다고 명시되어 있습니다. 이는 인라인 요소에 의해 생성된 익명 상자에 테두리나 패딩과 같은 속성이 적용된다는 것을 의미합니다.

요약하면, 블록 요소를 포함하는 인라인 요소는 블록 요소와 비슷하게 동작하는 것처럼 보이지만, 속성이 적용되고 레이아웃이 렌더링되는 방식에 미묘한 차이가 있습니다. CSS 2.1 사양은 이러한 차이점에 대한 자세한 설명을 제공하여 개발자가 웹 페이지에서 해당 요소의 동작을 이해하는 데 도움을 줍니다.

위 내용은 블록 요소 스타일의 하위 요소가 포함된 경우 인라인 요소의 동작은 어떻게 변경되며, 이는 상위 요소가 블록 요소로 정의된 시나리오와 어떻게 다릅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!