(CSS) box-sizing border-box 다들 쓰라는데 이유가 뭔가요? width 100px 줬는데 실제로 더 커져요

입문 강의 보면 시작할 때 무조건 이 코드부터 넣고 시작하라고 하던데요,

* { box-sizing: border-box; }

그냥 시키니까 따라 쓰긴 했는데 이게 정확히 뭘 하는 건지 몰라서 답답합니다. 안 쓰면 뭐가 문제인지 직접 겪어봐야 이해가 될 것 같아서요.

실제로 이런 상황이 있었어요. 박스 하나 만들고 너비 100px 주고 패딩이랑 테두리도 넣었거든요.

.box {
  width: 100px;
  padding: 20px;
  border: 5px solid black;
}

분명 width를 100px로 줬는데 개발자도구로 찍어보니 실제 박스 너비가 150px로 나와요. 좌우 패딩 20씩 40, 테두리 5씩 10 더해져서 그런 것 같긴 한데, 그럼 제가 준 100px는 대체 어디 값인 건가요?

이 상태에서 box-sizing: border-box 넣으니까 딱 100px로 맞춰지긴 하더라고요. 근데 왜 이렇게 동작이 바뀌는 건지, 기본값일 때랑 border-box일 때 100px가 각각 어디를 가리키는 건지 박스 모델 개념으로 좀 풀어서 설명해주시면 감사하겠습니다. 왜 다들 border-box를 기본으로 깔고 가는지도 궁금해요.