From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/css_box_model/index.html | 170 +++++++++++++++++++++ .../css/css_box_model/margin_collapsing/index.html | 74 +++++++++ 2 files changed, 244 insertions(+) create mode 100644 files/pt-br/web/css/css_box_model/index.html create mode 100644 files/pt-br/web/css/css_box_model/margin_collapsing/index.html (limited to 'files/pt-br/web/css/css_box_model') 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 +--- +
{{CSSRef}}
+ +

CSS Box Model (Modelo de Caixa CSS) é 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 modelo de formato visual.

+ +

Referência

+ +

Propriedades

+ +

Propriedades que controlam o fluxo de conteúdo em uma caixa

+ +
+ +
+ +

Propriedades que controlam o tamanho de uma caxia

+ +
+ +
+ +

Propriedades que controlam as margens de uma caixa

+ +
+ +
+ +

Propriedades que controlam o preenchimento (padding) de uma caixa

+ +
+ +
+ +

Outras propriedades

+ +
+ +
+ +

Guias e ferramentas

+ +
+
+
Introdução ao modelo de caixa CSS
+
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.
+
Dominando o colapso da margem
+
Na maioria dos casos, duas margens adjacentes são colapsadas em uma. Este artigo descreve quando isso acontecwe e como controlar isso.
+
Gerador de sombra de caixa
+
Uma ferramenta interativa que permite criar sombras visualmente e gerar a sintaxe necessária para a propriedade {{cssxref("box-shadow")}}.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoSituaçãoComentário
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}}
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
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 +--- +
{{CSSRef}}
+ +
As margens superior e inferior 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 margin collapsing. Note que as margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
+ +
 
+ +

Margin collapsing ocorre em três casos básicos:

+ +
+
Irmãos adjacentes
+
As margens de irmãos adjacentes são colapsadas (execeto quando  o último irmão precisar ser limpado devido ao uso de floats  em elementos anteriores ). Por exemplo:
+
+ 
 <p>A margem inferior deste parágrafo é colapsada...</p>
+ <p>... com margem superior deste parágrafo.</p>
+
+
+
Pai e primeiro/último filho
+
Se não houver border, padding, parte inline, contexto de formatação de bloco criado ou livre 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.
+
 
+
+ +
+
Blocos vázios
+
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.
+
 
+
+ +

Algumas coisas podem ser observadas:

+ + + +

Margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspeficicaçõesStatusComentário
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Definição inicial
+ +

Veja Também

+ + -- cgit v1.2.3-54-g00ecf