[css 이론 및 기본 ] box (Block , Inline, Inline-block)

1. Block -> 길막!

 

따로 width를 선언하지 않은 경우 , width = 부모의 content-box 의 100%

따로 width를 선언한 경우 , 남은 공간은 margin 으로 자동으로 채움

margin : 0 auto 쓰면 가운데 정렬 처리 됨

 

따로 부모의 height를 선언하지 않을 경우 , 자식 요소의 height의 합 = 부모의 height

 

 

2. Inline -> 흐름

부모 객체의 width값을 넘어가면 자연스럽게 줄바꿈 처리

 

width, height, padding-top/bottom , border-top/bottom, margin-top/bottom 사용 불가

 

3. Inline-block -> 짬짜면