A propriedade box-sizing no CSS3 define como é calculada dimensão (largura e altura) de um elemento, tenha ele padding e border incluso, ou não.
O parâmetro content-box aplica a largura apenas ao conteúdo do elemento, sem considerar demais propriedades como padding e margin.
Sendo assim, soma-se à largura os parâmetros de padding e border estabelecidos.
Logo, a largura estabelecida sofrerá interferência!
#exemplo1 {
box-sizing: content-box;
width: 300px;
padding: 30px;
border: 10px solid blue;
}
Essa div tem largura de 300px.
Mas a largura total é de 300px + 20px (de borda esquerda e direira) + 60px (de padding na direira e na esquerda) = 380px!
Já na aplicação do parâmetro border-box, a largura é aplicada a todas as partes do elemento: conteúdo, padding e bordas, que se ajustarão dentro da box.
A largura estabelecida é a largura que você terá!
#exemplo2 {
box-sizing: border-box;
width: 300px;
height: 300px;
padding: 30px;
border: 10px solid blue;
}
Aqui, a largura total é 300px, independente de qualquer coisa!