diff options
Diffstat (limited to 'files/pt-br/web/css/css_box_model')
| -rw-r--r-- | files/pt-br/web/css/css_box_model/index.html | 170 | ||||
| -rw-r--r-- | files/pt-br/web/css/css_box_model/margin_collapsing/index.html | 74 |
2 files changed, 244 insertions, 0 deletions
diff --git a/files/pt-br/web/css/css_box_model/index.html b/files/pt-br/web/css/css_box_model/index.html new file mode 100644 index 0000000000..41f2f7cf8b --- /dev/null +++ b/files/pt-br/web/css/css_box_model/index.html @@ -0,0 +1,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> diff --git a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html b/files/pt-br/web/css/css_box_model/margin_collapsing/index.html new file mode 100644 index 0000000000..cb658d4131 --- /dev/null +++ b/files/pt-br/web/css/css_box_model/margin_collapsing/index.html @@ -0,0 +1,74 @@ +--- +title: Dominando margin collapsing +slug: Web/CSS/CSS_Box_Model/margin_collapsing +tags: + - CSS + - CSS Box Model + - Guía + - Intermediario(2) + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +<div dir="ltr">{{CSSRef}}</div> + +<div dir="ltr">As margens <a href="/pt-BR/docs/Web/CSS/margin-top">superior</a> e <a href="/en-US/docs/Web/CSS/margin-bottom">inferior</a> dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como <strong>margin collapsing</strong>. Note que as margens de<a href="/pt-BR/docs/Web/CSS/float"> elementos flutuantes</a> e <a href="/pt-BR/docs/Web/CSS/position#Absolute_positioning">posicionados de forma absoluta</a> nunca colapsam.</div> + +<div dir="ltr"> </div> + +<p dir="ltr">Margin collapsing ocorre em três casos básicos:</p> + +<dl> + <dt dir="ltr">Irmãos adjacentes</dt> + <dd dir="ltr">As margens de irmãos adjacentes são colapsadas (execeto quando o último irmão precisar ser <a href="/en-US/docs/Web/CSS/clear">limpado</a> devido ao uso de floats em elementos anteriores ). Por exemplo:</dd> + <dd> + <pre class="brush: html"> <p>A margem inferior deste parágrafo é colapsada...</p> + <p>... com margem superior deste parágrafo.</p> +</pre> + </dd> + <dt dir="ltr">Pai e primeiro/último filho</dt> + <dd dir="ltr">Se não houver border, padding, parte inline, <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">contexto de formatação de bloco</a> criado ou <a href="/en-US/docs/Web/CSS/clear">livre</a> para separar o {{cssxref("margin-top")}} de um bloco do {{cssxref("margin-top")}} do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, {{cssxref("height")}}, {{cssxref("min-height")}}, ou {{cssxref("max-height")}} para separar o {{cssxref("margin-bottom")}} de um bloco do {{cssxref("margin-bottom")}} do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.</dd> + <dd dir="ltr"> </dd> +</dl> + +<dl> + <dt dir="ltr">Blocos vázios</dt> + <dd dir="ltr">Se não houver border, padding, conteúdo inline, {{cssxref("height")}}, ou {{cssxref("min-height")}} para separar um bloco {{cssxref("margin-top")}} de sua {{cssxref("margin-bottom")}}, então as margens superior e inferior são colapsadas.</dd> + <dd dir="ltr"> </dd> +</dl> + +<p dir="ltr">Algumas coisas podem ser observadas:</p> + +<ul dir="ltr"> + <li>Margin collapsing mais complexo (de mais de duas margens) ocorrem quando esses casos são combinados.</li> + <li>Essas regras se aplicam até mesmo a margens que são zero, portanto a margem e um primeiro/último filho termina fora de seu pai(de acordo com as regras acima) sendo a margem do pai zero ou não.</li> + <li>Quando margens negativas são envolvidas, o tamanho da margem colapsada é a soma da maior margem positiva e da menor margem negativa(a mais negativa).</li> + <li>Se ambos são negativos, o valor negativo maior será usado. Essa definição se aplica a elementos adjacentes e a elementos aninhados. </li> +</ul> + +<p dir="ltr">Margens de <a href="/pt-BR/docs/Web/CSS/float">elementos flutuantes</a> e <a href="/pt-BR/docs/Web/CSS/position#Absolute_positioning">posicionados de forma absoluta</a> nunca colapsam.</p> + +<h2 dir="ltr" id="Especificações">Especificações</h2> + +<table class="standard-table" dir="ltr"> + <thead> + <tr> + <th scope="col">Espeficicações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 dir="ltr" id="Veja_Também">Veja Também</h2> + +<ul> + <li dir="ltr"><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li> + <li dir="ltr">{{css_key_concepts}}</li> +</ul> |