컨테이닝 박스(containing box) : 부모요소는 하위요소를 위해 컨테이닝 박스를 생성합니다. 부모의 컨테이닝 블록을 기준으로 하위요소의 박스 위치나 크기등을 결정합니다.
블럭박스(block box): div, p, h1~h6와 같은 블럭레벨 요소들은 블럭 박스를 생성합니다.
인라인박스(inline box): span, a, img와 같은 인라인레벨 요소들은 인라인 박스를 생성합니다. 인라인 요소는 부모요소의 컨테이닝 박스에 수평으로 연이어 배치되며 부모요소의 크기를 넘어갈 경우 자동으로 줄이 바뀌어 "행(line)"을 형성합니다.
<그림 추가>
가명 블럭 박스(anonymous block box)
<div>
Some text
<p>More text </p>
Some text
</div>
위 코드는 div요소의 블럭박스 안에 인라인 박스("Some text" 부분)와 블럭 박스(p안의 "More text" 부분)가 섞여 있는것 처럼 보이지만, "Some text"부분도 블럭박스로 취급됩니다. 이렇게 생성된 박스를 가명 블럭 박스라고 합니다.
가명 인라인 박스(anonymous inline box)
<p>
Some text <strong>More text</strong> Some text
</p>
위 코드는 p요소의 블럭 박스 안에 strong요소로 둘러 싸여 있는 "More text"만 인라인블럭을 생성하는 것 처럼 보이지만, 실제로는 Some text부분도 인라인 블럭으로 취급됩니다.
display 속성
display속성을 이용하면 블럭레벨 요소 혹은 인라인레벨의 요소를 만들 수 있습니다.
임의의 요소를 블럭레벨 요소로 만들려면 display의 block, list-item, table값을 이용하면 됩니다.
임의의 요소를 인라인 레벨 요소로 만들려면 inline, inline-table값을 이용하면 됩니다.
*display속성으로 지정될 수 있는 값들 중에서 compact와 run-in이라는 값이 있지만, 대부분의 브라우저에서 지원하고 있지 않습니다.
