diff options
Diffstat (limited to 'files/pt-br/web/css/width/index.html')
| -rw-r--r-- | files/pt-br/web/css/width/index.html | 411 |
1 files changed, 411 insertions, 0 deletions
diff --git a/files/pt-br/web/css/width/index.html b/files/pt-br/web/css/width/index.html new file mode 100644 index 0000000000..3946c80d75 --- /dev/null +++ b/files/pt-br/web/css/width/index.html @@ -0,0 +1,411 @@ +--- +title: width +slug: Web/CSS/width +tags: + - CSS + - CSS Property + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - PrecisaDeCompatibilidadeDeNavegador + - PrecisadeCompatibilidadeMobile + - Propriedade CSS + - Reference + - Referencia +translation_of: Web/CSS/width +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumo">Resumo</h2> + +<p>A propriedade <a href="pt-BR/docs/Web/CSS">CSS</a> <strong>width</strong> determina a largura da área de conteúdo de um elemento. A <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">área de conteúdo</a> fica dentro do preenchimento, da borda, e da margem de um elemento.</p> + +<p>As propriedades {{cssxref("min-width")}} e {{cssxref("max-width")}} sobrescrevem o {{cssxref("width")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css">/* Valores de largura - <length> */ +width: 300px; +width: 25em; + +/* Valores percentuais - <percentage> */ +width: 75%; + +/* Valores com palavras-chave */ +width: 25em border-box; +width: 75% content-box; +width: max-content; +width: min-content; +width: available; +width: fit-content; +width: auto; + +/* Valores Globais */ +width: inherit; +width: initial; +width: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Veja {{cssxref("<length>")}} para possíveis unidades.</dd> + <dt><code><percentage></code></dt> + <dd>Especificado como {{cssxref("<percentage>")}} da largura do bloco contido. Se a largura do bloco contido depender da largura do elemento, o layout resultante é indefinido.</dd> + <dt><code>border-box </code>{{experimental_inline}}</dt> + <dd>Se presente, o precedente {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} é aplicado para o border box do elemento.</dd> + <dt><code>content-box</code> {{experimental_inline}}</dt> + <dd>Se presente, o precedente {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} é aplicado para o content box do elemento.</dd> + <dt><code>auto</code></dt> + <dd>O navegador irá calcular e selecionar a largura para o elemento específicado.</dd> + <dt>fill {{experimental_inline}}</dt> + <dd>Use o fill-available inline size ou fill-available block size, como um modo apropriado de escrita.</dd> + <dt><code>max-content</code> {{experimental_inline}}</dt> + <dd>Da largura interna preferível.</dd> + <dt><code>min-content</code> {{experimental_inline}}</dt> + <dd>Da largura interna mínina.</dd> + <dt><code>available</code> {{experimental_inline}}</dt> + <dd>Do bloco contendo a largura menos a margin horizontal, borda ou preenchimento.</dd> + <dt><code>fit-content</code> {{experimental_inline}}</dt> + <dd>A largura: + <ul> + <li>do comprimento interno mínimo.</li> + <li>do menor comprimento interno preferível e da largura disponível.</li> + </ul> + </dd> +</dl> + +<h3 id="Sintaxe_Formal">Sintaxe Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Largura_padrão">Largura padrão</h3> + +<pre class="brush:css">p.douradinho { + background: gold; +}</pre> + +<pre class="brush:html"><p class="douradinho">A comunidade Mozilla produz diversos softwares incríveis.</p></pre> + +<p>{{EmbedLiveSample('Largura_padrão', '500px', '64px')}}</p> + +<h3 id="Pixels_e_ems">Pixels e ems</h3> + +<pre class="brush: css">.largura_px { + width: 200px; + background-color: red; + color: white; + border: 1px solid black; +} + +.largura_em { + width: 20em; + background-color: white; + color: red; + border: 1px solid black; +} +</pre> + +<pre class="brush: html"><div class="largura_px">Largura medida com px</div> +<div class="largura_em">Largura medida com em</div></pre> + +<p>{{EmbedLiveSample('Pixels_e_ems', '500px', '64px')}}</p> + +<h3 id="Porcentagem">Porcentagem</h3> + +<pre class="brush: css">.porcentagem { + width: 20%; + background-color: silver; + border: 1px solid red; +}</pre> + +<pre class="brush: html"><div class="porcentagem">Largura em porcentagem</div></pre> + +<p>{{EmbedLiveSample('Porcentagem', '500px', '64px')}}</p> + +<h3 id="max-content">max-content</h3> + +<pre class="brush:css;">p.maxgreen { + background: lightgreen; + width: intrinsic; /* Safari/WebKit uses a non-standard name */ + width: -moz-max-content; /* Firefox/Gecko */ + width: -webkit-max-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="maxgreen">A comunidade Mozilla produz diversos softwares incríveis.</p></pre> + +<p>{{EmbedLiveSample('max-content', '500px', '64px')}}</p> + +<h3 id="min-content">min-content</h3> + +<pre class="brush:css">p.minblue { + background: lightblue; + width: -moz-min-content; /* Firefox */ + width: -webkit-min-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="minblue">A comunidade Mozilla produz diversos softwares incríveis.</p></pre> + +<p>{{EmbedLiveSample('min-content', '500px', '155px')}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Adicionadas as palavras-chave <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Lista a largura como animável.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Determina em qual elemento vai ser aplicado.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#width', 'width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definição inicial</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Adiciona novas palavras-chave para largura e altura.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td>Animação{{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>max-content</code>{{experimental_inline}}</td> + <td>{{CompatChrome(22.0)}} {{property_prefix("-webkit")}}<br> + {{CompatChrome(46.0)}} [1]</td> + <td>{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>15 {{property_prefix("-webkit")}}</td> + <td>2.0 (421) (<code>intrinsic</code> value)<br> + 6.1 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>min-content</code>{{experimental_inline}}</td> + <td> + <p>{{CompatChrome(22.0)}} [4] {{property_prefix("-webkit")}}<br> + {{CompatChrome(46.0)}} [1]</p> + </td> + <td>{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>15 {{property_prefix("-webkit")}}</td> + <td>2.0 (421) (<code>min-intrinsic</code> value)<br> + 6.1 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>available</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td><code>fill-available</code>{{experimental_inline}}</td> + <td>{{CompatChrome(22.0)}} {{property_prefix("-webkit")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>6.1 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>fit-content</code>{{experimental_inline}}</td> + <td>{{CompatChrome(22.0)}} [4] {{property_prefix("-webkit")}}<br> + {{CompatChrome(46.0)}} [1]</td> + <td>{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>15 {{property_prefix("-webkit")}}</td> + <td>6.1 {{property_prefix("-webkit")}}<sup>[2]</sup></td> + </tr> + <tr> + <td><code>border-box</code> e <code>content-box</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>fill</code></td> + <td>{{CompatChrome(46.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome para Android</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Animação{{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>max-content</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + <tr> + <td><code>min-content</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + <tr> + <td><code>available</code>{{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>fill-available</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + <tr> + <td><code>fit-content</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + <tr> + <td><code>border-box</code> e <code>content-box</code>{{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>fill</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] WebKit implementou uma variação deste valor sob o nome <em><code>fill-available</code></em> em Dezembro de 2013.</p> + +<p>[2] Versões anteriores do WebKit implementaram uma versão anterior deste valore sob o nome <em><code>intrinsic</code></em>, mas implementam <em><code>fit-content</code></em> desde a versão 6.1 também.</p> + +<p>[3] Não fixado.</p> + +<p>[4] O antigo WebKit suporta as palavras-chave <em><code>intrinsic</code></em> e <em><code>min-intrinsic</code></em>, mas foi removido no <a href="https://www.chromestatus.com/feature/5758434351775744">Chrome 48</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">box model</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li> +</ul> |