blob: 320800f82e060dcddc44c744fa7374b88aaed44a (
plain)
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
---
title: Modelo de Caja de CSS
slug: Web/CSS/CSS_Modelo_Caja
tags:
- CSS
- Modelo de Caja CSS
- Referencia CSS
- Visión general
translation_of: Web/CSS/CSS_Box_Model
---
<div>{{CSSRef}}</div>
<p><strong>El modelo de caja CSS </strong> es un módulo CSS que define cajas rectangulares, incluyendo sus rellenos y márgenes, que son generadas para los elementos y que se disponen de acuerdo al modelo de formato visual.</p>
<h2 id="Referencia">Referencia</h2>
<h3 id="Propiedades">Propiedades</h3>
<h4 id="Propiedades_que_controlan_el_flujo_del_contenido_en_una_caja.">Propiedades que controlan el flujo del contenido en una caja.</h4>
<div class="index">
<ul>
<li>{{cssxref("box-decoration-break")}}</li>
<li>{{cssxref("box-sizing")}}</li>
<li>{{cssxref("overflow")}}</li>
<li>{{cssxref("overflow-x")}}</li>
<li>{{cssxref("overflow-y")}}</li>
</ul>
</div>
<h4 id="Propiedades_que_controlan_el_tamaño_de_una_caja.">Propiedades que controlan el tamaño de una caja.</h4>
<div class="index">
<ul>
<li>{{cssxref("height")}}</li>
<li>{{cssxref("width")}}</li>
<li>{{cssxref("max-height")}}</li>
<li>{{cssxref("max-width")}}</li>
<li>{{cssxref("min-height")}}</li>
<li>{{cssxref("min-width")}}</li>
</ul>
</div>
<h4 id="Propiedades_que_controlan_los_márgenes_de_una_caja.">Propiedades que controlan los márgenes de una caja.</h4>
<div class="index">
<ul>
<li>{{cssxref("margin")}}</li>
<li>{{cssxref("margin-bottom")}}</li>
<li>{{cssxref("margin-left")}}</li>
<li>{{cssxref("margin-right")}}</li>
<li>{{cssxref("margin-top")}}</li>
</ul>
</div>
<h4 id="Propiedades_que_controlan_los_rellenos_de_una_caja">Propiedades que controlan los rellenos de una caja</h4>
<div class="index">
<ul>
<li>{{cssxref("padding")}}</li>
<li>{{cssxref("padding-bottom")}}</li>
<li>{{cssxref("padding-left")}}</li>
<li>{{cssxref("padding-right")}}</li>
<li>{{cssxref("padding-top")}}</li>
</ul>
</div>
<h4 id="Otras_propiedades">Otras propiedades</h4>
<div class="index">
<ul>
<li>{{cssxref("box-shadow")}}</li>
<li>{{cssxref("visibility")}}</li>
</ul>
</div>
<h2 id="Guías_y_Herramientas">Guías y Herramientas</h2>
<dl>
<dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt>
<dd>Explica uno de los conceptos fundamentales de CSS, el modelo de caja: describe el significado del margen, del relleno, así como de las diferentes zonas de una caja.</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt>
<dd>En determinados casos dos márgenes adyacentes se convierten en uno. Este artículo explica cuando sucede esto y cómo controlarlo.</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a></dt>
<dd>Una herramienta interactiva que permite crear sombras y proporciona la síntaxis necesaria para generar dichas sombras usando la propiedad {{cssxref("box-shadow")}}.</dd>
</dl>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Box")}}</td>
<td>{{Spec2("CSS3 Box")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "box.html")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("CSS1")}}</td>
<td>{{Spec2("CSS1")}}</td>
<td>Definición Inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1")}}</td>
<td>3.0</td>
<td>3.5</td>
<td>1.0 (85)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>1.0</td>
<td>{{CompatGeckoMobile("1")}}</td>
<td>6.0</td>
<td>6.0</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</div>
|
