HTML의 문서 흐름이란 무엇입니까? HTML 문서 흐름 소개

이 글의 내용은 html의 문서 흐름이 무엇인지에 대한 것입니다. html의 문서 흐름에 대한 소개는 특정 참고 가치가 있습니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다.

1. 문서 흐름 소개

1. "일반적인 문서 흐름"이란 무엇입니까?

플로팅 레이아웃에 대해 알아보기 전에 먼저 '정상적인 문서 흐름'이 무엇인지부터 알아볼까요? 일반적인 문서 흐름에 대한 심층적인 이해는 후속 플로팅 레이아웃 및 위치 지정 레이아웃을 위한 매우 중요한 전제 조건입니다. 독자들이 이 섹션을 놓치지 않기를 바랍니다.

문서 흐름이란 무엇인가요? 간단히 말해서 페이지에 요소가 나타나는 순서입니다.

그럼 "정상적인 문서 흐름"이란 무엇일까요? 먼저 일반 문서 흐름의 간단한 정의를 살펴보겠습니다. 일반 문서 흐름은 양식을 위에서 아래로 행으로 나누고, 블록 요소는 한 행을 차지하고, 인접한 행의 요소는 각 행에서 왼쪽에서 오른쪽으로 배열됩니다.

위 HTML 코드의 문서 흐름은 다음과 같습니다.

<div><div>
<span></span><span><span>
<p></p>
<span></span><i><i><img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/806/931/846/1542014062250099.png"  class="lazy" / alt="HTML의 문서 흐름이란 무엇입니까? HTML 문서 흐름 소개" >
<hr/>

설명:

#🎜🎜 #div, p, hr은 모두 블록 요소이므로 배타적인 라인을 차지하기 때문입니다. Span, i, img는 모두 인라인 요소이므로 두 인라인 요소가 인접해 있으면 같은 줄에 위치하며 왼쪽에서 오른쪽으로 정렬됩니다.

2. "정상적인 문서 흐름에서 벗어남"이란 무엇입니까?

문서 흐름에서 벗어나는 것은 일반적인 문서 흐름을 기준으로 합니다. 일반적인 문서 흐름은 CSS 스타일을 사용하여 제어하지 않는 HTML 문서 구조입니다. 작성하는 인터페이스의 순서는 웹 페이지가 표시되는 순서입니다. 예를 들어 5개의 div 요소를 작성했습니다. 일반적인 문서 흐름은 이러한 5개의 div 요소를 순서대로 표시하는 것입니다. div 요소는 블록 요소이므로 각 div 요소는 자체 줄을 차지합니다:

HTML 코드:

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>

The 위 그림은 일반적인 문서 흐름에 따라 표시되는 렌더링입니다.

그러면 소위 문서 흐름에서 분리된다는 것은 표시되는 위치가 문서 코드의 순서와 일치하지 않는다는 것을 의미합니다. 예를 들어 CSS 컨트롤을 사용하여 마지막 div 요소를 표시할 수 있습니다. , 아래와 같이 첫 번째 div 요소의 위치를 ​​지정합니다.

위 그림에서는 HTML 코드의 순서를 변경하지 않고 CSS를 사용할 수 있습니다. to id="div5" div 요소는 일반 문서 흐름에서 "끌어낸" 다음 다른 div 요소 앞에 표시됩니다. 이 경우 id="div5"인 div 요소는 "일반적인 문서 흐름에서 벗어났습니다".

CSS 레이아웃에서는 플로팅 또는 위치 지정 기술을 사용하여 "일반적인 문서 흐름에서 분리"를 달성하여 원하는 대로 페이지 레이아웃을 제어할 수 있습니다.

위는 html의 문서 흐름에 대한 완전한 소개입니다.

Html5 튜토리얼에 대해 더 알고 싶으시면, PHP 중국어 웹사이트에 주목하세요.

위 내용은 HTML의 문서 흐름이란 무엇입니까? HTML 문서 흐름 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!