width : auto, with: 100% 차이?!

width : auto, 와 with : 100% 가 언뜻 비슷해보여서
헷갈렸는데 오늘 완.전.히 정복!

box-sizing: border-box (기본값)
width: auto(기본값) 인걸 먼저 기억.

100% 와 auto 의 차이를 이해하려면
우선 기준이 누구냐를 확실히 알고 있는게 중요한 것 같다.
기준은 무조건 박스가 속해 있는 부모 박스이다!

width : auto 부모영역을 넘을 수 없고,
width : 100% 는 부모 영역의 크기 만큼 크기를 가진 것이다.

만약, 여기에 마진 (혹은 패딩) 을 넣으면 어떻게 변할까?

박스1 (width:auto) 는 부모 박스 안에 위치 하고 있는데,
박스2 (width:100%) 가 부모 박스의 border를 넘어 가는걸 볼 수 있다.

body를 1000px 이라고 가정하면,

width: auto 는
1000px = 20px (margin)+ 0 (padding) + border + content(980px)
width : 100% 는
1100px =20px (margin)+ 0 (padding) + border + content(1000px)

박스2는 부모 값을 값으로 가지기 때문에 마진이나 패딩을 넣으면
부모 값 이상이 되는 것이다!