정상 흐름

일반적인 흐름은 대부분의 경우 웹 페이지에 요소가 표시되는 방식입니다. HTML의 모든 요소는 인라인 상자 또는 블록 상자 인 상자 안에 있습니다.

블럭 박스 배치

정상적인 흐름에서 블록 상자는 페이지에 차례로 배치됩니다 ( HTML에 쓰여진 순서대로). 상자를 포함하는 상자의 왼쪽 위에서 시작하여 위에서 아래로 쌓습니다. 각 상자 사이의 거리는 위쪽 여백과 아래쪽 여백이 서로 겹치는 여백으로 정의됩니다.

예를 들어, 다음 HTML이있을 수 있습니다.

이것은 첫 번째 div입니다. 200 픽셀 너비이고 주변에는 5 픽셀의 여백이 있습니다.

이것은 더 넓은 div입니다.

이 div는 두 번째 것보다 약간 넓습니다.

각 DIV는 블록 요소이므로 이전 블록 요소 아래에 배치됩니다. 각 왼쪽 바깥 쪽 모서리는 포함하는 블록의 왼쪽 모서리에 닿아 있습니다.

인라인 박스 배치

인라인 상자는 페이지에서 컨테이너 요소의 맨 위에서 다른 시작 부분에 수평으로 배치됩니다. 인라인 상자의 모든 요소를 ​​한 줄에 맞추기에 충분한 공간이 없으면 다음 줄로 줄 바꿈하고 세로로 스택합니다.

예를 들어, 다음 HTML에서 :

이 텍스트는 굵게 표시되며이 텍스트는 기울임 꼴 입니다. 그리고 이것은 일반 텍스트입니다.

단락은 블록 요소이지만 5 개의 인라인 요소가 있습니다.

따라서 정상적인 흐름은 이러한 블록 및 인라인 요소가 웹 디자이너의 개입없이 웹 페이지에 표시되는 방식입니다.

페이지에서 요소의 위치에 영향을 주려면 CSS 위치 지정 또는 CSS 부동을 사용할 수 있습니다.