CSS layout

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

Необходимые условия

Перед изучением этого раздела вы должны:

  1. Иметь общее представление об HTML, как указано в разделе Вступление в HTML.
  2. Ориентироваться в основах CSS, как указано в разделе Вступление в CSS.
  3. Понимать как стилизовать блочные элементы.

Примечание: Если вы работаете на компьютере/планшете/других устройствах, где нет возможности создать ваш собственный файл, вы можете попробывать (большую часть) примеры кода в онлайн-программах для написания кода  JSBin и Thimble.

Руководство

Эти разделы содержат инструкции по основным инструментам и методам верстки, доступным в CSS. В конце занятия проводится оценка, которая поможет вам проверить свое понимание методов верстки, по средствам верстки веб-страницы.

Введение в CSS layout
В этом разделе будут описаны некоторые возможности CSS layout, которых мы уже касались в предыдущих модулях - различные значения display  — и представлены некоторые концепции, которые мы рассмотрим в этом модуле.
Нормальный поток
Элементы на веб-страницах размещаются в соответствии с нормальным потоком - пока мы не сделаем что-либо, чтобы это изменить. Этот раздел объясняет основы нормального потока как фундамент для изучения влияния на него.
Flexbox
Flexbox - это метод одномерной верстки для размещения элементов в строках или столбцах. Элементы растягиваются, чтобы заполнить дополнительное пространство и сжимаются, чтобы поместиться в меньшее пространство. Данный раздел объясняет фундаментальные принципы.
Grids
CSS Grid Layout это двумерная система верстки для веб. Он позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.
Floats
Изначально созданное для плавающих изображений внутри тексовых блоков, свойство float стало одним из наиболее часто используемых инструментов для создания мульти-колоночной верстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.
Позиционирование
Позиционирование позволяет вам брать элементы из нормального потока и изменяет их поведение, например, заставляет находиться друг под другом или всегда оставаться в одном и том же месте внутри окна просмотра браузера. В этом разделе объясняются различные значения position и способы их применения.
Мульти-колоночная верстка
Спецификация мульти-колоночной верстки дает вам способ размещения содержимого  в столбцах по аналогии с версткой газет.  Этот раздел объясняет как использовать эту возможность.
Устаревшие методы верстки
Grid-системы - это очень распространенная возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей верстки. Вы представляете свою верстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим как работают эти старые методы, чтобы вы понимали как они использовались, если сталкнетесь со старыми проектами.
Поддержка старыми браузерами

В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы верстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появление новых возможностей, для различных браузеров будут приорететны различные вещи. Этот раздел объясняет как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.

Фундаментальное понятие верстки
Оценка ваших знаний различных методов верстки по средствам верстки веб-страницы.

Смотрите также

Практические примеры позиционирования
Этот раздел показывает как построить пример из реальной жизни, чтобы проиллюстрировать что вы можете сделать при помощи позиционирования.