From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- .../css/css_layout/multicol_skills/index.html | 78 ++++ .../css_layout/multiple-column_layout/index.html | 468 +++++++++++++++++++++ .../ru/learn/css/css_layout/normal_flow/index.html | 96 +++++ .../css/css_layout/position_skills/index.html | 64 +++ .../css/css_layout/responsive_design/index.html | 328 +++++++++++++++ .../index.html" | 468 --------------------- .../index.html" | 78 ---- .../index.html" | 64 --- .../index.html" | 96 ----- .../index.html" | 328 --------------- 10 files changed, 1034 insertions(+), 1034 deletions(-) create mode 100644 files/ru/learn/css/css_layout/multicol_skills/index.html create mode 100644 files/ru/learn/css/css_layout/multiple-column_layout/index.html create mode 100644 files/ru/learn/css/css_layout/normal_flow/index.html create mode 100644 files/ru/learn/css/css_layout/position_skills/index.html create mode 100644 files/ru/learn/css/css_layout/responsive_design/index.html delete mode 100644 "files/ru/learn/css/css_layout/\320\274\320\260\320\272\320\265\321\202_\321\201_\320\275\320\265\321\201\320\272\320\276\320\273\321\214\320\272\320\270\320\274\320\270_\321\201\321\202\320\276\320\273\320\261\321\206\320\260\320\274\320\270/index.html" delete mode 100644 "files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_multicol/index.html" delete mode 100644 "files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_\320\277\320\276\320\267\320\270\321\206\320\270\320\276\320\275\320\270\321\200\320\276\320\262\320\260\320\275\320\270\321\217/index.html" delete mode 100644 "files/ru/learn/css/css_layout/\320\275\320\276\321\200\320\274\320\260\320\273\321\214\320\275\321\213\320\271_\320\277\320\276\321\202\320\276\320\272/index.html" delete mode 100644 "files/ru/learn/css/css_layout/\320\276\321\202\320\267\321\213\320\262\321\207\320\270\320\262\321\213\320\271_\320\264\320\270\320\267\320\260\320\271\320\275/index.html" (limited to 'files/ru/learn/css/css_layout') diff --git a/files/ru/learn/css/css_layout/multicol_skills/index.html b/files/ru/learn/css/css_layout/multicol_skills/index.html new file mode 100644 index 0000000000..c549f1210b --- /dev/null +++ b/files/ru/learn/css/css_layout/multicol_skills/index.html @@ -0,0 +1,78 @@ +--- +title: 'Проверь свои навыки: Multicol' +slug: Learn/CSS/CSS_layout/Навыки_Multicol +translation_of: Learn/CSS/CSS_layout/Multicol_skills +--- +
{{LearnSidebar}}
+ +
+ +

Цель этого задания — чтобы вы поработали с CSS свойствами {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} и {{CSSxRef("column-rule")}} и со значениями которые описаны в нашем уроке Макет с несколькими столбцами. Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.

+ +
+

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, or Glitch чтобы проработать задания.

+ +

Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка и дальнейшая помощь")}} в конце страницы.

+
+ +

Multicol Раз

+ +

В этом задании вам необходимо создать три столбца с отступом 50px между каждый столбцом.

+ +

Three columns of text

+ +

Попробуйте обновить живой пример ниже для воссоздания законченного примера:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}}

+ +
+

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

+
+ +

Multicol Два

+ +

Создайте столбцы с минимальной шириной 200px.

+ +

Затем добавьте серую линейку 5px между каждым столбцом, убедитесь, что между краями линейки и содержимым столбцов есть пространство 10px.

+ +

Three columns of text with a grey rule between them.

+ +

Попробуйте обновить живой код ниже для воссоздания законченного примера:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}}

+ +
+

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

+
+ +

Multicol Три

+ +

Заставьте элемент содержащий заголовок и подзаголовок растянуться через все столбцы так чтоб это выглядело как на картинке

+ +

Three columns of text with a heading and subheading spanning all three in the middle.

+ +

Попробуйте обновить живой код ниже для воссоздания законченного примера:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}}

+ +
+

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

+
+ +

Оценка и дальнейшая помощь

+ +

Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.

+ +

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

+ +
    +
  1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как  CodePen, jsFiddle, или Glitch. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
    2. +
  2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать: +
      +
    • Описательный заголовок такой как "Требуется оценка проверки навыков по Multicol задание 1".
      • +
    • Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
      • +
    • Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
      • +
    • Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
      • +
    +
    3. +
diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.html b/files/ru/learn/css/css_layout/multiple-column_layout/index.html new file mode 100644 index 0000000000..9ba48bbbef --- /dev/null +++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.html @@ -0,0 +1,468 @@ +--- +title: Макет с несколькими столбцами +slug: Learn/CSS/CSS_layout/Макет_с_несколькими_столбцами +translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}
+ +

Спецификация макет с несколькими столбцами дает вам метод верстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.

+ + + + + + + + + + + + +
Необходимые знания: +

Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS.)

+
Задача: +

Изучить как создавать макет с неколькими столбцами на веб-страницах, такой как вы модете найти в газете.

+
+ +

Базовый пример

+ +

Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый multicol. Вы можете следовать за нами скачав файл отправной точки multicol и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.

+ +

Наша отправная точка содержит немного очень простого HTML; обертака с классом container внутри которого имеется заголовок и несколько параграфов.

+ +

{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству column-count столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:

+ +
.container {
+  column-count: 3;
+}
+
+ +

Колонки, которые вы создаете имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.

+ +
+ + +
<div class="container">
+  <h1>Simple multicol example</h1>
+
+  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.</p>
+</div>
+
+ +
.container {
+  column-count: 3;
+}
+
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 400) }}

+ +

Измените ваш CSS чтобы использовать следующий column-width:

+ +
.container {
+  column-width: 200px;
+}
+
+ +

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

+ +
+ + +
.container {
+  column-width: 200px;
+}
+
+
+ +

{{ EmbedLiveSample('Multicol_2', '100%', 400) }}

+ +

Стилизация столбцов

+ +

Столбцы, созданные при помощи multicol не могут быть стилизованы по одному. Нет способа сделать один столбец больше, чем другие, или изменить фон или цвет текста одного столбца. У вас есть две возможности изменить способ отображения столбцов:

+ + + +

Используя ваш пример выше, измените размер отступа добавлением свойства column-gap:

+ +
.container {
+  column-width: 200px;
+  column-gap: 20px;
+}
+ +

Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи column-rule. Таким же способом как и свойство {{cssxref("border")}} с которым вы сталкивались в предыдущих уроках, column-rule — это короткая запись {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} и {{cssxref("column-rule-width")}} и принимает те же значения что и border.

+ +
.container {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted rgb(79, 185, 227);
+}
+ +

Попробуйте добавить линейки других стилей и цветов.

+ +
+ +
+ +

{{ EmbedLiveSample('Multicol_3', '100%', 400) }}

+ +

Следует обратить внимание на то, что линейка не занимает никакой ширины. Она располагается в промежутках, которые вы создали при помощи column-gap. Чтобы придать больше пространства по обе стороны от линейки, вам нужно увеличить размер column-gap.

+ +

Свойств column-span

+ +

Вы можете заставить элемент растянуться через все столбцы. В этом случае контент разрывается, когда сталкивается со spanning элементом и продолжается ниже, создавая новый набор блоков столбцов. Чтобы растянуть элемент через все столбцы используйте свойство {{cssxref("column-span")}} установленное на значение all.

+ +
+

Обратите внимание что невозможно растянуть элемент через несколько столбцов. Это свойство может иметь либо значение none (по умолчанию) либо all.

+
+ +
+ +
+ +

{{ EmbedLiveSample('Multicol_Span', '100%', 400) }}

+ +

Столбцы и фрагментация

+ +

Содержимое макета нескольких столбцов является фрагментированным. По сути, он ведет себя так же, как контент в постраничных медиа — так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.

+ +

Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. Заголовок отделяется от текста, если столбцы разделяются между ними.

+ +
+ + +
<div class="container">
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+</div>
+
+ +
.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

{{ EmbedLiveSample('Multicol_4', '100%', 600) }}

+ +

Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации CSS Фрагментации. Эта спецификация дает нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство {{cssxref("break-inside")}} со значением avoid к правилам .card. Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.

+ +

В настоящее время также стоит добавлять старое свойство page-break-inside: avoid для лучшей поддержки старых браузеров.

+ +
.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

Перезагрузите страницу и ваши блоки должны остаться в целости.

+ +
+ + +
.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

{{ EmbedLiveSample('Multicol_5', '100%', 600) }}

+ +

Проверь свои навыки!

+ +

Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшие тесты для проверки того, что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Поверьте свои навыки: Макет с несколькими столбцами.

+ +

Заключение

+ +

Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, еще один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.

+ +

См. также

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/css/css_layout/normal_flow/index.html b/files/ru/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..d936c240c5 --- /dev/null +++ b/files/ru/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,96 @@ +--- +title: Базовый поток +slug: Learn/CSS/CSS_layout/Нормальный_поток +tags: + - float + - grid +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Эта статья объясняет нормальный/базовый поток (normal flow) или способ, которым элементы страницы располагаются на веб-странице по умолчанию.

+ + + + + + + + + + + + +
Что нужно знать прежде чем изучать:Основы HTML (изучите Введение в HTML), и понимания как работает CSS (изучите Введение в CSS.)
Цель:Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнем вносить какие-либо изменения.
+ +

Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путем изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.

+ +

Прежде чем углубиться в разные способы компоновки, стоит пересмотреть некоторые из вещей, которые вы изучили в предыдущих модулях в отношении нормального потока документов. 

+ +

Как элементы располагаются по умолчанию?

+ +

Прежде всего, индивидуальные боксы элементов располагаются в зависимости от содержимого элементов, затем добавляя какой-нибудь padding, border и margin вокруг них - это опять-таки боксовая модель, которую мы рассмотрели ранее.

+ +

По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Встроенные элементы высоки и широки, как их содержимое. Вы не можете установить ширину или высоту на встроенные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если вы хотите контролировать размер встроенного элемента вам нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи display: block; (или даже,  display: inline-block;, который смешивает характеристики обоих.).

+ +

Это объясняет отдельные элементы, но как насчет того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.

+ +

Встроенные элементы ведут себя по-другому — они не появляются на новых строках; они распологаются на той же строке, что и другие и любой смежной или завернутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).

+ +

Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остается, а меньшее исчезает — это звётся схлопывание полей (margin collapsing), и мы рассматривали это ранее.

+ +

Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:

+ +
+
<h1>Базовый поток документа</h1>
+
+<p>Я базовый элемент уровня блока. Мои соседние блочные элементы находятся на новой строке подо мной.</p>
+
+<p>По умолчанию мы охватываем 100% ширины нашего родительского элемента, и мы так же высоки, как и наш child-контент. Наша общая ширина и высота - это наш контент + внутренний отступ (padding) + ширина / высота границы.</p>
+
+<p>Мы отделены нашими полями. Из-за схлопывания полей мы отделены шириной одного из наших полей, а не обоих</p>
+
+<p>Встроенные элементы <span>такие как этот</span> и <span>этот</span> находятся на одной линии с другими, и смежным текстом, если есть пространство. Встроенные элементы, что не влезают <span>переходять на новую строку если это возможно (как этот текст)</span>если же это невозможно, они переходят на новую строку, как это изображение: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

+ +

Заключение

+ +

Теперь, когда вы поняли нормальный поток и как браузер выкладывает содержимое по умолчанию, двигаемся дальше, чтобы понять как это изменить для создания макета согласно вашему дизайну.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/css/css_layout/position_skills/index.html b/files/ru/learn/css/css_layout/position_skills/index.html new file mode 100644 index 0000000000..f63a3a3a94 --- /dev/null +++ b/files/ru/learn/css/css_layout/position_skills/index.html @@ -0,0 +1,64 @@ +--- +title: 'Проверьте свои навыки: позиционирование' +slug: Learn/CSS/CSS_layout/Навыки_позиционирования +translation_of: Learn/CSS/CSS_layout/Position_skills +--- +
{{LearnSidebar}}
+ +
+ +

Цель этого задания - чтобы вы поработали с CSS свойством {{CSSxRef("position")}} и его значениями которые описаны в нашем уроке Позиционирование. Вы будете работать над двумя небольшими задачами, использующими различные элементы из пройденного материала.

+ +
+

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, или Glitch чтобы проработать задания.

+ +

Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка и дальнейшая помощь")}} в конце страницы

+
+ +

Позиционирование Раз

+ +

В этом задании вам необходимо расположить элементы с классом target в верхнем правом углу контейнера, который имеет серую границу 5px.

+ +

The green box is at the top right of a container with a grey border.

+ +

Попробуйте обновить живой код ниже для воссоздания законченного примера:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}

+ +

В качестве дополнительной задачи, сможете ли вы изменить цель так чтоб она отображалась под текстом?

+ +
+

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе

+
+ +

Позиционирование Два

+ +

В примере ниже если вы прокрутите блок боковая панель прокручивается вместе с контентом. Измените его так чтобы боковая панель оставалась на месте и прокручивался только контент.

+ +

The content is scrolled but the sidebar has stayed in place.

+ +

Попробуйте обновить живой код ниже для воссоздания законченного примера:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1000)}}

+ +
+

ля оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редактор

+
+ +

Оценка и дальнейшая помощь

+ +

Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.

+ +

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

+ +
    +
  1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как CodePen, jsFiddle, или Glitch. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
    2. +
  2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать: +
      +
    • Описательный заголовок такой как "Требуется оценка проверки навыков по Позиционированияю".
      • +
    • Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
      • +
    • Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
      • +
    • Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
      • +
    +
    3. +
diff --git a/files/ru/learn/css/css_layout/responsive_design/index.html b/files/ru/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..978b4e43dc --- /dev/null +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,328 @@ +--- +title: Отзывчивый дизайн +slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
+ +

На заре веб-дизайна страницы создавались для экрана определенного размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивого) веб-дизайна (responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.

+ + + + + + + + + + + + +
Необходимые знания: +

Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS и Устройство CSS.)

+
Задача: +

Понять базовые концепции и историю отзывчивого дизайна.

+
+ +

Исторические макеты сайтов

+ +

В какой-то момент истории при разработке веб-сайта у вас было два варианта:

+ + + +

Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.

+ +
A layout with two columns squashed into a mobile size viewport. +
+
+ +
+

Примечание: Посмотрите этот простой жидкий макет: пример, исходный код. При просмотре примера, растягивайте и сжимайте окно браузера чтобы увидеть, как это выглядит при разных размерах.

+
+ +

Сайт с фиксированной шириной рисковал иметь горизонтальную полосу прокрутки на экранах меньших чем ширина сайта (как видно ниже) и много белого пространства на краях дизайна на больших экранах.

+ +
A layout with a horizontal scrollbar in a mobile viewport. +
+
+ +
+

Примечание: Посмотрите этот простой макет с фиксированной шириной: пример, исходный код. Снова изучите результат по мере изменения размера окна браузера.

+
+ +
+

Примечание: Скриншоты выше сделаны используя Responsive Design Mode в Firefox DevTools.

+
+ +

Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.

+ +

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

+ +

Гибкий макет до отзывчивого дизайна

+ +

Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.

+ +

Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером.

+ +

Отзывчивый дизайн

+ +

Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трех методов в сочетании.

+ +
    +
  1. Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - Fluid Grids (опубликовано в 2009 в A List Apart).
    2. +
  2. Вторым методом была идея жидких изображений. Используя очень простой метод настройки свойства max-width на 100%, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.
    3. +
  3. Третьим ключевым компонентом был media query. Media Query позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.
    4. +
+ +

Очень важно понять, что адаптивный веб-дизайн — это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и media query, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.

+ +

Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.

+ +

Media Queries (Медиа-запросы)

+ +

Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиа запросы позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определенная ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

+ +

Например, следующий медиа запрос проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

+ +
@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} 
+
+ +

Вы можете добавлять несколько медиа запросов в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так чтоб соответствовать наилучшим образом разным размерам экрана. Точки, в которых применяется media query и меняется макет, известны как контрольные точки.

+ +

Общим подходом при использовании Media Queriy является создание простого одно колоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для бо'льших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана чтобы уместить все. Это часто называют дизайном сначала мобильный (mobile first).

+ +

Узнать больше о Media Query можно в документации MDN.

+ +

Гибкие сетки

+ +

Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развернутым до максимума окном.

+ +

Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.

+ +

В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование floats. Гибкий обтекаемый макет достигался путем присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.

+ +
target / context = result 
+
+ +

Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.

+ +
.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} 
+
+ +

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

+ +

Следующий пример демонстрирует простой отзывчивый дизайн используя Media Query и гибкие сетки. На узких экранах макет отображает блоки, сложенные друг на друга:

+ +
A mobile view of the layout with boxes stacked on top of each other vertically. +
+
+ +

На более широких экранах они премещаются в два столбца:

+ +
A desktop view of a layout with two columns. +
+
+ +
+

Примечание: Вы можете найти живой пример и исходный код этого примера на GitHub.

+
+ +

Современные технологии макетов

+ +

Современные методы макетов такие как Макет с несколькими столбцами, Flexbox, и Grid являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более легкий способ сделать так.

+ +

Multicol

+ +

Самый старый из этих методов — это multicol, когда вы задаете column-count, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.

+ +
.container {
+  column-count: 3;
+} 
+
+ +

Если вместо этого вы зададите column-width, то вы определите минимальную ширину. Браузер создаст столько столбцов той ширины, сколько будет комфортно умещаться в контейнер, а затем поделит оставшееся пространство между всеми столбцами. Поэтому число столбцов будет меняться согласно тому сколько имеется места.

+ +
.container {
+  column-width: 10em;
+} 
+
+ +

Flexbox

+ +

В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения flex-grow и flex-shrink вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с бо'льшим или меньшим пространством вокруг себя.

+ +

В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.

+ +
.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} 
+
+ +
+

Примечание: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчета размера столбцов: пример, исходный код.

+
+ +

CSS grid

+ +

В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создает grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.

+ +
.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} 
+
+ +
+

Примечание: версия grid макета еще проще, поскольку мы можем определить столбцы в .wrapper: пример, исходный код.

+
+ +

Отзывчивые изображения

+ +

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

+ +
img {
+  max-width: 100%;
+} 
+
+ +

Существуют очевидные недостатки к этому подходу. Изображение может быть изображено намного меньше своего исходного размера, что является пустой тратой пропускной способности — пользователь мобильных может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера. Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на компьютере. Либо, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Такие вещи можно достичь, просто уменьшая изображение.

+ +

Отзывчивые изображения, используя элемент {{htmlelement("picture")}} и атрибуты srcset и sizes элемента {{htmlelement("img")}} оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.

+ +

Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.

+ +

Вы можете найти подробное руководство по отзывчивым изображениям в разделе ищучения HTML на MDN.

+ +

Отзывчивая типография

+ +

Элементом отзывчивого дизайна, не освещенного ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать бо'льшую или меньшую площадь экрана.

+ +

В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаем меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум 1200px.

+ +
html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} 
+
+ +

Мы отредактировали наш приведенный выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.

+ +

В мобильных версиях заголовок меньше:

+ +
A stacked layout with a small heading size. +
+
+ +

На компьютерах, однако, мы видим больший размер заголовка:

+ +
A two column layout with a large heading. +
+
+ +
+

Примечание: смотрите этот пример в действии: пример, исходный код.

+
+ +

Такой подход к типографии показывает, что вам не надо ограничивать media queries только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.

+ +

Using viewport units for responsive typography

+ +

An interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport.

+ +
h1 {
+  font-size: 6vw;
+}
+ +

The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone.

+ +

There is a solution, and it involves using calc(). If you add the vw unit to a value set using a fixed size such as ems or rems then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.

+ +
+

See an example of this in action: example, source code.

+
+ +

The viewport meta tag

+ +

If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the <head> of the document.

+ +
<meta name="viewport" content="width=device-width,initial-scale=1">
+
+ +

This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.

+ +

Why is this needed? Because mobile browsers tend to lie about their viewport width.

+ +

This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.

+ +

The trouble is that your responsive design with breakpoints and media queries won't work as intended on mobile browsers. If you've got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you'll never see your narrow screen layout on mobile. By setting width=device-width you are overriding Apple's default width=960px with the actual width of the device, so your media queries will work as intended.

+ +

So you should always include the above line of HTML in the head of your documents.

+ +

There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.

+ + + +

You should avoid using minimum-scale, maximum-scale, and in particular setting user-scalable to no. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.

+ +
+

Note: There is a CSS @ rule designed to replace the viewport meta tag — @viewport — however, it has poor browser support. When both are used the meta tag overrides @viewport.

+
+ +

Summary

+ +

Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.

+ +

It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

+ +

In this module

+ + diff --git "a/files/ru/learn/css/css_layout/\320\274\320\260\320\272\320\265\321\202_\321\201_\320\275\320\265\321\201\320\272\320\276\320\273\321\214\320\272\320\270\320\274\320\270_\321\201\321\202\320\276\320\273\320\261\321\206\320\260\320\274\320\270/index.html" "b/files/ru/learn/css/css_layout/\320\274\320\260\320\272\320\265\321\202_\321\201_\320\275\320\265\321\201\320\272\320\276\320\273\321\214\320\272\320\270\320\274\320\270_\321\201\321\202\320\276\320\273\320\261\321\206\320\260\320\274\320\270/index.html" deleted file mode 100644 index 9ba48bbbef..0000000000 --- "a/files/ru/learn/css/css_layout/\320\274\320\260\320\272\320\265\321\202_\321\201_\320\275\320\265\321\201\320\272\320\276\320\273\321\214\320\272\320\270\320\274\320\270_\321\201\321\202\320\276\320\273\320\261\321\206\320\260\320\274\320\270/index.html" +++ /dev/null @@ -1,468 +0,0 @@ ---- -title: Макет с несколькими столбцами -slug: Learn/CSS/CSS_layout/Макет_с_несколькими_столбцами -translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}
- -

Спецификация макет с несколькими столбцами дает вам метод верстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.

- - - - - - - - - - - - -
Необходимые знания: -

Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS.)

-
Задача: -

Изучить как создавать макет с неколькими столбцами на веб-страницах, такой как вы модете найти в газете.

-
- -

Базовый пример

- -

Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый multicol. Вы можете следовать за нами скачав файл отправной точки multicol и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.

- -

Наша отправная точка содержит немного очень простого HTML; обертака с классом container внутри которого имеется заголовок и несколько параграфов.

- -

{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству column-count столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:

- -
.container {
-  column-count: 3;
-}
-
- -

Колонки, которые вы создаете имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.

- -
- - -
<div class="container">
-  <h1>Simple multicol example</h1>
-
-  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
-  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
-  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
-  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
-  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
-  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
-  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.</p>
-</div>
-
- -
.container {
-  column-count: 3;
-}
-
-
- -

{{ EmbedLiveSample('Multicol_1', '100%', 400) }}

- -

Измените ваш CSS чтобы использовать следующий column-width:

- -
.container {
-  column-width: 200px;
-}
-
- -

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

- -
- - -
.container {
-  column-width: 200px;
-}
-
-
- -

{{ EmbedLiveSample('Multicol_2', '100%', 400) }}

- -

Стилизация столбцов

- -

Столбцы, созданные при помощи multicol не могут быть стилизованы по одному. Нет способа сделать один столбец больше, чем другие, или изменить фон или цвет текста одного столбца. У вас есть две возможности изменить способ отображения столбцов:

- - - -

Используя ваш пример выше, измените размер отступа добавлением свойства column-gap:

- -
.container {
-  column-width: 200px;
-  column-gap: 20px;
-}
- -

Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи column-rule. Таким же способом как и свойство {{cssxref("border")}} с которым вы сталкивались в предыдущих уроках, column-rule — это короткая запись {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} и {{cssxref("column-rule-width")}} и принимает те же значения что и border.

- -
.container {
-  column-count: 3;
-  column-gap: 20px;
-  column-rule: 4px dotted rgb(79, 185, 227);
-}
- -

Попробуйте добавить линейки других стилей и цветов.

- -
- -
- -

{{ EmbedLiveSample('Multicol_3', '100%', 400) }}

- -

Следует обратить внимание на то, что линейка не занимает никакой ширины. Она располагается в промежутках, которые вы создали при помощи column-gap. Чтобы придать больше пространства по обе стороны от линейки, вам нужно увеличить размер column-gap.

- -

Свойств column-span

- -

Вы можете заставить элемент растянуться через все столбцы. В этом случае контент разрывается, когда сталкивается со spanning элементом и продолжается ниже, создавая новый набор блоков столбцов. Чтобы растянуть элемент через все столбцы используйте свойство {{cssxref("column-span")}} установленное на значение all.

- -
-

Обратите внимание что невозможно растянуть элемент через несколько столбцов. Это свойство может иметь либо значение none (по умолчанию) либо all.

-
- -
- -
- -

{{ EmbedLiveSample('Multicol_Span', '100%', 400) }}

- -

Столбцы и фрагментация

- -

Содержимое макета нескольких столбцов является фрагментированным. По сути, он ведет себя так же, как контент в постраничных медиа — так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.

- -

Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. Заголовок отделяется от текста, если столбцы разделяются между ними.

- -
- - -
<div class="container">
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-</div>
-
- -
.container {
-  column-width: 250px;
-  column-gap: 20px;
-}
-
-.card {
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
-
- -

{{ EmbedLiveSample('Multicol_4', '100%', 600) }}

- -

Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации CSS Фрагментации. Эта спецификация дает нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство {{cssxref("break-inside")}} со значением avoid к правилам .card. Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.

- -

В настоящее время также стоит добавлять старое свойство page-break-inside: avoid для лучшей поддержки старых браузеров.

- -
.card {
-  break-inside: avoid;
-  page-break-inside: avoid;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
-
- -

Перезагрузите страницу и ваши блоки должны остаться в целости.

- -
- - -
.container {
-  column-width: 250px;
-  column-gap: 20px;
-}
-
-.card {
-  break-inside: avoid;
-  page-break-inside: avoid;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
-
- -

{{ EmbedLiveSample('Multicol_5', '100%', 600) }}

- -

Проверь свои навыки!

- -

Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшие тесты для проверки того, что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Поверьте свои навыки: Макет с несколькими столбцами.

- -

Заключение

- -

Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, еще один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.

- -

См. также

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_multicol/index.html" "b/files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_multicol/index.html" deleted file mode 100644 index c549f1210b..0000000000 --- "a/files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_multicol/index.html" +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 'Проверь свои навыки: Multicol' -slug: Learn/CSS/CSS_layout/Навыки_Multicol -translation_of: Learn/CSS/CSS_layout/Multicol_skills ---- -
{{LearnSidebar}}
- -
- -

Цель этого задания — чтобы вы поработали с CSS свойствами {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} и {{CSSxRef("column-rule")}} и со значениями которые описаны в нашем уроке Макет с несколькими столбцами. Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.

- -
-

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, or Glitch чтобы проработать задания.

- -

Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка и дальнейшая помощь")}} в конце страницы.

-
- -

Multicol Раз

- -

В этом задании вам необходимо создать три столбца с отступом 50px между каждый столбцом.

- -

Three columns of text

- -

Попробуйте обновить живой пример ниже для воссоздания законченного примера:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}}

- -
-

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

-
- -

Multicol Два

- -

Создайте столбцы с минимальной шириной 200px.

- -

Затем добавьте серую линейку 5px между каждым столбцом, убедитесь, что между краями линейки и содержимым столбцов есть пространство 10px.

- -

Three columns of text with a grey rule between them.

- -

Попробуйте обновить живой код ниже для воссоздания законченного примера:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}}

- -
-

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

-
- -

Multicol Три

- -

Заставьте элемент содержащий заголовок и подзаголовок растянуться через все столбцы так чтоб это выглядело как на картинке

- -

Three columns of text with a heading and subheading spanning all three in the middle.

- -

Попробуйте обновить живой код ниже для воссоздания законченного примера:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}}

- -
-

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

-
- -

Оценка и дальнейшая помощь

- -

Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.

- -

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

- -
    -
  1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как  CodePen, jsFiddle, или Glitch. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
    2. -
  2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать: -
      -
    • Описательный заголовок такой как "Требуется оценка проверки навыков по Multicol задание 1".
      • -
    • Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
      • -
    • Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
      • -
    • Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
      • -
    -
    3. -
diff --git "a/files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_\320\277\320\276\320\267\320\270\321\206\320\270\320\276\320\275\320\270\321\200\320\276\320\262\320\260\320\275\320\270\321\217/index.html" "b/files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_\320\277\320\276\320\267\320\270\321\206\320\270\320\276\320\275\320\270\321\200\320\276\320\262\320\260\320\275\320\270\321\217/index.html" deleted file mode 100644 index f63a3a3a94..0000000000 --- "a/files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_\320\277\320\276\320\267\320\270\321\206\320\270\320\276\320\275\320\270\321\200\320\276\320\262\320\260\320\275\320\270\321\217/index.html" +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 'Проверьте свои навыки: позиционирование' -slug: Learn/CSS/CSS_layout/Навыки_позиционирования -translation_of: Learn/CSS/CSS_layout/Position_skills ---- -
{{LearnSidebar}}
- -
- -

Цель этого задания - чтобы вы поработали с CSS свойством {{CSSxRef("position")}} и его значениями которые описаны в нашем уроке Позиционирование. Вы будете работать над двумя небольшими задачами, использующими различные элементы из пройденного материала.

- -
-

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, или Glitch чтобы проработать задания.

- -

Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка и дальнейшая помощь")}} в конце страницы

-
- -

Позиционирование Раз

- -

В этом задании вам необходимо расположить элементы с классом target в верхнем правом углу контейнера, который имеет серую границу 5px.

- -

The green box is at the top right of a container with a grey border.

- -

Попробуйте обновить живой код ниже для воссоздания законченного примера:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}

- -

В качестве дополнительной задачи, сможете ли вы изменить цель так чтоб она отображалась под текстом?

- -
-

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе

-
- -

Позиционирование Два

- -

В примере ниже если вы прокрутите блок боковая панель прокручивается вместе с контентом. Измените его так чтобы боковая панель оставалась на месте и прокручивался только контент.

- -

The content is scrolled but the sidebar has stayed in place.

- -

Попробуйте обновить живой код ниже для воссоздания законченного примера:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1000)}}

- -
-

ля оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редактор

-
- -

Оценка и дальнейшая помощь

- -

Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.

- -

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

- -
    -
  1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как CodePen, jsFiddle, или Glitch. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
    2. -
  2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать: -
      -
    • Описательный заголовок такой как "Требуется оценка проверки навыков по Позиционированияю".
      • -
    • Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
      • -
    • Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
      • -
    • Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
      • -
    -
    3. -
diff --git "a/files/ru/learn/css/css_layout/\320\275\320\276\321\200\320\274\320\260\320\273\321\214\320\275\321\213\320\271_\320\277\320\276\321\202\320\276\320\272/index.html" "b/files/ru/learn/css/css_layout/\320\275\320\276\321\200\320\274\320\260\320\273\321\214\320\275\321\213\320\271_\320\277\320\276\321\202\320\276\320\272/index.html" deleted file mode 100644 index d936c240c5..0000000000 --- "a/files/ru/learn/css/css_layout/\320\275\320\276\321\200\320\274\320\260\320\273\321\214\320\275\321\213\320\271_\320\277\320\276\321\202\320\276\320\272/index.html" +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Базовый поток -slug: Learn/CSS/CSS_layout/Нормальный_поток -tags: - - float - - grid -translation_of: Learn/CSS/CSS_layout/Normal_Flow ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

Эта статья объясняет нормальный/базовый поток (normal flow) или способ, которым элементы страницы располагаются на веб-странице по умолчанию.

- - - - - - - - - - - - -
Что нужно знать прежде чем изучать:Основы HTML (изучите Введение в HTML), и понимания как работает CSS (изучите Введение в CSS.)
Цель:Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнем вносить какие-либо изменения.
- -

Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путем изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.

- -

Прежде чем углубиться в разные способы компоновки, стоит пересмотреть некоторые из вещей, которые вы изучили в предыдущих модулях в отношении нормального потока документов. 

- -

Как элементы располагаются по умолчанию?

- -

Прежде всего, индивидуальные боксы элементов располагаются в зависимости от содержимого элементов, затем добавляя какой-нибудь padding, border и margin вокруг них - это опять-таки боксовая модель, которую мы рассмотрели ранее.

- -

По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Встроенные элементы высоки и широки, как их содержимое. Вы не можете установить ширину или высоту на встроенные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если вы хотите контролировать размер встроенного элемента вам нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи display: block; (или даже,  display: inline-block;, который смешивает характеристики обоих.).

- -

Это объясняет отдельные элементы, но как насчет того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.

- -

Встроенные элементы ведут себя по-другому — они не появляются на новых строках; они распологаются на той же строке, что и другие и любой смежной или завернутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).

- -

Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остается, а меньшее исчезает — это звётся схлопывание полей (margin collapsing), и мы рассматривали это ранее.

- -

Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:

- -
-
<h1>Базовый поток документа</h1>
-
-<p>Я базовый элемент уровня блока. Мои соседние блочные элементы находятся на новой строке подо мной.</p>
-
-<p>По умолчанию мы охватываем 100% ширины нашего родительского элемента, и мы так же высоки, как и наш child-контент. Наша общая ширина и высота - это наш контент + внутренний отступ (padding) + ширина / высота границы.</p>
-
-<p>Мы отделены нашими полями. Из-за схлопывания полей мы отделены шириной одного из наших полей, а не обоих</p>
-
-<p>Встроенные элементы <span>такие как этот</span> и <span>этот</span> находятся на одной линии с другими, и смежным текстом, если есть пространство. Встроенные элементы, что не влезают <span>переходять на новую строку если это возможно (как этот текст)</span>если же это невозможно, они переходят на новую строку, как это изображение: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: rgba(255,84,104,0.3);
-  border: 2px solid rgb(255,84,104);
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: white;
-  border: 1px solid black;
-}
-
- -

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

- -

Заключение

- -

Теперь, когда вы поняли нормальный поток и как браузер выкладывает содержимое по умолчанию, двигаемся дальше, чтобы понять как это изменить для создания макета согласно вашему дизайну.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/css/css_layout/\320\276\321\202\320\267\321\213\320\262\321\207\320\270\320\262\321\213\320\271_\320\264\320\270\320\267\320\260\320\271\320\275/index.html" "b/files/ru/learn/css/css_layout/\320\276\321\202\320\267\321\213\320\262\321\207\320\270\320\262\321\213\320\271_\320\264\320\270\320\267\320\260\320\271\320\275/index.html" deleted file mode 100644 index 978b4e43dc..0000000000 --- "a/files/ru/learn/css/css_layout/\320\276\321\202\320\267\321\213\320\262\321\207\320\270\320\262\321\213\320\271_\320\264\320\270\320\267\320\260\320\271\320\275/index.html" +++ /dev/null @@ -1,328 +0,0 @@ ---- -title: Отзывчивый дизайн -slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн -translation_of: Learn/CSS/CSS_layout/Responsive_Design ---- -
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
- -

На заре веб-дизайна страницы создавались для экрана определенного размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивого) веб-дизайна (responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.

- - - - - - - - - - - - -
Необходимые знания: -

Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS и Устройство CSS.)

-
Задача: -

Понять базовые концепции и историю отзывчивого дизайна.

-
- -

Исторические макеты сайтов

- -

В какой-то момент истории при разработке веб-сайта у вас было два варианта:

- - - -

Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.

- -
A layout with two columns squashed into a mobile size viewport. -
-
- -
-

Примечание: Посмотрите этот простой жидкий макет: пример, исходный код. При просмотре примера, растягивайте и сжимайте окно браузера чтобы увидеть, как это выглядит при разных размерах.

-
- -

Сайт с фиксированной шириной рисковал иметь горизонтальную полосу прокрутки на экранах меньших чем ширина сайта (как видно ниже) и много белого пространства на краях дизайна на больших экранах.

- -
A layout with a horizontal scrollbar in a mobile viewport. -
-
- -
-

Примечание: Посмотрите этот простой макет с фиксированной шириной: пример, исходный код. Снова изучите результат по мере изменения размера окна браузера.

-
- -
-

Примечание: Скриншоты выше сделаны используя Responsive Design Mode в Firefox DevTools.

-
- -

Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.

- -

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

- -

Гибкий макет до отзывчивого дизайна

- -

Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.

- -

Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером.

- -

Отзывчивый дизайн

- -

Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трех методов в сочетании.

- -
    -
  1. Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - Fluid Grids (опубликовано в 2009 в A List Apart).
    2. -
  2. Вторым методом была идея жидких изображений. Используя очень простой метод настройки свойства max-width на 100%, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.
    3. -
  3. Третьим ключевым компонентом был media query. Media Query позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.
    4. -
- -

Очень важно понять, что адаптивный веб-дизайн — это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и media query, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.

- -

Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.

- -

Media Queries (Медиа-запросы)

- -

Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиа запросы позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определенная ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

- -

Например, следующий медиа запрос проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

- -
@media screen and (min-width: 800px) {
-  .container {
-    margin: 1em 2em;
-  }
-} 
-
- -

Вы можете добавлять несколько медиа запросов в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так чтоб соответствовать наилучшим образом разным размерам экрана. Точки, в которых применяется media query и меняется макет, известны как контрольные точки.

- -

Общим подходом при использовании Media Queriy является создание простого одно колоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для бо'льших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана чтобы уместить все. Это часто называют дизайном сначала мобильный (mobile first).

- -

Узнать больше о Media Query можно в документации MDN.

- -

Гибкие сетки

- -

Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развернутым до максимума окном.

- -

Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.

- -

В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование floats. Гибкий обтекаемый макет достигался путем присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.

- -
target / context = result 
-
- -

Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.

- -
.col {
-  width: 6.25%; /* 60 / 960 = 0.0625 */
-} 
-
- -

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

- -

Следующий пример демонстрирует простой отзывчивый дизайн используя Media Query и гибкие сетки. На узких экранах макет отображает блоки, сложенные друг на друга:

- -
A mobile view of the layout with boxes stacked on top of each other vertically. -
-
- -

На более широких экранах они премещаются в два столбца:

- -
A desktop view of a layout with two columns. -
-
- -
-

Примечание: Вы можете найти живой пример и исходный код этого примера на GitHub.

-
- -

Современные технологии макетов

- -

Современные методы макетов такие как Макет с несколькими столбцами, Flexbox, и Grid являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более легкий способ сделать так.

- -

Multicol

- -

Самый старый из этих методов — это multicol, когда вы задаете column-count, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.

- -
.container {
-  column-count: 3;
-} 
-
- -

Если вместо этого вы зададите column-width, то вы определите минимальную ширину. Браузер создаст столько столбцов той ширины, сколько будет комфортно умещаться в контейнер, а затем поделит оставшееся пространство между всеми столбцами. Поэтому число столбцов будет меняться согласно тому сколько имеется места.

- -
.container {
-  column-width: 10em;
-} 
-
- -

Flexbox

- -

В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения flex-grow и flex-shrink вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с бо'льшим или меньшим пространством вокруг себя.

- -

В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.

- -
.container {
-  display: flex;
-}
-
-.item {
-  flex: 1;
-} 
-
- -
-

Примечание: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчета размера столбцов: пример, исходный код.

-
- -

CSS grid

- -

В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создает grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.

- -
.container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-} 
-
- -
-

Примечание: версия grid макета еще проще, поскольку мы можем определить столбцы в .wrapper: пример, исходный код.

-
- -

Отзывчивые изображения

- -

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

- -
img {
-  max-width: 100%;
-} 
-
- -

Существуют очевидные недостатки к этому подходу. Изображение может быть изображено намного меньше своего исходного размера, что является пустой тратой пропускной способности — пользователь мобильных может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера. Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на компьютере. Либо, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Такие вещи можно достичь, просто уменьшая изображение.

- -

Отзывчивые изображения, используя элемент {{htmlelement("picture")}} и атрибуты srcset и sizes элемента {{htmlelement("img")}} оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.

- -

Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.

- -

Вы можете найти подробное руководство по отзывчивым изображениям в разделе ищучения HTML на MDN.

- -

Отзывчивая типография

- -

Элементом отзывчивого дизайна, не освещенного ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать бо'льшую или меньшую площадь экрана.

- -

В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаем меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум 1200px.

- -
html {
-  font-size: 1em;
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-@media (min-width: 1200px) {
-  h1 {
-    font-size: 4rem;
-  }
-} 
-
- -

Мы отредактировали наш приведенный выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.

- -

В мобильных версиях заголовок меньше:

- -
A stacked layout with a small heading size. -
-
- -

На компьютерах, однако, мы видим больший размер заголовка:

- -
A two column layout with a large heading. -
-
- -
-

Примечание: смотрите этот пример в действии: пример, исходный код.

-
- -

Такой подход к типографии показывает, что вам не надо ограничивать media queries только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.

- -

Using viewport units for responsive typography

- -

An interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport.

- -
h1 {
-  font-size: 6vw;
-}
- -

The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone.

- -

There is a solution, and it involves using calc(). If you add the vw unit to a value set using a fixed size such as ems or rems then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.

- -
-

See an example of this in action: example, source code.

-
- -

The viewport meta tag

- -

If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the <head> of the document.

- -
<meta name="viewport" content="width=device-width,initial-scale=1">
-
- -

This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.

- -

Why is this needed? Because mobile browsers tend to lie about their viewport width.

- -

This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.

- -

The trouble is that your responsive design with breakpoints and media queries won't work as intended on mobile browsers. If you've got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you'll never see your narrow screen layout on mobile. By setting width=device-width you are overriding Apple's default width=960px with the actual width of the device, so your media queries will work as intended.

- -

So you should always include the above line of HTML in the head of your documents.

- -

There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.

- - - -

You should avoid using minimum-scale, maximum-scale, and in particular setting user-scalable to no. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.

- -
-

Note: There is a CSS @ rule designed to replace the viewport meta tag — @viewport — however, it has poor browser support. When both are used the meta tag overrides @viewport.

-
- -

Summary

- -

Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.

- -

It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

- -

In this module

- - -- cgit v1.2.3-54-g00ecf