[CSS] Box Model

Box Model

 

 

border: 굵기, 스타일, 색상 꼭 필요 ( border: 1px solid red )

border-radius: 둥글게 변함

 

---

box sizing

 

★CSS 처음 시작할 때 무조건 이걸로 시작★

 

* {

box-sizing: border-box

}

 

content-box는 딱 콘텐트 영역만 포함해서 width, height 값 결정하기 때문에 border-box 쓰는게 좋음

---

Box 파헤치기

 

(1) Block --> 길막!

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

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

 

※ margin: 0 auto; -->가운데 정렬

-width, height, padding, border, margin 모두 가능

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

=부모의 height의

 

 

(2) Inline --> 흐름

-콘텐츠를 옆으로 흐르게 하는 것

-사용 불가: width,height,

padding-top, padding-bottom,

border-top, border-bottom,

margin-top, margin-bottom

 

 

(3) Inline block -->block+inline

 

(4) Float

-가로배치, 붕 뜨는 느낌?

-float되면 block으로 바뀜

but 길막을 못하는 block으로 (content 길이 만큼만!)

width 설정했을 때 margin 자동으로 생기지는 않음

-float되면 레이아웃이 망가짐 ㅠㅡㅠ (요즘엔 거의 안쓰긴함)