What is the purpose of box-sizing, and how does it affect layout?

The box-sizing property controls how the browser calculates an element's total width and height. When set to box-sizing: border-box;, the padding and border are included in the element’s width and height, making it easier to manage layouts without extra space being added outside the specified dimensions.