blob: c7567ce8d036e1a1dc5c97f82778f6a9c27252eb (
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
|
---
title: box-sizing
slug: Web/CSS/box-sizing
tags:
- CSS
- Propriedades
- Web
translation_of: Web/CSS/box-sizing
---
<p>A propriedade CSS box-sizing é utilizada para alterar a propriedade padrão da box model, usada para calcular larguras (widths) e alturas (heights) dos elementos. É possível usar essa propriedade para emular o comportamento dos navegadores (browsers) que não suportam corretamente a especificação da propriedade CSS box model.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax">Sintaxe formal</a>: {{csssyntax("box-sizing")}}
</pre>
<pre>box-sizing: content-box
box-sizing: border-box
box-sizing: inherit
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>content-box</code></dt>
<dd>Essa é o estilo padrão, conforme especificado pela norma CSS. As propriedades {{Cssxref("width")}} (largura) e {{Cssxref("height")}} (altura) são medidas incluindo só o conteúdo, mas não o padding, border ou margin. Nota: Padding, border e margin serão fora da box. Exemplo.: Se .box {width: 350px} então se você aplicar uma propriedade {border: 10px solid black;} o resultado renderizado no navegador (browser) será .box {width: 370px;}</dd>
<dt><code>padding-box</code>{{experimental_inline}} {{obsolete_inline}}</dt>
<dd>As propriedades de largura ({{Cssxref("width")}}) e de altura ({{Cssxref("height")}}) incluem o tamanho padding size, mas não incluem a propriedade border ou margem.</dd>
<dt><code>border-box</code></dt>
<dd>As propriedades de largura ({{Cssxref("width")}}) e de altura ({{Cssxref("height")}}) incluem o tamanho padding size e a propriedade border, mas não incluem a propriedade margin.</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<pre class="brush:css">/* funciona em Firefox, WebKit, Opera and IE8+ */
/* exemplo de uso no navegador Firefox */
.exemplo {
-moz-box-sizing: border-box;
box-sizing: border-box;
}</pre>
<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 Basic UI', '#box-sizing', 'box-sizing')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{Compat("css.properties.box-sizing")}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en-US/docs/CSS/box_model">CSS box model</a> [Eng]</li>
</ul>
|
