La característica principal de esta propiedad es poder modificar el ancho y el alto de los elementos con respecto al modelo de caja.
Y te preguntaras. Pero si puedo definir el alto y el ancho de mi caja con width y height. Y tienes toda la razón. Esa es la forma normal, común y corriente. Pero debes tener en cuenta que en el caso de que quieras añadir un padding, margin o un border el tamaño tanto en el ancho como en el alto de tu elemento ya no serán los que tu indicaste, sino que aumentaran.
¿Como aumentaran?
Aumentaran ya que las propiedades por defecto del modelo de caja indican que la suma del ancho que le diste a tu elemento junto con el padding, el margin y el border será el nuevo valor de ancho de tu elementos
.elemento{
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 10px solid black;
}
Según lo las propiedades por defecto este elemento al sumar todo su ancho interpretado por el navegador será de 160px
Esta como lo había mencionado anteriormente te ayuda definir o modificar la interpretación por el navegador de las dimensiones para tu caja.
border-box
Es posiblemente la propiedad más usada, la cual sirve para que su ancho especificado sea el ancho total. No cuenta ni border, padding ni margins lo cual hace muy fluido la posición de elementos
padding-box
Esta propiedad reduce su uso, pero suele ser muy practica para ciertos casos y “ojito ojito” dice leonidas esteban que solo esta soportada por Firefox, pero no te preocupes, no es que la necesites de a mucho.
esta propiedad tendrá en cuenta dentro de sus dimensiones el padding, es decir que en su ancho además de los valores especificados se sumara su padding dejando por fuera a borde y a el margin
content-box
Esta propiedad es el valor inicial box-sizing es decir que su ancho será igual a los tres elementos mencionados anteriormente. es casi lo mismo que no declarar la propiedad de box-sizing a un elemento.
*Gracias por su atención, espero que les haya servido, y cualquier comentario o critica constructiva será bien aceptada en los comentarios.
Curso de Desarrollo Web Online 2016
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE







