Das CSS-Box-Modell beschreibt, die Dimensionen von Block-Level-Elementen. Neu ist die Möglichkeit mit CSS3 zu bestimmen, ob sich die Breitenangabe auf den Inhalt des Elementes (also zum Beispiel den Text eines Absatzes) oder auf das Element inklusive Innenabstände und Rahmen beziehen soll.
Manchmal ist das sinnvoll, zum Beispiel, wenn man möchte, dass ein Element genauso breit ist, wie sein Elternelement. Nach dem CSS-Box-Modell bezieht sich die Breitenangabe nämlich auf den Inhalt. Rahmen und Innenabstände werden hinzugefügt, so dass zum Beispiel ein Formularfeld mit border und padding nicht mehr ins Elternelement passt. Hier hilft die neue Eigenschaft box-sizing. Mit „box-sizing:border-box; width:100%“ kann man erreichen, dass ein Element genauso breit ist, wie sein Elternelement. Aber das ist nicht immer der beste Weg. Wann immer möglich sollte statt dessen width:auto verwendet werden. Dann muss man sich um margin, padding oder border nicht selber kümmern. Die Details erklärt ein Artikel auf Berea Street (engl.):
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/