Css (Box)

BoxModel

---

weight = 가로

height = 세로

padding = 안쪽 여백

border = 테두리   (크기 형태 색깔 3개다 정해줘야됨!!!!)

margin = 바깥 여백

 

 

Box-sizing

---

css의 boxmodel의 box-sizing 은 content-box으로 지정되는데

이렇게 되면 padding값을 바꿀 때  Box 자체의 크기까지 변경되어 좀 귀찮아질 수 있음

그러므로 초기설정 때 

*{

   box-sizing = border-box;

}

로 해주면 편함

 

Block ( 길막)

---

다른 박스가 자신의 라인에 침범 못하고 다음 줄로 넘어감

 

따로 width를 설정하지 않은경우  width = 부모의 content-box의 100%

따로 width를 설정한 경우 남은 공간은 margin으로  자동으로 채움

 

 

box모델의 모든 특성( padding margin weight height 등) 다 쓸 수 있음

 

 

inline (흐름)

---

한글과컴퓨터 쓰듯이 주어진 라인 다 쓰면 다음 라인으로 자동으로 넘어감(흐름!!)

## weight height padding-top padding-bottom margin-top margin-bottom border-top border-bottom 사용 못함!!!!

 

inline-block(짬뽕)

---

block기능과 inline기능을 둘다 사용가능하게 해줌!