---
title: CSS layout
slug: Learn/CSS/CSS_layout
tags:
  - Beginner
  - CSS
  - Floating
  - Grids
  - Guide
  - Landing
  - Layout
  - Learn
  - Module
  - Multiple column
  - NeedsTranslation
  - Positioning
  - TopicStub
  - flexbox
  - float
  - Верстка
  - Сетка
  - позиционирование
  - разметка страницы
translation_of: Learn/CSS/CSS_layout
---
<div>{{LearnSidebar}}</div>

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

<h2 id="Необходимые_условия">Необходимые условия</h2>

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

<ol>
 <li>Иметь общее представление об HTML, как указано в разделе <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступление в HTML</a>.</li>
 <li>Ориентироваться в основах CSS, как указано в разделе <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a>.</li>
 <li>Понимать, как <a href="/en-US/docs/Learn/CSS/Styling_boxes">стилизовать блочные элементы</a>.</li>
</ol>

<div class="note">
<p><strong>Примечание</strong>: Если вы работаете на компьютере/планшете/других устройствах, где нет возможности создать ваш собственный файл, вы можете попробовать (большую часть) примеры кода в онлайн-программах для написания кода  <a href="http://jsbin.com/">JSBin</a> и <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>

<h2 id="Руководство">Руководство</h2>

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

<dl>
 <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS вёрстку</a></dt>
 <dd>В этом разделе будут описаны некоторые возможности CSS вёрстки, которых мы уже касались в предыдущих модулях - различные значения {{cssxref("display")}}  — и представлены некоторые концепции, которые мы рассмотрим в этом модуле.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></dt>
 <dd>Элементы на веб-страницах размещаются в соответствии с нормальным потоком - пока мы не сделаем что-либо, чтобы это изменить. Этот раздел объясняет основы нормального потока как фундамент для изучения влияния на него.</dd>
</dl>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
 <dd><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> - это метод одномерной верстки для размещения элементов в строках или столбцах. Элементы растягиваются, чтобы заполнить дополнительное пространство и сжимаются, чтобы поместиться в меньшее пространство. Данный раздел объясняет фундаментальные принципы.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt>
 <dd>CSS Grid Layout - это двумерная система верстки для веб. Она позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt>
 <dd>Изначально созданное для плавающих изображений внутри текстовых блоков, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания мульти-колоночной верстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.</dd>
</dl>

<dl>
 <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></dt>
 <dd>Позиционирование позволяет вам брать элементы из нормального потока и изменять их поведение, например, заставляет находиться друг под другом или всегда оставаться в одном и том же месте внутри окна просмотра браузера. В этом разделе объясняются различные значения {{cssxref("position")}} и способы их применения.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Мульти-колоночная верстка</a></dt>
 <dd>Спецификация мульти-колоночной верстки дает вам способ размещения содержимого  в столбцах по аналогии с версткой газет.  Этот раздел объясняет, как использовать эту возможность.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы верстки</a></dt>
 <dd>Grid-системы - это очень распространенная возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей верстки. Вы представляете свою верстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старыми браузерами</a></dt>
 <dd>
 <p>В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы верстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приорететны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.</p>
 </dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Фундаментальное понятие верстки</a></dt>
 <dd>Оценка ваших знаний различных методов верстки посредством вёрстки веб-страницы.</dd>
</dl>

<h2 id="Смотрите_также">Смотрите также</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Практические примеры позиционирования</a></dt>
 <dd>Этот раздел показывает, как построить пример из реальной жизни, чтобы проиллюстрировать, что вы можете сделать при помощи позиционирования.</dd>
</dl>