CSS box

Box-sizing :

①content-box : content box 사이즈만 500px * 500px

②border-box : content box + padding + border까지 다 포함 520px * 520px; 이때 margin은 포함 X 

 

Box display :

Block 요소 (면,영역) :

     · block 요소는 width, height, padding, border, margin 모두 가능

     · 부모요소가 100px box에 500px 주면 나머지 500px 은 margin이 됨

     · 따로 부모의 height 값이 지정이 안되면 자식요소의 height 합이 부모요소의 height 값

 

Inline 요소 (선, 흐름) :

     · inline 요소는 width, height, padding top&bottom, border top&bottom, margin top&bottom 사용 불가 

 

Inline-block :

      ·inline 요소이면서 block 성질 갖게 해줌 = 흐르는 동시에 block처럼 영역 잡을 수 있음

 

 

+블럭 요소 가운데 배치시키는 방법 중 하나 : margin: 0 auto