Como Funciona o Display no CSS

O display e o positioning são conceitos fundamentais do CSS3 para criar layouts eficientes e responsivos em sua página da web.

[{"selector":"#anim-a35421f0-599f-43a8-a06b-6c8b47f44a19 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-30.8823528307813%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-0a626389-ec89-4a22-9249-759e6e0b0649","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5aec1d12-6d06-4710-887d-dfdb1e6c0016","keyframes":{"transform":["translate3d(115.65496%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

O que é o Display no CSS3?

[{"selector":"#anim-7d8d3003-6ad0-4e7c-83c5-b879e478b28f [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-27.94117638722594%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-94b0f7ff-818f-4a77-8b83-04cfa3b49a99","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f573ef3e-8b8e-4ccb-96ae-17c2bb3e5424","keyframes":{"transform":["translate3d(115.75562%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-076a5b2f-d5b3-4e86-b95b-f58c2c12244e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-50d4b3d2-1606-4570-965c-704cb09f65f7","keyframes":{"transform":["translate3d(-115.65495%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c78cc2fc-bb8d-4976-8019-c970ffbd74aa","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-79a71f04-de5b-4084-96b8-f7d7e065a10f","keyframes":{"transform":["translate3d(116.72026%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Como usar o Display no CSS3

[{"selector":"#anim-cc26c91a-640c-4e61-9651-fd4d56bc30c4 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-8.518518549532544%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-f2f02ee7-730f-4450-a2dc-81a16b7af81c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-524c8017-58ad-4825-891f-a428e84a273b","keyframes":{"transform":["translate3d(0px, -422.96307%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ac22297a-e683-41d6-ae22-ff9051496d3d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1c0f6eaf-2f49-4d74-abd1-3d8e2bfe4c4c","keyframes":{"transform":["translate3d(0px, 253.30524%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

O que é o Positioning no CSS3?

[{"selector":"#anim-5606eef1-6f89-4575-8b49-e8adef596971 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.249999886225726%, 0, 0) translate(-25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-9ec03caf-4738-4c02-b8e1-a2f0c0b3de72","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-df3f4ff1-9029-4307-809e-e39bd168a05b","keyframes":{"transform":["translate3d(-115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-37c68fa0-7148-4654-b5cd-2fc5d468f725","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-915b6bab-c765-4cb8-a0d2-a17b55ed0880","keyframes":{"transform":["translate3d(116.24204%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4451ab40-0fcd-4136-873d-08db8a7024b5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-41a59d94-ca8f-490a-800a-eea126eb26f8","keyframes":{"transform":["translate3d(-115.65495%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Como usar o Positioning no CSS3

[{"selector":"#anim-7097b765-ad35-442d-8d4b-57ce435cd870 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-47.394794861320264%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-b9ff0b69-f5d2-49ea-ab30-c55403b80ada","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-11892dde-e21a-4708-80cc-a1c0f5181cd2","keyframes":{"transform":["translate3d(115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-69bacb02-ee61-43f6-8285-3cae4f7bb986","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1de738cf-ab82-437a-a700-887d6c455940","keyframes":{"transform":["translate3d(-115.33547%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Display e o Positioning juntos

[{"selector":"#anim-0cae58e6-b75c-42da-9d85-24b3d6e9d3cb [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.20540375211774%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-5d6f3b2f-6b30-4457-ab46-6baca23bb5ea","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4da7768a-06d0-4de7-b296-7967a36555d3","keyframes":{"transform":["translate3d(115.92356%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a6e0a544-65e8-4079-be6a-73a85928294d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f64f9d9e-f6be-4b9c-9271-c6915311def8","keyframes":{"transform":["translate3d(-115.2381%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-835cdbc0-9e1f-48dc-8dfe-ce97c93374e9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7249104d-45f0-418e-aac7-a6bcf5f9891b","keyframes":{"transform":["translate3d(115.92356%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Aprenda mais sobre Display e Positioning

[{"selector":"#anim-a675b990-289e-4ce2-ad6c-14d099dcd3f5 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-555c26e0-c6fa-4bc3-90a3-10d7ebb51cde","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-84b4ad07-36be-47dd-add2-dcab10d02060","keyframes":{"transform":["translate3d(-115.2381%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a380b1ae-d93d-445e-a2e9-0080d6c57a34","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6b37b9ab-06be-4545-ab1d-5a4c8849fdd0","keyframes":{"transform":["translate3d(116.24204%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Clique aqui!

Como Funciona o Display no CSS

O display e o positioning são conceitos fundamentais do CSS3 para criar layouts eficientes e responsivos em sua página da web.

O que é o Display no CSS3?

O display é a propriedade CSS3 que controla como um elemento HTML é exibido em uma página da web.

Como usar o Display no CSS3

Para usar o display no CSS3, é necessário definir a propriedade display no seletor do elemento HTML. Isso pode ser feito diretamente no código CSS3 ou em um arquivo CSS separado.

O que é o Positioning no CSS3?

O positioning é a propriedade CSS3 que controla a posição de um elemento HTML na página. O valor padrão para a propriedade positioning é "static", o que significa que o elemento é exibido em sua posição natural na página.

Como usar o Positioning no CSS3

Para usar o positioning no CSS3, é necessário definir a propriedade positioning no seletor do elemento HTML. Isso pode ser feito diretamente no código CSS3 ou em um arquivo CSS separado.

Display e o Positioning juntos

A propriedade display "flex" pode ser usada para criar um layout flexível, enquanto a propriedade positioning "absolute" pode ser usada para posicionar elementos específicos na página.

Aprenda mais sobre Display e Positioning

Confira nosso artigo completo sobre o assunto clicando logo abaixo!