[CSS] Box

Box Model

 

content : 콘텐츠가 들어있는 상자, 가로는 width /  세로는 height

padding : 안쪽여백이다, content와 border사이 공간

border : 테두리 , ( ex : 1px solid #000 ) 굴기 스타일 색상 을 명시해야함 / 쓰고싶지 않을경우 none (border-radius: 4px -> 둥글게 만들어 준다)

margin : 요소와 요소 사이의 간격을 나타냄

Box Sizing

안의 내용과 상관없이 해당 box size를 정할 수 있다.ex) box-sizing : border-box

* {
    box-sizing: border-box;
}
//모든 요소들에 대해서 box sizing이 border box에 맞춰서 사이징 한다

Box의 종류(display)

1)Block

길막

1. width선언이 없을 경우, width= 부모의 content-box의 100%

2. width를 선언했을 경우, 남은공간은 margin으로 자동으로 채운다

3. margin: 0 auto;

2)Inline

흐름

가로배치가 자동으로 적용됨

나열식 box이며 width,height,padding-top,padding-bottom,border-top,border-bottom,margin-top,margin-bottom 사용불가

3)Inline block

blcok & inline

block 과 inline의 장점을 동시에 가진다.

4)Flex

,,,?