initial commit

1 files changed, 119 insertions, 0 deletions

diff --git a/files/es/web/css/box-sizing/index.html b/files/es/web/css/box-sizing/index.html
new file mode 100644
index 0000000000..5fbea86747
--- /dev/null
+++ b/files/es/web/css/box-sizing/index.html
@@ -0,0 +1,119 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+  - CSS
+  - Layout
+  - Propiedades CSS
+  - Web
+translation_of: Web/CSS/box-sizing
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad CSS <strong><code>box-sizing</code></strong> como el {{glossary("user agent")}} debe calcular el ancho y alto total de un elemento.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div>
+
+
+
+<p>Por defecto en el <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">modelo de caja de CSS</a>, el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algun borde (border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el tamaño de la caja que es desplegada en pantalla. Esto significa que cuando se definen el ancho y alto, se tiene que ajustar el valor definido para permitir cualquier borde o relleno que se pueda añadir.</p>
+
+<p>La propiedad <code>box-sizing</code> puede ser usada para ajustar el siguiente comportamiento:</p>
+
+<ul>
+ <li><code>content-box</code> es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado.</li>
+ <li><code>border-box</code> le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos.</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<p>La propiedad <code>box-sizing</code> es especificada como una sola palabra clave elegida de la lista de valores que aparece abajo.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>Este es el valor inicial y por defecto especificado por el estándar CSS. Las propiedades {{Cssxref("width")}} and {{Cssxref("height")}} no incluyen el borde, relleno o margen. Por ejemplo, <code>.box {width: 350px; border: 10px solid black;}</code> despliega una caja con un ancho de 370 pixeles.</dd>
+ <dd>Aquí, las dimensiones de un elemento son calculados como: ancho = ancho del contenido, altura = altura del contenido. (Los bordes y rellenos no son incluídos en el cálculo.)</dd>
+ <dt><code>border-box</code></dt>
+ <dd>Las propiedad de {{Cssxref("width")}} y {{Cssxref("height")}} incluyen el contenido, relleno y borde pero no incluyen el margén. Tenga en cuenta que el relleno y borde estarán dentro de la caja. Por ejemplo, <code>.box {width: 350px; border: 10px solid black;}</code> despliega una caja con un ancho de 350 pixeles. La caja de contenidos no puede ser negativo y tiene un valor mínimo de 0, haciendo imposible usar el <code>border-box</code> para hacer que el elemento desaparezca.</dd>
+ <dd>Las dimensiones del elemeno se calculan como: ancho = borde + relleno + ancho del contenido, y altura = borde + relleno + altura del contenido.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo muesta cómo diferentes valores de tamaño de la caja (<code>box-sizing</code>) alteran el tamaño desplegado de dos elementos idénticos.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="content-box"&gt;Contenido de la caja&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="border-box"&gt;Borde de la caja&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Ancho  total: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Altura total: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Ancho de la caja de contenido: 160px
+     Altura de la caja de contenido: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Ancho total: 160px
+     Altura total: 80px
+     Ancho de la caja de contenido: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Altura de la caja de contenido: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Ejemplo', 'auto', 300)}}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+
+
+<p>{{Compat("css.properties.box-sizing")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Modelo de caja de CSS</a></li>
+</ul>