1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
---
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, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы разметки, такие как 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>
|
