blob: 41f2f7cf8be22839d519a22a3a5f4c3feb532343 (
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
166
167
168
169
170
|
---
title: CSS Box Model
slug: Web/CSS/CSS_Box_Model
tags:
- CSS
- CSS Box Model
- CSS Reference
- Modelo de Caixa CSS
- NeedsTranslation
- Overview
- Referencia CSS
- TopicStub
translation_of: Web/CSS/CSS_Box_Model
---
<div>{{CSSRef}}</div>
<p><strong>CSS Box Model (Modelo de Caixa CSS)</strong> é um módulo de CSS que define caixas retangulares, incluindo preenchimento (padding) e margem (margin), que são gerados por elementos e dispostos de acordo com o <a href="/en-US/docs/Web/CSS/Visual_formatting_model">modelo de formato visual</a>.</p>
<h2 id="Referência">Referência</h2>
<h3 id="Propriedades">Propriedades</h3>
<h4 id="Propriedades_que_controlam_o_fluxo_de_conteúdo_em_uma_caixa">Propriedades que controlam o fluxo de conteúdo em uma caixa</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="Propriedades_que_controlam_o_tamanho_de_uma_caxia">Propriedades que controlam o tamanho de uma caxia</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="Propriedades_que_controlam_as_margens_de_uma_caixa">Propriedades que controlam as margens de uma caixa</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="Propriedades_que_controlam_o_preenchimento_padding_de_uma_caixa">Propriedades que controlam o preenchimento (padding) de uma caixa</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="Outras_propriedades">Outras propriedades</h4>
<div class="index">
<ul>
<li>{{cssxref("box-shadow")}}</li>
<li>{{cssxref("visibility")}}</li>
</ul>
</div>
<h2 id="Guias_e_ferramentas">Guias e ferramentas</h2>
<dl>
<dt></dt>
<dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introdução ao modelo de caixa CSS</a></dt>
<dd>Explicações de uma concepção fundamental no CSS, o modelo de caixa: descreve o sentido de margem, preenchimento, tambem como as diferentes áreas da caixa.</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Dominando o colapso da margem</a></dt>
<dd>Na maioria dos casos, duas margens adjacentes são colapsadas em uma. Este artigo descreve quando isso acontecwe e como controlar isso.</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Gerador de sombra de caixa</a></dt>
<dd>Uma ferramenta interativa que permite criar sombras visualmente e gerar a sintaxe necessária para a propriedade {{cssxref("box-shadow")}}.</dd>
</dl>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Situação</th>
<th scope="col">Comentário</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>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</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>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</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>
|
