CSS 中的 Box Sizing 是什么？ 🤔
¡你好，善良的好人！ 👋
测验中有很多 CSS 错误的例子：
*,
*::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 box sizing?
La propiedad box-sizing (tamaño de caja) is setablece como se calula el ancho y alto Total de un elemento. Recuerda que en HTML todos los elementos son una caja y es muyy 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-boxy border-box。如果没有必要的话，我将首先勇敢地叛逃。 Vamos 是一个明确的例子……
📦内容框
En el box-1tengo un widthde 100pxy un heightde 120pxsi yo añado un padding de 5pxy un border de 2pxahora 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
与计算的锚点和中音的导航者的缺陷相匹配，将锚点和其他区域的内容应用到内容中，并在边界和填充中进行操作。
✅边框框
前部的边框框是必需的，它需要宽度 y 高度（分别为 100 像素 x 120 像素）的具体元素，并且需要边框框的勇气。边框盒具有 Elementos mantengan su tamaño 和 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;
}
Como puedes ver en la imagen el content tiene una medida de 86px de ancho por 106px de alto, si esto lo sumas al padding y border las medidas son las Mismas que especaste en width y height (100px x 120px).
但出售 86 像素 x 106 像素吗？ 🥴。 Esto pasa 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 excasas, 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
内容框和边框框之间的差异与图像不同。内容框的填充和边框是元素元素的dibujan por fuera de la anchura y altura (se suman)，mientras que en border-box，填充和边框是dibujan dentro del ancho y alto (se restan)。
⚙️重置
如果您要应用框尺寸属性的元素，请按照以下步骤进行设置：
1️⃣通用盒子尺寸
Esta regla lo que hace es aplicar la propiedad box-sizing con su valor border-box a todos los elementos ya todos los fakeelementos (before y after):
,
::after,
*::before {
box-sizing: border-box;
}
2️⃣通用盒子尺寸及继承
请重新考虑前部的情况。例如，与内容盒相关的组件是单独的组件，因此您可以方便地进行操作：
html{
box-sizing: border-box;
}
,
::after,
*::before {
box-sizing: inherit;
}
资源：
感谢您🦸🏻♀️
社交方面的注意事项：
▶️YouTube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵TikTok