박스모델 - wkdalfo12/project_study GitHub Wiki

박스모델 - 레이아웃을 잘 잡을수 있음

• 속성

width - 가로길이

          > width:auto 나의 부모만큼 

          > min-width - 내가설정하는수치 이하는 안 줄어드는(인터넷창을 줄였을때) 

          > max-width - 내가설정하는 수치이상은 안늘어남 

height - 높이

          > height: auto; 나의 컨텐츠 만큼

          > min-height - 설정값 만큼 유지해 주되 그 이상으로 늘어날수 있음

          > max-height - 내가 설정한만큼밖에 안늘어남

padding - 안쪽여백

• padding

border - 바깥테두리선

• border

margin - 바깥여백 (주 목적은 위치잡는것이 아님)

• margin

• 가로의 전체 길이 계산

마진,패딩,양쪽 선 등등 전부 더해주기

예 ) { width: 200px; height: 200px; border: 1px #F00 solid; padding: 10px; margin:10px; }

가로값 = width값200 + border값(양쪽)2 + padding값(양쪽)20 + margin값(양쪽) 20 = 242px