CSS layout

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

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

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

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

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

Руководство

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

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

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

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