요약:
1. 블록 요소에는 인라인 요소 또는 특정 블록 요소가 포함될 수 있습니다(위의 예는 실제로 잘못된 사용입니다--->를 안에 넣습니다).
)
, 그러나 인라인 요소는 블록 요소를 포함할 수 없으며 다른 인라인 요소만 포함할 수 있습니다
2, 사용을 위해 DTD는 블록 수준 요소를 규정합니다.
3. 핵심 사항: 세 가지 수준의 블록 요소
4. 인라인 요소에는 없는 너비와 높이가 있습니다. W3C는 이를 대체 요소로 정의합니다. 요소를 display:inline-block으로 설정하면 대체 요소의 효과가 시뮬레이션됩니다. ㅋㅋㅋ
하지만 많은 오류가 발생하여 매우 놀랐습니다. 그래서 이유를 조사한 결과 p가 블록 수준 요소 P 내에 중첩될 수 없다는 것을 발견했습니다.
심층 조사: HTML의 거의 모든 요소는 인라인 요소이거나 블록 요소이므로 먼저 인라인 요소와 블록라인 블록 요소를 이해해 보겠습니다.
in-line이라는 단어는 inline, inline, inline, line level 등 다양한 해석이 있습니다. 그러나 여기서는 모두 동일한 의미를 의미합니다. 여기서는 관례적인 이름인 inline Union을 선택합니다. 먼저 아래 예를 보면 둘 사이의 차이점을 이해할 수 있을 것입니다. 블록 요소와 인라인 요소 사이의 차이점을 테스트해 보세요.
블록 요소
와 인라인 요소
효과는 다음과 같습니다.
위에서 예를 들어
는 자체적으로 새 줄을 생성하지만 은 CSS 렌더링이 없는 경우에만 적용되며, CSS를 통해 p를 정의할 수도 있습니다. 블록 요소는 HTML에서 임의로 변환할 수 없습니다. 블록 요소에는 인라인 요소나 특정 블록 요소가 포함될 수 있습니다(위의 예는 실제로 잘못된 사용입니다---> 안에
를 넣었습니다).
그러나 인라인 요소는 블록 요소를 포함할 수 없으며 다른 인라인 요소만 포함할 수 있습니다, 이것을 다시 살펴보세요:<h2>我喜欢在<a href="#" >经典论坛</a>讨论Web标准的原因。</h2>
로그인 후 복사
여기서
일부 블록 요소가 다른 블록 요소를 포함할 수 없는 경우가 있습니다. 예:
<p>测试文字
<ul>
<li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li>
</ul>
测试文字
</p>
로그인 후 복사
그리고 이건 괜찮습니다.
<ul>
<li><p>这样是可以的</p></li>
</ul>
로그인 후 복사
왜요? 우리가 사용하는 DTD에서는 블록 수준 요소를
안에 배치할 수 없다고 규정하고 일부 브라우저에서는 이 쓰기 방법을 허용합니다.
<p>这是一个段落的开始
<p>这是另一个段落的开始
로그인 후 복사
当一个签还没结束时，遇到下一个块元素就会把自己结束掉，其实浏览器是把它们处理成这样：
<p>这是一个段落的开始</p>
<p>这是另一个段落的开始</p>
로그인 후 복사
所以刚才那样的写法会变成这样：
<p>测试文字</p>
<ul>
<li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li>
</ul>
测试文字<p></p>
로그인 후 복사
这也是跟刚才说第一个例子中里面放
不合理是同一个道理。
以下为重点理解部分：
那哪些块元素里面不能放哪些块元素呢？我知道你有这个疑问，也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的，我们已经知道是在最外层，下一级里面只会有<head>、、
위에서 예를 들어