width: auto vs width: 100%

CSS width 속성은 요소의 너비를 설정합니다.

width: auto

DOM 엘리먼트에는 기본값으로 width: auto가 설정되어 있습니다.

auto는 요소의 너비를 브라우저가 계산해서 지정합니다.

블록 레벨 엘리먼트의 width는 해당 컨테이닝 블록(containing block)내에서 사용 가능 한 모든 수평 공간을 차지하도록 확장됩니다.(수평 padding, border가 있다면 해당 너비를 제외한 나머지 만큼의 공간을 차지합니다)

width: 100%

컨테이닝 블록 너비의 백분율입니다.

컨테이닝 블록의 100%에 가로 padding,margin, border가 추가됩니다.

box-sizing: border-box을 사용하지 않는다면 margin만 100%에 추가됩니다.

컨테이닝 블록(containing block)

요소의 크기와 위치는 컨테이닝 블록의 영향을 받습니다.

어떤 요소의 컨테이닝 블록이 항상 부모 엘리먼트의 콘텐츠 영역이라고 생각 되지만 사실 그렇지는 않습니다.

컨테이닝 블록은 position 속성에 따라 달라집니다.

1. position: static, relative, sticky 중 하나라면 컨테이닝 블록은 가까운 조상 블록 컨테이너(inline-block,block,list-item), 가장 가까운 서식 맥락을 형성하는 조상 요소(table,flex, grid)의 콘텐츠 영역 경계를 따라 형성됩니다.
2. position: absolute인 경우 컨테이닝 블록은 static이 아닌 가까운 조상의 내부 여백 영역입니다.
3. position: fixed는 뷰포트나 페이지영역입니다.
4. position: absolute, fixed 인 경우 다음 조건을 하나라도 만족하는 가까운 조상의 내부 여백 영역이 컨테이닝 블록이 됩니다.

transform, perspective속성이 none이 아닐떄

will-change 속성이 transform, perspective일때

filter 속성이 none일때

contain 속성이 paint일떄

참고링크

difference between width auto and width 100 percent

width

컨테이닝 블록의 모든 것