CSS 문서 흐름, 블록 수준 요소(블록) 및 인라인 요소(인라인) 나는 이전에 많은 책을 읽었고 많은 기사를 읽었습니다. 내가 본 것은 CSS 레이아웃에 대한 단편적인 기본 지식뿐이며 이는 상대적으로 피상적입니다. O' Reilly, 나는 그 책에서 언급된 문서 흐름의 개념이 나를 매우 예민하게 만들었다는 것을 알았습니다. 안타깝게도 이 책에서는 문서 흐름이 무엇인지 설명하지 않았습니다. 아마도 저자는 이 개념을 언급할 가치가 없다고 생각했을 것입니다. 정말 중요합니다. 이해하고 나면 CSS 레이아웃 이론이 이해하기 쉬워지고 CSS 디자인의 합리성을 깨닫게 되므로 추측과 실험을 바탕으로 실수가 있으면 완전히 정상입니다. .
문서 흐름
양식을 위에서 아래로 행으로 나누고, 각 행의 요소를 왼쪽에서 오른쪽으로 정렬하는 것이 문서 흐름입니다.
각각의 비부동 블록 수준 요소는 자체 라인을 차지하고 부동 요소는 필요에 따라 라인의 한쪽 끝에 부동됩니다. 현재 줄이 맞지 않으면 새 줄에 부동됩니다.
인라인 요소는 행을 차지하지 않습니다. 거의 모든 요소(블록 수준, 인라인 및 목록 요소 포함)는 하위 요소 배치를 위한 하위 행을 생성할 수 있습니다.
문서 흐름 외부에 요소가 존재하게 되는 세 가지 상황, 즉 부동, 절대 위치 및 고정 위치가 있습니다. 그러나 IE에서는 부동 요소도 문서 흐름에 존재합니다(이것이 합리적이라고 생각합니다><).
플로팅 요소는 일반적인 문서 흐름 공간을 차지하지 않으며 플로팅 요소의 위치는 여전히 일반적인 문서 흐름을 기반으로 하며 문서 흐름에서 추출되어 가능한 한 왼쪽이나 오른쪽으로 이동됩니다. 텍스트 콘텐츠는 부동 요소 주위에 배치됩니다. 일반 문서 흐름에서 요소가 추출되면 문서 흐름에 남아 있는 다른 요소는 해당 요소를 무시하고 원래 공간을 채웁니다.
플로팅의 혼란스러운 개념은 브라우저의 이론 해석으로 인해 발생합니다. 많은 사람들이 IE를 표준으로 사용한다고 할 수 있지만 실제로는 그렇지 않습니다.
문서 흐름을 기반으로 다음과 같은 위치 지정 패턴을 쉽게 이해할 수 있습니다.
상대 위치 지정,
즉, 요소는 문서 흐름의 해당 위치를 기준으로 오프셋되지만 원래 자리 표시자는 유지됩니다.
절대 위치 지정,
즉, 문서 흐름에서 완전히 분리되고 위치 속성의 비정적 값을 사용하여 가장 가까운 상위 요소를 기준으로 오프셋됩니다.
고정 위치,
즉, 문서 흐름과 완전히 분리되어 뷰포트를 기준으로 오프셋됩니다.
다음에는 알 수 없는 몇 가지 질문이 더 있습니다.
세 가지 기본 요소 중 하나로서 인라인 요소와 블록 수준 요소의 주요 차이점은 무엇입니까?
Clear 속성이 올바른 값을 취하는 경우를 어떻게 이해합니까? 실험 상황이 항상 이론과 일치하지 않는 것 같습니다.