¿Qué es el Box Sizing en CSS? 🤔

¡Hola, gente bonita! 👋
Quizás te는 encontrado en muchos ejemplos de CSS la siguiente regla를 가지고 있습니다:

*,
*::after,
*::before {
 box-sizing: border-box;
}

Te preguntaras a que se refiere, o porque siempre lo colocan en los estilos. Pues bien, en este articulo te lo explicare hasta con matemáticas…🤭

🧐¿Qué es el 상자 크기 조정?

La propiedad box-sizing (tamaño de caja) establece como se calcula el ancho y alto total de un elemento. Recuerda que en HTML todos los elementos son una caja y es muy importante comprender que es el box-model (modelo de caja) antes de pasar con el box-sizing.

La propiedad box-sizing tiene dos valores posibles: content-box Y border-box . El primero es el valor por defector así que no es necesario colocarlo. Vamos a explicarlo con unos ejemplos…

📦콘텐츠 상자

엔 엘 box-1 텐고 유엔 width 드 100px y 유엔 height 드 120px si yo añado un padding de 5px y un border de 2px ahora la caja va a medir 114px de ancho por 134px de alto. Esto es porque le estoy sumando el padding y border.

.box-1 {
 width: 100px;
 height: 120px;
 padding: 5px;
 border: 2px solid blue;
 box-sizing: content-box;
}

Esto hace que la caja se vea más grande. Para llegar a estas medida total, el navegador hace el siguiente calculo:

최종 너비: 너비 + (왼쪽 패딩 + 오른쪽 패딩) + (오른쪽 테두리 + 왼쪽 테두리)
최종 너비: 100px + (2 * 5px) + (2 * 2px) = 114px

최종 높이: 높이 + (패딩-탑 + 패딩-하단) + (보더-탑 + 보더-하단)
최종 높이: 120px + (2 * 5px) + (2 * 2px) = 134px

El comportamiento por defecto de los navegadores al calcular el ancho y alto de un elemento es aplicar la anchura y altura al área de contenido, sin tener en cuenta el borde y padding.

✅테두리 상자

El border box sirve para evitar lo anterior, sit tu necesitas que el elemento mida exactamente lo que especificaste en el width y height (100px x 120px each each), con el valor border-box lo puedes hacer. Border box hace que los elementos mantengan su tamaño y se usa precisamente para que el box model no se rompa.

.box-2 {
 width: 100px;
 height: 120px;
 padding: 5px;
 border: 2px solid blue;
 box-sizing: border-box;
}

이미지 크기는 86픽셀, 106픽셀, 최대 106픽셀, 너비 y 높이(100픽셀 x 120픽셀)로 지정해야 합니다.

86px x 106px로 판매하시겠습니까? 🥴. Esto porque en lugar de sumar, el padding y border se restan del ancho y del alto para que después la suma total sean las medidas exactas, este calculo lo hace el navegador de la siguiente manera:

너비 - (왼쪽 패딩 + 오른쪽 패딩) - (오른쪽 테두리 + 왼쪽 테두리)
100px - (2 * 5px) - (2 * 2px) = 86px
86px + 10px 패딩 + 4px 테두리 = 100px

높이 - (패딩 상단 + 패딩 하단) - (보더 상단 + 보더 하단)
120px - (2 * 5px) - (2 * 2px) = 106px
106px + 10px 패딩 + 4px 테두리 = 120px

Las diferencias entre content-box y border-box se pueden ver con la siguiente imagen. En el content box el padding y border del elemento se dibujan por fuera de la anchura y altura(se suman), mientras que en border-box, el padding y border se dibujan dentro del ancho y alto(se restan).

⚙️초기화

Para no estar aplicando a cada uno de los elementos la propiedad box-sizing, podemos establecerlo de manera general, es decir, hacemos un "reset"de tal forma que a todos se les aplique el valor border-box, pero podemos hacerlo de dos 구분 형식:

1️⃣범용 박스 사이징

Esta regla lo que hace es aplicar la propiedad box-sizing con su valor border-box a todos los elementos y a todos los pseudoelementos (before y after):

*,
*::after,
*::before {
 box-sizing: border-box;
}

2️⃣상속을 통한 범용 상자 크기 조정

Este último reset se thinka mejor que la anterior. Por ejemplo si tienes un componente que solo fue diseñado para trabajar con el content-box entonces esta regla nos permite facilitar dicho cambio:

html{
 box-sizing: border-box;
}
*,
*::after,
*::before {
 box-sizing: inherit;
}

회귀:

Box Sizing | CSS Tricks

Box Sizing MDN

Leer의 은혜🦸‍♀️
Mi redes sociales donde comparto notas de código: