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