CSS 시각적 포맷 모델

시각적 형식 모델은 일반적으로 컴퓨터 스크린과 같은 시각적 미디어에서 문서 트리의 요소를 처리하는 방법을 설명합니다.

CSS 시각적 형식 모델

CSS 시각적 형식 모델은 시각적 미디어 문서를 처리하기 위한 알고리즘입니다. 시각적 형식 모델에서, 문서 트리의 각 요소는박스 모델0개나 여러 개의 박스를 생성합니다.

이 박스 레이아웃은 다음 요인에 따라 결정됩니다:

• 박스 크기.

• 요소의 유형(블록 또는 인라인).

• 위치 계획(정상 흐름,浮动와절대 위치)

• 문서 트리에서 요소 간의 관계.

• 외부 정보, 예를 들어, 뷰포트 크기, 이미지의 내장 크기 등.

CSS에서 생성된 상자 유형

웹 페이지에 표시되는 각 요소는 하나의 사각형 상자를 생성합니다. 다음은 요소가 생성할 수 있는 상자 유형에 대한 설명입니다.

블록 요소와 블록 상자

블록 요소는 시각적으로 블록으로 형식화된 요소입니다(즉, 사용 가능한 전체 너비를 차지하며, 요소 앞과 뒤에 줄바꿈이 있습니다). 예를 들어, 문단 요소(<p>등 제목(<h1> - <h6>등 구분(<div>등을 포함합니다.

일반적으로, 블록 요소는 인라인 요소와 다른 블록 요소를 포함할 수 있습니다.

인라인 요소와 인라인 상자

인라인 요소는 원본 문서에서 새로운 내용 블록을 구성하지 않는 요소입니다; 내용은 행에 따라 배치됩니다. 예를 들어, 문단(<em>등 범위(<span>등 강요 요소(<strong>등 내부 강조 텍스트.

인라인 요소는 일반적으로 텍스트와 다른 인라인 요소만 포함할 수 있습니다.

CSS display 속성을 사용하여 요소가 웹 페이지에서 어떻게 표시되는지 변경할 수 있습니다. 다음에서는다음 장에서display 속성을 이해하세요。