Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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.

Prerequisitos

Antes de iniciar esse modulo, você precisa:

  1. Ter um conhecimento básico de HTML, como discutido no módulo Introdução ao HTML.
  2. Estar confortável com os fundamentos do CSS, como discutido em Introdução ao CSS.
  3. Entender como estilizar blocos.

Nota: 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 JSBin ou Thimble.

Guias

Esse artigo ira introduzir as ferramentas fundamentais para o layout e as tecnicas disponiveis no CSS.

Introduçao ao CSS
This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
Floats
Originally for floating images inside blocks of text, the float property has become one of the most commonly used tools for creating multiple column layouts on webpages. This article explains all.
Positioning
Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different position values, and how to use them.
Practical positioning examples
With the basics of positioning covered in the last article, we will now look at building a couple of real world examples, to illustrate what kinds of things you can do with positioning.
Flexbox
A new technology, but with support now fairly widespread across browsers, Flexbox is starting to become ready for widespread use. Flexbox provides tools to allow rapid creation of complex, flexible layouts, and features that historically proved difficult with CSS. This articles explains all the fundamentals.
Grids
Grid systems are another very common feature used in CSS layouts, which tend to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore the basic idea behind creating a grid system, look at using a ready-made grid system provided by a grid framework, and end by experimenting with CSS Grids — a nascent new browser feature that makes implementing grid design on the Web a lot easier.

Etiquetas do documento e colaboradores

Colaboradores desta página: agathasilva28, Tiagosb, chrisdavidmills
Última atualização por: agathasilva28,