1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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"><div class="content-box">Contenido de la caja</div>
<br>
<div class="border-box">Borde de la caja</div></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>
|
