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
|
---
title: CSS layout
slug: Learn/CSS/CSS_layout
tags:
- Beginner
- CSS
- Floating
- Grids
- Guide
- Landing
- Layout
- Learn
- Module
- Multiple column
- NeedsTranslation
- Positioning
- TopicStub
- flexbox
- float
translation_of: Learn/CSS/CSS_layout
---
<div>{{LearnSidebar}}</div>
<p class="summary">Até esse ponto nós já vimos fundamentos do CSS, como estilizar textos, e como estilizar e manipular os blocos que envolvem o conteúdo. Chegou a hora de ver como posicionar seus blocos no lugar certo tendo como referência o viewport ou outro elemento. Cobrimos os pré-requisitos necessários para que possamos ir mais a fundo no layout CSS, veremos diferentes configurações de exibição, métodos tradicionais de layout envolvendo float e posicionamento, e ferramentas modernas de layout como flexbox.</p>
<h2 id="Prerequisitos">Prerequisitos</h2>
<p>Antes de iniciar esse modulo, você precisa:</p>
<ol>
<li>Ter um conhecimento básico de HTML, como discutido no módulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introdução ao HTML</a>.</li>
<li>Estar confortável com os fundamentos do CSS, como discutido em <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introdução ao CSS</a>.</li>
<li>Entender como <a href="/en-US/docs/Learn/CSS/Styling_boxes">estilizar blocos</a>.</li>
</ol>
<div class="note">
<p><strong>Nota</strong>: Se você estiver trabalhando em um computador/tablete/outro dispositivo em que você não possa criar seus próprios arquivos, você pode testar (muitos dos) os códigos de exemplo em um programa de códigos online como o <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>
<h2 id="Guias">Guias</h2>
<p>Esse artigo ira introduzir as ferramentas fundamentais para o layout e as técnicas disponiveis no CSS.</p>
<dl>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introdução ao CSS</a></dt>
<dd>Este artigo recapitulará alguns dos recursos de layout CSS que já abordamos em módulos anteriores — como diferentes valores {{cssxref("display")}} — e apresentará alguns dos conceitos que abordaremos ao longo deste módulo.</dd>
</dl>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Fluxo normal</a></dt>
<dd>Os elementos das páginas web apresentam-se de acordo com o fluxo normal (até que façamos algo para mudar isso). Este artigo explica os fundamentos do fluxo normal, bem como uma base para aprender como alterá-lo.</dd>
<dt><a href="https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
<dd>É um método para criar layout unidimensional, renderizando itens em linhas ou colunas. Os itens flexíveis preenchem os espaços pondendo encolher para caberem em espaços menores. Este artigo explica todos os fundamentos.</dd>
<dt><a href="https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox">Grids</a></dt>
<dd>CSS Grid layout é um sistema de layout bidimensional para páginas web. Ele permite que você coloque conteúdo em linhas e colunas. Tem muitos recursos que facilitam a criação de layouts complexos. Este artigo fornecerá tudo o que você precisa saber para começar a usar Grid layout em suas páginas.</dd>
</dl>
<dl>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt>
<dd>Originalmente para imagens flutuantes em blocos de texto, a propriedade {{cssxref("float")}} tornou-se uma das ferramentas mais usadas para criar layouts de várias colunas em páginas web. Com o advento do Flexbox e do Grid o Flot retorna ao seu propósto original. Este artigo explica tudo.</dd>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamento</a></dt>
<dd>O posicionamento permite retirar elementos do fluxo normal do layout do documento fazendo com que se comportem de maneira diferente, por exemplo, posicionando-se um em cima do outro ou permanecendo numa posição fixa no navegador. Este artigo explica os diferentes valores de {{cssxref("position")}} e como usá-los.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Layout de múltiplas colunas</a></dt>
<dd>A especificação de layout de várias colunas fornece um método para colocar conteúdo em colunas, como nos jornais. Este artigo explicará como usar este recurso.</dd>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemplos práticos de posicionamento</a></dt>
<dd>Com as noções básicas de posicionamento abordadas no último artigo, veremos agora a construção de alguns exemplos do mundo real, para ilustrar que tipos de coisas você pode fazer com o posicionamento.</dd>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt>
<dd>Os sistemas de Grid são outro recurso muito comum usado nos layouts de CSS, que tendem a ser implementados usando flutuadores ou outros recursos de layout. Você imagina seu layout como um número definido de colunas (por exemplo, 4, 6 ou 12) e ajusta suas colunas de conteúdo dentro dessas colunas imaginárias. Neste artigo, exploraremos a idéia básica por trás da criação de um sistema de grade, examinaremos o uso de um sistema de grade pronto fornecido por uma estrutura de grade e terminaremos com a experiência com CSS Grids - um novo recurso de navegador que torna a implementação do design de grade em a Web muito mais fácil.</dd>
</dl>
|
