Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как иcпользовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.

Prerequisites

Before starting this module, you should already:

  1. Have basic familiarity with HTML, as discussed in the Introduction to HTML module.
  2. Be comfortable with CSS fundamentals, as discussed in Introduction to CSS.
  3. Understand how to style boxes.

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

Руководство

These articles will provide instruction on the fundamental layout tools and techniques available in CSS.

Introduction to CSS layout
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
Новая технология , которая имеет широкую поддержку браузерами , Flexbox готовится к повсеместному применению . Flexbox предоставляет инструменты, позволяющие быстро создавать сложные, гибкие макеты, и исторически сложные вещи в CSS. В этих статьях представлены основы.
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.

Assessments

The following assessments will test your ability to lay out web pages with CSS.

Creating a flexible multicolumn layout (TBD)
This assessment tests your ability to create a standard multicolumn layout, with a few interesting features.
Creating a fixed control widget (TBD)
This assessment challenges your understanding of positioning by asking you to create a fixed position control widget that allows the user to access a web app's controls regardless of where they scroll to.

Метки документа и участники

Внесли вклад в эту страницу: marksq, valeryvitkus, chrisdavidmills
Обновлялась последний раз: marksq,