css - 박스 모델

 

블록 레벨 요소 : 자체가 브라우저 화면에서 한 줄을 차지

인라인 레벨 요소 : 필요한 영역만 차지

 

 

 

 

 

 

box-sizing : box모델의 넓이 계산할때 보더박스까지 계산을 포함해서 넓이가 200px이라는 의미

 

첫번째 박스 크기 : 260 (200+양쪽20+양쪽10)

 

두번째 박스 : box-sizing 200으로 설정했기 때문에 padding과 border까지 포함해서 200인 것을 알 수 있음

 

각각 따로 지정할 때 가장먼저 border-style지정 필요. 없으면 테두리 그려지지 않음

한꺼번에 지정하는 border속성인 경우는 순서 상관 없음.

 

 

border-width : 5px(top,bottom) 10px(right, left)