diff options
Diffstat (limited to 'files/ru/learn/css/css_layout')
10 files changed, 134 insertions, 134 deletions
diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index d67eedc31f..46e77bfe72 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -28,7 +28,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <h2 id="Почему_Flexbox">Почему Flexbox?</h2> -<p>Долгое время единственными надёжными инструментами CSS верстки были такие способы как Float (обтекание) и позиционирование.</p> +<p>Долгое время единственными надёжными инструментами CSS вёрстки были такие способы как Float (обтекание) и позиционирование.</p> <p>С их помощью сложно или невозможно достичь следующих простых требований к макету:</p> @@ -44,7 +44,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">посмотреть его вживую</a>.</p> -<p>Вы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трехколоночного макета.</p> +<p>Вы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трёхколоночного макета.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> @@ -288,7 +288,7 @@ article:nth-of-type(3) { justify-content: space-around; }</pre> -<p>Наконец, мы устанавливаем размер кнопке, мы даем ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.</p> +<p>Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.</p> <pre class="brush: css notranslate">button { flex: 1; @@ -309,6 +309,6 @@ article:nth-of-type(3) { <h2 id="Подытожим">Подытожим</h2> -<p>Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим еще один важный аспект макетов CSS - grid-системы.</p> +<p>Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим ещё один важный аспект макетов CSS - grid-системы.</p> <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html index 86ff3ac15d..9fc55d47cf 100644 --- a/files/ru/learn/css/css_layout/floats/index.html +++ b/files/ru/learn/css/css_layout/floats/index.html @@ -26,7 +26,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Свойство {{cssxref("float")}} вводилось для того, чтобы разработчики могли включать изображение, с обтеканием текста вокруг него слева или справа, как это часто используется в газетах.</p> -<p>Но разработчики быстро осознали, что можно обтекать все что угодно, не только изображения, поэтому использование float расширилось, например для верстки забавных эффектов таких как <a href="https://css-tricks.com/snippets/css/drop-caps/">drop-caps</a> (буквица).</p> +<p>Но разработчики быстро осознали, что можно обтекать все что угодно, не только изображения, поэтому использование float расширилось, например для вёрстки забавных эффектов таких как <a href="https://css-tricks.com/snippets/css/drop-caps/">drop-caps</a> (буквица).</p> <p>Floats очень часто использовались для создания макетов целых веб-страниц, отображающих несколько колонок информации, обтекаемых так, что колонки располагаются друг за другом (поведение по умолчанию предполагает, что колонки должны располагаются друг за другом, в том же порядке в котором они появляются в источнике). Доступны более новые, лучшие методы и поэтому использование floats для этих целей следует рассматривать как <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревшей техникой</a>.</p> @@ -34,9 +34,9 @@ translation_of: Learn/CSS/CSS_layout/Floats <h2 id="Простой_пример_float">Простой пример float</h2> -<p>Давайте выясним как использовать floats. Мы начнем с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый <code>index.html</code> файл на вашем компьютере, заполнив его <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">простым шаблоном HTML</a>, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.</p> +<p>Давайте выясним как использовать floats. Мы начнём с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый <code>index.html</code> файл на вашем компьютере, заполнив его <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">простым шаблоном HTML</a>, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.</p> -<p>Во-первых, мы начнем с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив все что там было до этого:</p> +<p>Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив все что там было до этого:</p> <pre class="brush: html notranslate"><h1>Simple float example</h1> @@ -175,11 +175,11 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p> -<p><a href="/en-US/docs/Web/CSS/Visual_formatting_model#Line_boxes">Линейные блоки</a> нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все еще остается в полную ширину.</p> +<p><a href="/en-US/docs/Web/CSS/Visual_formatting_model#Line_boxes">Линейные блоки</a> нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все ещё остаётся в полную ширину.</p> <h2 id="Очистка_обтекания">Очистка обтекания</h2> -<p>Мы увидели, что обтекаемый объект удален из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства {{cssxref("clear")}}.</p> +<p>Мы увидели, что обтекаемый объект удалён из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства {{cssxref("clear")}}.</p> <p>Добавьте класс <code>cleared</code> ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:</p> @@ -243,9 +243,9 @@ translation_of: Learn/CSS/CSS_layout/Floats <li><code>both</code>: очищает любые обтекаемые объекты, слева или справа.</li> </ul> -<h2 id="Очистка_блоков_обернутых_вокруг_обтекаемых_элементов">Очистка блоков обернутых вокруг обтекаемых элементов</h2> +<h2 id="Очистка_блоков_обёрнутых_вокруг_обтекаемых_элементов">Очистка блоков обёрнутых вокруг обтекаемых элементов</h2> -<p>Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обернуты в {{htmlelement("div")}} с классом <code>wrapper</code>.</p> +<p>Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обёрнуты в {{htmlelement("div")}} с классом <code>wrapper</code>.</p> <pre class="brush: html notranslate"><div class="wrapper"> <div class="box">Float</div> @@ -313,11 +313,11 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p> -<p>И еще раз, так происходит потому, что обтекаемый объект изымается из нормального потока. <span class="tlid-translation translation" lang="ru"><span title="">Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула </span></span>обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который <span class="tlid-translation translation" lang="ru"><span title="">правильно справляется с этой ситуацией.</span></span></p> +<p>И ещё раз, так происходит потому, что обтекаемый объект изымается из нормального потока. <span class="tlid-translation translation" lang="ru"><span title="">Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула </span></span>обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который <span class="tlid-translation translation" lang="ru"><span title="">правильно справляется с этой ситуацией.</span></span></p> <h3 id="Clearfix_hack">Clearfix hack</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Традиционно эта ситуация решалась с помощью так называемого «clearfix hack».</span></span> Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и оберточный контент, а также настройки для очистки обоих.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Традиционно эта ситуация решалась с помощью так называемого «clearfix hack».</span></span> Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и обёрточный контент, а также настройки для очистки обоих.</p> <p>Добавьте следующий CSS в наш пример:</p> @@ -379,9 +379,9 @@ translation_of: Learn/CSS/CSS_layout/Floats <h3 id="Использование_overflow">Использование overflow</h3> -<p>Альтернативный метод — это задать свойство {{cssxref("overflow")}} для обертки (wrapper) на значение отличное от <code>visible</code>.</p> +<p>Альтернативный метод — это задать свойство {{cssxref("overflow")}} для обёртки (wrapper) на значение отличное от <code>visible</code>.</p> -<p>Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте <code>overflow: auto</code> к правилу для обертки. Блок снова должен быть очищен.</p> +<p>Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте <code>overflow: auto</code> к правилу для обёртки. Блок снова должен быть очищен.</p> <pre class="brush: css notranslate">.wrapper { background-color: rgb(79,185,227); @@ -433,7 +433,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p> -<p>Этот пример работает путем создания того, что известно как <strong>Блочный Контекст Форматирования (block formatting context </strong>(BFC)<strong>). </strong>Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определенных случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за <span class="tlid-translation translation" lang="ru"><span title="">непреднамеренный</span></span> последствий использования overflow.</p> +<p>Этот пример работает путём создания того, что известно как <strong>Блочный Контекст Форматирования (block formatting context </strong>(BFC)<strong>). </strong>Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определённых случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за <span class="tlid-translation translation" lang="ru"><span title="">непреднамеренный</span></span> последствий использования overflow.</p> <h3 id="display_flow-root">display: flow-root</h3> diff --git a/files/ru/learn/css/css_layout/grids/index.html b/files/ru/learn/css/css_layout/grids/index.html index 903cefd2be..931f326250 100644 --- a/files/ru/learn/css/css_layout/grids/index.html +++ b/files/ru/learn/css/css_layout/grids/index.html @@ -46,7 +46,7 @@ translation_of: Learn/CSS/CSS_layout/Grids <h2 id="Создание_простых_рамок_сетки">Создание простых рамок сетки</h2> -<p>Мы начнем с рассмотрения того, как вы можете создать простую сетку для вашего проекта.</p> +<p>Мы начнём с рассмотрения того, как вы можете создать простую сетку для вашего проекта.</p> <p>В настоящее время большинство макетов типа grid создаются с использованием поплавков (floats). Если вы прочитали<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats"> нашу предыдущую статью о поплавках,</a> вы уже видели, как мы можем использовать эту технику для создания раскладки нескольких столбцов, что является сущностью любой сетки, использующей этот метод.</p> @@ -58,7 +58,7 @@ translation_of: Learn/CSS/CSS_layout/Grids <p>Давайте сначала создадим сетку, использующую столбцы фиксированной ширины.</p> -<p>Начните с создания локальной копии нашего образца <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> файла, который содержит следующую разметку в своем теле.</p> +<p>Начните с создания локальной копии нашего образца <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> файла, который содержит следующую разметку в своём теле.</p> <pre class="brush: html notranslate"><div class="wrapper"> <div class="row"> @@ -87,7 +87,7 @@ translation_of: Learn/CSS/CSS_layout/Grids <p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p> -<p>В элементе {{htmlelement ("style")}} добавьте следующий код, который дает контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это дает нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. <a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Changing the box model completely</a> для большего объяснения).</p> +<p>В элементе {{htmlelement ("style")}} добавьте следующий код, который даёт контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это даёт нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. <a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Changing the box model completely</a> для большего объяснения).</p> <pre class="brush: css notranslate">* { box-sizing: border-box; @@ -103,7 +103,7 @@ body { padding-right: 20px; }</pre> -<p>Теперь используйте контейнер строк, который обернут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:</p> +<p>Теперь используйте контейнер строк, который обёрнут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:</p> <pre class="brush: css notranslate">.row { clear: both; @@ -111,9 +111,9 @@ body { <p>Применение этого клиринга означает, что нам не нужно полностью заполнять каждую строку элементами, составляющими полные двенадцать столбцов. Строки будут разделены и не будут мешать друг другу.</p> -<p>Желоба между колоннами шириной 20 пикселей. Мы создаем эти желоба в качестве поля в левой части каждого столбца, включая первый столбец, чтобы сбалансировать 20 пикселей прокладки в правой части контейнера. Таким образом, у нас есть 12 водосточных желобов - 12 x 20 = 240.</p> +<p>Желоба между колоннами шириной 20 пикселей. Мы создаём эти желоба в качестве поля в левой части каждого столбца, включая первый столбец, чтобы сбалансировать 20 пикселей прокладки в правой части контейнера. Таким образом, у нас есть 12 водосточных желобов - 12 x 20 = 240.</p> -<p>Нам нужно вычесть это из нашей общей ширины 960 пикселей, что дает нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг - создать правило для класса <code>.col</code>, плавающее влево, предоставив ему {{cssxref ("margin-left")}} из 20 пикселей для формирования желоба и {{cssxref ("width" )}} из 60 пикселей. Добавьте нижеследующее правило в CSS:</p> +<p>Нам нужно вычесть это из нашей общей ширины 960 пикселей, что даёт нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг - создать правило для класса <code>.col</code>, плавающее влево, предоставив ему {{cssxref ("margin-left")}} из 20 пикселей для формирования желоба и {{cssxref ("width" )}} из 60 пикселей. Добавьте нижеследующее правило в CSS:</p> <pre class="brush: css notranslate">.col { float: left; @@ -147,10 +147,10 @@ body { .col.span11 { width: 860px; } .col.span12 { width: 940px; }</pre> -<p>С помощью этих классов мы можем теперь выкладывать разные столбцы ширины в сетке. Попробуйте сохранить и загрузить страницу в своем браузере, чтобы увидеть эффекты.</p> +<p>С помощью этих классов мы можем теперь выкладывать разные столбцы ширины в сетке. Попробуйте сохранить и загрузить страницу в своём браузере, чтобы увидеть эффекты.</p> <div class="note"> -<p><strong>Примечание</strong>: Если вам не удается заставить приведенный выше пример работать, попробуйте сравнить его с нашей <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">готовой версией</a> на GitHub (см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">запуск в режиме реального времени</a>).</p> +<p><strong>Примечание</strong>: Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">готовой версией</a> на GitHub (см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">запуск в режиме реального времени</a>).</p> </div> <p>Попробуйте изменить классы на своих элементах или даже добавить и удалить некоторые контейнеры, чтобы увидеть, как вы можете изменять макет. Например, вы можете сделать вторую строку следующим образом:</p> @@ -170,7 +170,7 @@ body { <pre class="notranslate">target / context = result</pre> -<p>Для нашей ширины столбца наша <strong>целевая ширина</strong> составляет 60 пикселей, а наш <strong>контекст</strong> 960 пикселей. Для расчета процента мы можем использовать следующее.</p> +<p>Для нашей ширины столбца наша <strong>целевая ширина</strong> составляет 60 пикселей, а наш <strong>контекст</strong> 960 пикселей. Для расчёта процента мы можем использовать следующее.</p> <pre class="notranslate">60 / 960 = 0.0625</pre> @@ -200,7 +200,7 @@ body { <p>Мы не только дали нам процент {{cssxref ("width")}}, мы также добавили свойство {{cssxref ("max-width")}}, чтобы остановить распространение макета.</p> -<p>Затем обновите четвертое правило CSS (с селектором <code>.col</code>) следующим образом:</p> +<p>Затем обновите четвёртое правило CSS (с селектором <code>.col</code>) следующим образом:</p> <pre class="brush: css notranslate">.col { float: left; @@ -209,7 +209,7 @@ body { background: rgb(255, 150, 150); }</pre> -<p>Теперь идет немного более трудоемкая часть - нам нужно обновить все наши правила <code>.col.span</code>, чтобы использовать проценты, а не ширину пикселей. Это занимает немного времени с калькулятором; чтобы сэкономить вам немного усилий, мы сделали это для вас ниже.</p> +<p>Теперь идёт немного более трудоёмкая часть - нам нужно обновить все наши правила <code>.col.span</code>, чтобы использовать проценты, а не ширину пикселей. Это занимает немного времени с калькулятором; чтобы сэкономить вам немного усилий, мы сделали это для вас ниже.</p> <p>Обновите нижний блок правил CSS следующим образом:</p> @@ -231,14 +231,14 @@ body { <p>Теперь сохраните свой код, загрузите его в браузере и попробуйте изменить ширину видового экрана - вы должны увидеть, что ширины столбцов хорошо меняются. Отлично!</p> <div class="note"> -<p><strong>Примечание</strong>: Если вам не удается заставить приведенный выше пример работать, попробуйте сравнить его с нашей <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">готовой версией на GitHub</a> (см. также<a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html"> запуск в режиме реального времени</a>).</p> +<p><strong>Примечание</strong>: Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">готовой версией на GitHub</a> (см. также<a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html"> запуск в режиме реального времени</a>).</p> </div> <h3 id="Более_простые_вычисления_с_использованием_функции_calc">Более простые вычисления с использованием функции calc()</h3> -<p>Вы можете использовать функцию {{cssxref ("calc ()")}} для выполнения математики прямо внутри вашего CSS - это позволяет вставлять простые математические уравнения в ваши значения CSS, чтобы рассчитать, какое значение должно быть. Это особенно полезно, когда необходимо выполнить сложную математику и вы даже можете сделать расчет, который использует разные единицы, например «Я хочу, чтобы высота этого элемента всегда была на 100% от высоты родителя, минус 50 пикселей». См. <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">этот пример из учебника API MediaRecorder</a>.</p> +<p>Вы можете использовать функцию {{cssxref ("calc ()")}} для выполнения математики прямо внутри вашего CSS - это позволяет вставлять простые математические уравнения в ваши значения CSS, чтобы рассчитать, какое значение должно быть. Это особенно полезно, когда необходимо выполнить сложную математику и вы даже можете сделать расчёт, который использует разные единицы, например «Я хочу, чтобы высота этого элемента всегда была на 100% от высоты родителя, минус 50 пикселей». См. <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">этот пример из учебника API MediaRecorder</a>.</p> -<p>В любом случае, вернемся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция <code>calc () </code>позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:</p> +<p>В любом случае, вернёмся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция <code>calc () </code>позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:</p> <pre class="brush: css notranslate">.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); @@ -259,11 +259,11 @@ body { .col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> <div class="note"> -<p><strong>Примечание</strong>: Вы можете увидеть нашу законченную версию в файле <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">liquid-grid-calc.html</a> (также см. ее <a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">в режиме реального времени</a>).</p> +<p><strong>Примечание</strong>: Вы можете увидеть нашу законченную версию в файле <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">liquid-grid-calc.html</a> (также см. её <a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">в режиме реального времени</a>).</p> </div> <div class="note"> -<p><strong>Примечание</strong>: Если вы не можете заставить это работать, возможно, это связано с тем, что ваш браузер не поддерживает функцию <code>calc ()</code>, хотя он довольно хорошо поддерживается в браузерах - еще в IE9.</p> +<p><strong>Примечание</strong>: Если вы не можете заставить это работать, возможно, это связано с тем, что ваш браузер не поддерживает функцию <code>calc ()</code>, хотя он довольно хорошо поддерживается в браузерах - ещё в IE9.</p> </div> <h3 id="Семантические_и_несемантические_сетчатые_системы">Семантические и "несемантические" сетчатые системы</h3> @@ -326,13 +326,13 @@ body { <p>Также имейте в виду, что если содержимое элементов становится шире, чем занимаемые им строки, оно будет переполняться и выглядит как беспорядок.</p> -<p>Самое большое ограничение этой системы состоит в том, что она по существу одномерна. Мы имеем дело со столбцами и охватываем элементы по столбцам, но не по строкам. С помощью этих старых методов компоновки очень сложно контролировать высоту элементов без явной установки высоты, и это тоже очень негибкий подход - он работает только, если вы можете гарантировать, что ваш контент будет определенной высоты.</p> +<p>Самое большое ограничение этой системы состоит в том, что она по существу одномерна. Мы имеем дело со столбцами и охватываем элементы по столбцам, но не по строкам. С помощью этих старых методов компоновки очень сложно контролировать высоту элементов без явной установки высоты, и это тоже очень негибкий подход - он работает только, если вы можете гарантировать, что ваш контент будет определённой высоты.</p> <h2 id="Flexbox_grids">Flexbox grids?</h2> -<p>Если вы прочтете нашу предыдущую статью о <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, вы можете подумать, что flexbox - идеальное решение для создания сетчатой системы. В настоящее время доступно множество систем gridbox на основе flexbox и flexbox может решить многие из проблем, которые мы уже обнаружили при создании нашей сетки выше.</p> +<p>Если вы прочтёте нашу предыдущую статью о <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, вы можете подумать, что flexbox - идеальное решение для создания сетчатой системы. В настоящее время доступно множество систем gridbox на основе flexbox и flexbox может решить многие из проблем, которые мы уже обнаружили при создании нашей сетки выше.</p> -<p>Однако flexbox никогда не разрабатывался как сетчатая система и создает новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек (<code>wrapper</code>), <code>row</code> и <code>col</code> классов:</p> +<p>Однако flexbox никогда не разрабатывался как сетчатая система и создаёт новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек (<code>wrapper</code>), <code>row</code> и <code>col</code> классов:</p> <pre class="brush: css notranslate">body { width: 90%; @@ -357,9 +357,9 @@ body { background: rgb(255,150,150); }</pre> -<p>Вы можете попробовать сделать эти замены в своем собственном примере или посмотреть на наш пример кода <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html </a>(см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">он работает в режиме реального времени</a>).</p> +<p>Вы можете попробовать сделать эти замены в своём собственном примере или посмотреть на наш пример кода <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html </a>(см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">он работает в режиме реального времени</a>).</p> -<p>Здесь мы превращаем каждую строку в гибкий контейнер. С сеткой на основе flexbox нам все еще нужны строки, чтобы мы могли иметь элементы, которые составляют менее 100%. Мы установили этот контейнер для <code>display: flex</code>.</p> +<p>Здесь мы превращаем каждую строку в гибкий контейнер. С сеткой на основе flexbox нам все ещё нужны строки, чтобы мы могли иметь элементы, которые составляют менее 100%. Мы установили этот контейнер для <code>display: flex</code>.</p> <p>На <code>.col </code>мы устанавливаем первое значение свойства {{cssxref ("flex")}} ({{cssxref ("flex-grow")}}) до 1, чтобы наши объекты могли расти, второе значение ({{cssxref (" flex-shrink ")}}) до 1, поэтому элементы могут сокращаться, а третье значение ({{cssxref (" flex-basis ")}}) - <code>auto</code>. Поскольку наш элемент имеет набор {{cssxref ("width")}}, <code>auto</code> будет использовать эту ширину в качестве базового значения flex (<code>flex-basis</code>).</p> @@ -373,11 +373,11 @@ body { <p>Flexbox является <strong>одномерным</strong> по дизайну. Он имеет дело с одним измерением - со строкой или столбцом. Мы не можем создать строгую сетку для столбцов и строк, что означает, что если мы будем использовать flexbox для нашей сетки, нам все равно нужно рассчитать проценты, как для плавающего макета.</p> -<p>В вашем проекте вы все равно можете использовать сетку flexbox из-за дополнительных возможностей выравнивания и распределения пространства. Flexbox обеспечивает надплавки. Однако вам следует помнить, что вы все еще используете инструмент для чего-то другого, кроме того, для чего он предназначен. Таким образом, вы можете почувствовать, что он заставляет вас прыгать через дополнительные обручи, чтобы получить конечный результат, который вы хотите.</p> +<p>В вашем проекте вы все равно можете использовать сетку flexbox из-за дополнительных возможностей выравнивания и распределения пространства. Flexbox обеспечивает надплавки. Однако вам следует помнить, что вы все ещё используете инструмент для чего-то другого, кроме того, для чего он предназначен. Таким образом, вы можете почувствовать, что он заставляет вас прыгать через дополнительные обручи, чтобы получить конечный результат, который вы хотите.</p> <h2 id="Системы_сторонних_сетей">Системы сторонних сетей</h2> -<p>Теперь, когда мы понимаем математику за нашими расчетами в сетке, мы находимся в хорошем месте, чтобы взглянуть на некоторые из сторонних сетевых систем, которые используются совместно. Если вы ищете «CSS Grid framework» в Интернете, вы найдете огромный список вариантов на выбор. В популярных структурах, таких как <a href="http://getbootstrap.com/">Bootstrap</a> и <a href="https://foundation.zurb.com/">Foundation</a>, есть сетка. Существуют также автономные сетчатые системы, разработанные с использованием CSS или с использованием препроцессоров.</p> +<p>Теперь, когда мы понимаем математику за нашими расчётами в сетке, мы находимся в хорошем месте, чтобы взглянуть на некоторые из сторонних сетевых систем, которые используются совместно. Если вы ищете «CSS Grid framework» в Интернете, вы найдёте огромный список вариантов на выбор. В популярных структурах, таких как <a href="http://getbootstrap.com/">Bootstrap</a> и <a href="https://foundation.zurb.com/">Foundation</a>, есть сетка. Существуют также автономные сетчатые системы, разработанные с использованием CSS или с использованием препроцессоров.</p> <p>Давайте рассмотрим одну из этих автономных систем, поскольку она демонстрирует общие методы работы с сеткой. Сетка, которую мы будем использовать, является частью Skeleton, простой CSS-структуры.</p> @@ -462,28 +462,28 @@ body { <p>Попробуйте сохранить свой HTML-файл и загрузить его в свой браузер, чтобы увидеть эффект.</p> <div class="note"> -<p>Примечание. Если вам не удается заставить этот пример работать, попробуйте сравнить его с нашим <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> - файлом (см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">в режиме реального времени</a>).</p> +<p>Примечание. Если вам не удаётся заставить этот пример работать, попробуйте сравнить его с нашим <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> - файлом (см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">в режиме реального времени</a>).</p> </div> <p>Если вы посмотрите в файле skeleton.css, вы увидите, как это работает. Например, у Skeleton определены следующие элементы стиля с добавленными к ним классами «три столбца».</p> <pre class="brush: css notranslate">.three.columns { width: 22%; }</pre> -<p>Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределенных классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчет этих процентов.</p> +<p>Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределённых классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчёт этих процентов.</p> -<p>Как вы можете видеть, нам нужно написать очень мало CSS при использовании Skeleton. Он касается всех плавающих для нас, когда мы добавляем классы в нашу разметку. Именно эта способность нести ответственность за компоновку над чем-то еще, что делает использование рамки для сетчатой системы неотразимым выбором!</p> +<p>Как вы можете видеть, нам нужно написать очень мало CSS при использовании Skeleton. Он касается всех плавающих для нас, когда мы добавляем классы в нашу разметку. Именно эта способность нести ответственность за компоновку над чем-то ещё, что делает использование рамки для сетчатой системы неотразимым выбором!</p> -<p>Skeleton - это более простая сетка, чем некоторые из структур, с которыми вы можете столкнуться. Сетки в больших рамках, таких как Bootstrap и Foundation, предлагают больше функциональности и дополнительные точки останова для различной ширины экрана. Тем не менее, все они работают аналогичным образом - добавив определенные классы в свою разметку, вы можете контролировать, как элемент выложен с использованием предопределенной сетки.</p> +<p>Skeleton - это более простая сетка, чем некоторые из структур, с которыми вы можете столкнуться. Сетки в больших рамках, таких как Bootstrap и Foundation, предлагают больше функциональности и дополнительные точки останова для различной ширины экрана. Тем не менее, все они работают аналогичным образом - добавив определённые классы в свою разметку, вы можете контролировать, как элемент выложен с использованием предопределённой сетки.</p> <h2 id="Родные_CSS_Сетки_с_Grid_Layout">Родные CSS Сетки с Grid Layout</h2> -<p>В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы еще не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout Module</a>).</p> +<p>В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы ещё не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout Module</a>).</p> <p>В настоящее время вы можете использовать только те методы, которые мы покажем вам в браузерах, которые реализуют макет сетки CSS «за флагом» - это означает, что он в настоящее время реализован, но в экспериментальном состоянии, которое вам нужно включить.</p> -<p>В Firefox, например, вам нужно перейти к URL-адресу <code>about: config</code>, выполнить поиск по предпочтению <code>layout.css.grid.enabled</code> и дважды щелкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив <a href="http://gridbyexample.com/browsers">Grid by Example</a>.</p> +<p>В Firefox, например, вам нужно перейти к URL-адресу <code>about: config</code>, выполнить поиск по предпочтению <code>layout.css.grid.enabled</code> и дважды щёлкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив <a href="http://gridbyexample.com/browsers">Grid by Example</a>.</p> -<p>Мы рассмотрели структуру Скелетной сетки выше - как и другие сторонние решетки и даже ручные сетки, для этого требуется добавить <code><div></code> для формирования строк, а затем указать количество столбцов, которые будут охватывать элементы в этих рядах.</p> +<p>Мы рассмотрели структуру Скелетной сетки выше - как и другие сторонние решётки и даже ручные сетки, для этого требуется добавить <code><div></code> для формирования строк, а затем указать количество столбцов, которые будут охватывать элементы в этих рядах.</p> <p>С помощью CSS Grid Layout вы можете полностью указать свою сетку в CSS, не добавляя эти вспомогательные классы в разметку вообще. Давайте рассмотрим наш простой пример и посмотрим, как мы будем создавать тот же макет с помощью CSS Grid Layout.</p> @@ -510,7 +510,7 @@ body { <div class="col span2">16</div> </div></pre> -<p>На этот раз у нас есть родительский <code><div></code> с классом обертки (<code>wrapper</code>), а затем все дочерние элементы просто появляются непосредственно внутри обертки - никаких элементов строки. Мы добавили класс к элементам, которые должны охватывать более одного столбца.</p> +<p>На этот раз у нас есть родительский <code><div></code> с классом обёртки (<code>wrapper</code>), а затем все дочерние элементы просто появляются непосредственно внутри обёртки - никаких элементов строки. Мы добавили класс к элементам, которые должны охватывать более одного столбца.</p> <p>Теперь добавьте следующее в элемент {{htmlelement ("style")}}:</p> @@ -529,7 +529,7 @@ body { <p>Здесь мы устанавливаем правило <code>.wrapper</code>, поэтому оно составляет 90% от ширины тела, с центром и имеет {{cssxref ("max-width")}} 960px.</p> -<p>Теперь для свойств сетки CSS. Мы можем объявить сетку, используя значение <code>grid</code> свойства {{cssxref ("display")}}, установить желоб с свойством {{cssxref ("grid-gap")}}, а затем создать сетку из 12 столбцов равной ширине, используя {{cssxref ("grid-template-columns")}}, новую функцию <code>repeat()</code> и новую единицу, определенную для макета сетки - блок <code>fr</code>.</p> +<p>Теперь для свойств сетки CSS. Мы можем объявить сетку, используя значение <code>grid</code> свойства {{cssxref ("display")}}, установить жёлоб с свойством {{cssxref ("grid-gap")}}, а затем создать сетку из 12 столбцов равной ширине, используя {{cssxref ("grid-template-columns")}}, новую функцию <code>repeat()</code> и новую единицу, определённую для макета сетки - блок <code>fr</code>.</p> <p>Блок <code>fr</code> представляет собой блок фракции - он описывает долю доступного пространства в контейнере сетки. Если все столбцы равны <code>1fr</code>, каждый из них занимает равное количество места. Это устраняет необходимость вычислять проценты для создания гибкой сетки.</p> @@ -567,7 +567,7 @@ body { <p>Попробуйте сохранить и обновить, и вы увидите, что контейнеры охватывают несколько столбцов, если это необходимо. Круто!</p> -<p>Сетки CSS являются <strong>двумерными</strong>, так как макет растет и сжимается, элементы остаются выровненными по горизонтали и по вертикали.</p> +<p>Сетки CSS являются <strong>двумерными</strong>, так как макет растёт и сжимается, элементы остаются выровненными по горизонтали и по вертикали.</p> <p>Вы можете проверить это, заменив последние 4 col <code><div></code> s следующим:</p> @@ -576,14 +576,14 @@ body { <div class="col span3">15this<br>is<br>less</div> <div class="col span2">16</div></pre> -<p>Здесь мы намеренно добавили некоторые фрагменты строки ({{htmlelement ("br")}}), чтобы заставить некоторые из столбцов стать выше других. Если вы попытаетесь сохранить и обновить, вы увидите, что столбцы регулируют их высоту, как самый высокий контейнер, поэтому все остается аккуратным.</p> +<p>Здесь мы намеренно добавили некоторые фрагменты строки ({{htmlelement ("br")}}), чтобы заставить некоторые из столбцов стать выше других. Если вы попытаетесь сохранить и обновить, вы увидите, что столбцы регулируют их высоту, как самый высокий контейнер, поэтому все остаётся аккуратным.</p> <p>Окончательный макет выглядит так:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13909/css-grid-finished.png" style="display: block; height: 130px; margin: 0px auto; width: 972px;"></p> <div class="note"> -<p><strong>Примечание</strong>: Если вам не удается заставить этот пример работать, вы можете проверить свой код на нашу <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid-finished.html">законченную версию</a> (также смотрите, как она <a href="https://mdn.github.io/learning-area/css/css-layout/grids/css-grid-finished.html">работает в прямом эфире</a>).</p> +<p><strong>Примечание</strong>: Если вам не удаётся заставить этот пример работать, вы можете проверить свой код на нашу <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid-finished.html">законченную версию</a> (также смотрите, как она <a href="https://mdn.github.io/learning-area/css/css-layout/grids/css-grid-finished.html">работает в прямом эфире</a>).</p> </div> <h3 id="Другие_полезные_функции_сетки_CSS">Другие полезные функции сетки CSS</h3> @@ -609,7 +609,7 @@ body { <p>Нам также не нужно использовать маржу для фальшивых желобов или явно рассчитать их ширину - сетка CSS имеет эту функциональность, встроенную прямо в свойство <code>grid-gap</code>.</p> -<p>Мы просто касаемся поверхности того, что возможно с помощью CSS Grid Layout, но главное, что нужно понять в контексте этой статьи, это то, что вам не нужно создавать сетку с сеткой - она одна. Вы можете написать CSS, который помещает элемент непосредственно в предопределенную сетку. Это первый раз, когда это было возможно с помощью CSS и это улучшится, когда поддержка браузера закрепится.</p> +<p>Мы просто касаемся поверхности того, что возможно с помощью CSS Grid Layout, но главное, что нужно понять в контексте этой статьи, это то, что вам не нужно создавать сетку с сеткой - она одна. Вы можете написать CSS, который помещает элемент непосредственно в предопределённую сетку. Это первый раз, когда это было возможно с помощью CSS и это улучшится, когда поддержка браузера закрепится.</p> <h3 id="Активное_обучение_Напишите_свою_собственную_простую_сетку">Активное обучение: Напишите свою собственную простую сетку</h3> @@ -626,7 +626,7 @@ body { <h2 id="Резюме">Резюме</h2> -<p>Прочитав эту статью, вы должны теперь понять, как grid-схемы и grid-структуры работают в CSS. Вы также заглянули в будущее сетки CSS и теперь должны понимать, что используемые нами grid-сетки - это, по сути, стоп-решение, пока у нас не будет широко распространенного способа достижения этого в CSS.</p> +<p>Прочитав эту статью, вы должны теперь понять, как grid-схемы и grid-структуры работают в CSS. Вы также заглянули в будущее сетки CSS и теперь должны понимать, что используемые нами grid-сетки - это, по сути, стоп-решение, пока у нас не будет широко распространённого способа достижения этого в CSS.</p> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/ru/learn/css/css_layout/index.html b/files/ru/learn/css/css_layout/index.html index d5bc2e8e58..1fce962206 100644 --- a/files/ru/learn/css/css_layout/index.html +++ b/files/ru/learn/css/css_layout/index.html @@ -17,7 +17,7 @@ tags: - TopicStub - flexbox - float - - Верстка + - Вёрстка - Сетка - позиционирование - разметка страницы @@ -43,7 +43,7 @@ translation_of: Learn/CSS/CSS_layout <h2 id="Руководство">Руководство</h2> -<p>Эти разделы содержат инструкции по основным инструментам и методам верстки, доступным в CSS. На последнем уроке у Вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.</p> +<p>Эти разделы содержат инструкции по основным инструментам и методам вёрстки, доступным в CSS. На последнем уроке у Вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.</p> <dl> <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS вёрстку</a></dt> @@ -54,26 +54,26 @@ translation_of: Learn/CSS/CSS_layout <dl> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> - <dd><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> - это метод одномерной верстки для размещения элементов в строках или столбцах. Элементы растягиваются, чтобы заполнить дополнительное пространство и сжимаются, чтобы поместиться в меньшее пространство. Данный раздел объясняет фундаментальные принципы.</dd> + <dd><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> - это метод одномерной вёрстки для размещения элементов в строках или столбцах. Элементы растягиваются, чтобы заполнить дополнительное пространство и сжимаются, чтобы поместиться в меньшее пространство. Данный раздел объясняет фундаментальные принципы.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt> - <dd>CSS Grid Layout - это двумерная система верстки для веб. Она позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.</dd> + <dd>CSS Grid Layout - это двумерная система вёрстки для веб. Она позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt> - <dd>Изначально созданное для плавающих изображений внутри текстовых блоков, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания мульти-колоночной верстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.</dd> + <dd>Изначально созданное для плавающих изображений внутри текстовых блоков, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания мульти-колоночной вёрстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.</dd> </dl> <dl> <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></dt> <dd>Позиционирование позволяет вам брать элементы из нормального потока и изменять их поведение, например, заставляет находиться друг под другом или всегда оставаться в одном и том же месте внутри окна просмотра браузера. В этом разделе объясняются различные значения {{cssxref("position")}} и способы их применения.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Мульти-колоночная верстка</a></dt> - <dd>Спецификация мульти-колоночной верстки дает вам способ размещения содержимого в столбцах по аналогии с версткой газет. Этот раздел объясняет, как использовать эту возможность.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы верстки</a></dt> - <dd>Grid-системы - это очень распространенная возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей верстки. Вы представляете свою верстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Мульти-колоночная вёрстка</a></dt> + <dd>Спецификация мульти-колоночной вёрстки даёт вам способ размещения содержимого в столбцах по аналогии с вёрсткой газет. Этот раздел объясняет, как использовать эту возможность.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы вёрстки</a></dt> + <dd>Grid-системы - это очень распространённая возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей вёрстки. Вы представляете свою вёрстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старыми браузерами</a></dt> <dd> - <p>В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы верстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приоритетны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.</p> + <p>В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы вёрстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приоритетны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.</p> </dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Фундаментальное понятие верстки</a></dt> - <dd>Оценка ваших знаний различных методов верстки посредством вёрстки веб-страницы.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Фундаментальное понятие вёрстки</a></dt> + <dd>Оценка ваших знаний различных методов вёрстки посредством вёрстки веб-страницы.</dd> </dl> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html index 422a215b1c..218e2a5c19 100644 --- a/files/ru/learn/css/css_layout/introduction/index.html +++ b/files/ru/learn/css/css_layout/introduction/index.html @@ -7,7 +7,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства {{cssxref("display")}}, и разберем некоторые концепции, которые будут рассмотрены в этой статье. </p> +<p class="summary">В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства {{cssxref("display")}}, и разберём некоторые концепции, которые будут рассмотрены в этой статье. </p> <table class="learn-box standard-table"> <tbody> @@ -35,7 +35,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <li>Многоколоночный макет</li> </ul> -<p>Каждый метод имеет свои преимущества и недостатки и ни одна техника не предназначена для использования в изоляции от других. Разбирая данные методы, вы поймете, какой из них лучший инструмент разметки для каждой задачи.</p> +<p>Каждый метод имеет свои преимущества и недостатки и ни одна техника не предназначена для использования в изоляции от других. Разбирая данные методы, вы поймёте, какой из них лучший инструмент разметки для каждой задачи.</p> <h2 id="Normal_flow">Normal flow</h2> @@ -63,7 +63,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p><strong>Примечание</strong>: Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за направление отображения строковых элементов (таких как предложение).</p> </div> -<p>Когда вы используете CSS для создания разметки, вы двигаете элементы относительно их обычного расположения, но для многих элементов на вашей странице их обычное положение - это именно то, что вам подойдет. Именно поэтому важно начинать верстку с создания правильно организованного HTML документа, для того, чтобы базовое расположение элементов впоследствии работало на вас.</p> +<p>Когда вы используете CSS для создания разметки, вы двигаете элементы относительно их обычного расположения, но для многих элементов на вашей странице их обычное положение - это именно то, что вам подойдёт. Именно поэтому важно начинать вёрстку с создания правильно организованного HTML документа, для того, чтобы базовое расположение элементов впоследствии работало на вас.</p> <p>Методы CSS, которыми вы можете управлять разметкой элементов:</p> @@ -77,7 +77,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <h2 id="Свойство_display">Свойство display </h2> -<p>Значения свойства <code>display</code> являются главными методами верстки разметки страницы в CSS. Это свойство позволяет нам менять то, как что-то отображается по умолчанию. Каждый элемент по умолчанию имеет свойство <code>display</code>, влияющее на то, как этот элемент отображается. Например, параграфы на английском располагаются один под другим только потому что они имеют по умолчанию свойство <code>display: block</code>. Если же вы создадите ссылку внутри параграфа, эта ссылка будет отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у элемента {{htmlelement("a")}} по умолчанию установлено свойство <code>display: inline</code>.</p> +<p>Значения свойства <code>display</code> являются главными методами вёрстки разметки страницы в CSS. Это свойство позволяет нам менять то, как что-то отображается по умолчанию. Каждый элемент по умолчанию имеет свойство <code>display</code>, влияющее на то, как этот элемент отображается. Например, параграфы на английском располагаются один под другим только потому что они имеют по умолчанию свойство <code>display: block</code>. Если же вы создадите ссылку внутри параграфа, эта ссылка будет отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у элемента {{htmlelement("a")}} по умолчанию установлено свойство <code>display: inline</code>.</p> <p>Вы можете изменить дефолтное поведение display. К примеру, {{htmlelement("li")}} отображается как <code>display: block</code> по умолчанию, это означает что элементы списка отображаются один за другим в нашем документе.Если мы изменим значение display на <code>inline</code> они будут отображаться друг за другом, как это делают слова в предложении. Тот факт, что вы можете изменить значение display для любого элемента означает, что вы можете выбирать HTML элементы по их семантическому значению, не беспокоясь о том как они будут выглядеть. То как они выглядят это то, что вы можете поменять.</p> @@ -85,7 +85,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <h2 id="Flexbox">Flexbox</h2> -<p>Flexbox (сокращение от <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a>) это модуль, разработанный для облегчения верстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство <code>display: flex</code> для родительского элемента тех элементов, к которым хотите применить этот тип верстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.</p> +<p>Flexbox (сокращение от <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a>) это модуль, разработанный для облегчения вёрстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство <code>display: flex</code> для родительского элемента тех элементов, к которым хотите применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.</p> <p>Разметка HTML, представленная ниже, состоит из элемента <code>wrapper</code>, включающего в себя три {{htmlelement("div")}} элемента. По умолчанию все они будут изображаться как блочные, один под другим.</p> @@ -165,7 +165,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>В то время как flexbox предназначен для одномерной разметки, Grid Layout предназначен для двумерной — выстраивая предметы в ряды и столбцы.</p> -<p>Еще раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — <code>display: grid</code>. Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства {{cssxref("grid-template-rows")}} и {{cssxref("grid-template-columns")}} соответственно. Мы определили три столбца каждый по <code>1fr</code> и два ряда по <code>100px</code>. Мне не надо вводить какие-либо правила для дочерних элементов; <span class="tlid-translation translation" lang="ru"><span title="">они автоматически помещаются в ячейки, созданные нашей сеткой.</span></span></p> +<p>Ещё раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — <code>display: grid</code>. Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства {{cssxref("grid-template-rows")}} и {{cssxref("grid-template-columns")}} соответственно. Мы определили три столбца каждый по <code>1fr</code> и два ряда по <code>100px</code>. Мне не надо вводить какие-либо правила для дочерних элементов; <span class="tlid-translation translation" lang="ru"><span title="">они автоматически помещаются в ячейки, созданные нашей сеткой.</span></span></p> <div id="Grid_1"> <div class="hidden"> @@ -255,7 +255,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p><strong>Примечание</strong>: Эти два примера всего лишь малая часть мощности Grid layout; чтобы узнать больше см. нашу статью <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a>.</p> </div> -<p>Остальная часть этого руководства освещает другие методы разметок, которые менее важны для основной структуры разметки вашей страницы, но все равно могут помочь вам в достижении определенных задач. Понимая природу задачи каждой разметки, вы вскоре обнаружите, что, глядя на конкретный компонент вашего дизайна, часто будет ясно какой тип разметки подходит лучше всего.</p> +<p>Остальная часть этого руководства освещает другие методы разметок, которые менее важны для основной структуры разметки вашей страницы, но все равно могут помочь вам в достижении определённых задач. Понимая природу задачи каждой разметки, вы вскоре обнаружите, что, глядя на конкретный компонент вашего дизайна, часто будет ясно какой тип разметки подходит лучше всего.</p> <h2 id="Floats">Floats</h2> @@ -266,11 +266,11 @@ translation_of: Learn/CSS/CSS_layout/Introduction <ul> <li><code>left</code> — Элемент выравнивается слева и другие элементы обтекают его справа.</li> <li><code>right</code> — Элемент выравнивается справа и другие элементы обтекают его слева.</li> - <li><code>none</code> — Не задает float совсем. Это значение по умолчанию.</li> + <li><code>none</code> — Не задаёт float совсем. Это значение по умолчанию.</li> <li><code>inherit</code> — Определяет, что значение свойства <code>float</code> должно быть унаследовано от родительского элемента.</li> </ul> -<p>В примере ниже мы задаем элементу <code><div></code> float - left и даем {{cssxref("margin")}} с правой стороны чтобы отталкивать текст от этого элемента. Это дает нам эффект того, что текст оборачивает этот блок <span class="tlid-translation translation" lang="ru"><span title="">и является большей частью того, что вам нужно знать о float, используемых в современном веб-дизайне.</span></span></p> +<p>В примере ниже мы задаём элементу <code><div></code> float - left и даём {{cssxref("margin")}} с правой стороны чтобы отталкивать текст от этого элемента. Это даёт нам эффект того, что текст оборачивает этот блок <span class="tlid-translation translation" lang="ru"><span title="">и является большей частью того, что вам нужно знать о float, используемых в современном веб-дизайне.</span></span></p> <div id="Float_1"> <div class="hidden"> @@ -317,12 +317,12 @@ p { <p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> <div class="note"> -<p><strong>Примечание</strong>: Float полностью объяснен в нашем уроке по свойствам <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float и clear</a>. До таких методов как Flexbox и Grid Layout, float использовался как метод создания макетов колонок. Вы все еще можете встретить эти методы в интернете; мы рассмотрим их в уроке по <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревшим методам разметки</a>.</p> +<p><strong>Примечание</strong>: Float полностью объяснён в нашем уроке по свойствам <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float и clear</a>. До таких методов как Flexbox и Grid Layout, float использовался как метод создания макетов колонок. Вы все ещё можете встретить эти методы в интернете; мы рассмотрим их в уроке по <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревшим методам разметки</a>.</p> </div> <h2 id="Методы_позиционирования">Методы позиционирования</h2> -<p>Позиционирование позволяет вам перемещать элементы с места, где бы они располагались при нормальном потоке в другую локацию. Позиционирование не является методом создания основной разметки страницы, <span class="tlid-translation translation" lang="ru"><span title="">это больше об управлении и точной настройке положения определенных элементов на странице.</span></span></p> +<p>Позиционирование позволяет вам перемещать элементы с места, где бы они располагались при нормальном потоке в другую локацию. Позиционирование не является методом создания основной разметки страницы, <span class="tlid-translation translation" lang="ru"><span title="">это больше об управлении и точной настройке положения определённых элементов на странице.</span></span></p> <p>Однако, существуют полезные методы точной разметки шаблонов, которые полагаются на свойство {{cssxref("position")}}. Понимание позиционирования также способствует пониманию нормального потока <span class="tlid-translation translation" lang="ru"><span title=""> и того, что значит вывести элемент из нормального потока.</span></span></p> @@ -331,14 +331,14 @@ p { <ul> <li><strong>Static positioning (статическое позиционирование)</strong> — умолчание, которое получают все элементы — это все лишь значит "поместить элемент в его нормальную позицию в разметке документа — тут нет ничего особенного на что посмотреть".</li> <li><strong>Relative positioning (относительное позиционирование) </strong>позволяет вам менять положение элемента на странице, перемещая его относительно его положения в нормальном потоке — в том числе заставляя его перекрывать другие элементы на странице.</li> - <li><strong>Absolute positioning (абсолютное позиционирование) </strong>полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своем собственном отдельном слое. Оттуда вы можете исправлять его положение относительно краев <code><html></code> элемента страницы (или его ближайшего позиционированного элемента предка). Это является полезным при создании сложных эффектов разметки такие как вкладки, <span class="tlid-translation translation" lang="ru"><span title=""> в которых различные панели содержимого располагаются друг над другом</span></span> и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.</li> - <li><strong>Fixed positioning (фиксированное позиционирование) </strong>очень похоже на абсолютное за исключением того, что он изменяет положение относительно окна просмотра браузера, а не другого элемента. Это полезно при создании эффектов таких как постоянное меню навигации, которое всегда остается в одном и том же месте на экране, в то время как другой контент прокручивается.</li> - <li><strong>Sticky positioning (липкое позиционирование) </strong>это новый метод позиционирования, который заставляет элемент вести себя как <code>position: static</code> пока не достигнет определенной линии окна просмотра и с этого момента будет вести себя как <code>position: fixed</code>.</li> + <li><strong>Absolute positioning (абсолютное позиционирование) </strong>полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своём собственном отдельном слое. Оттуда вы можете исправлять его положение относительно краёв <code><html></code> элемента страницы (или его ближайшего позиционированного элемента предка). Это является полезным при создании сложных эффектов разметки такие как вкладки, <span class="tlid-translation translation" lang="ru"><span title=""> в которых различные панели содержимого располагаются друг над другом</span></span> и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.</li> + <li><strong>Fixed positioning (фиксированное позиционирование) </strong>очень похоже на абсолютное за исключением того, что он изменяет положение относительно окна просмотра браузера, а не другого элемента. Это полезно при создании эффектов таких как постоянное меню навигации, которое всегда остаётся в одном и том же месте на экране, в то время как другой контент прокручивается.</li> + <li><strong>Sticky positioning (липкое позиционирование) </strong>это новый метод позиционирования, который заставляет элемент вести себя как <code>position: static</code> пока не достигнет определённой линии окна просмотра и с этого момента будет вести себя как <code>position: fixed</code>.</li> </ul> <h3 id="Пример_простого_позиционирования">Пример простого позиционирования</h3> -<p>Для ознакомления с этими методами верстки, мы покажем вам пару быстрых примеров. Наши примеры будут иметь одинаковый HTML, который выглядит следующим образом:</p> +<p>Для ознакомления с этими методами вёрстки, мы покажем вам пару быстрых примеров. Наши примеры будут иметь одинаковый HTML, который выглядит следующим образом:</p> <pre class="brush: html notranslate"><h1>Positioning</h1> @@ -376,7 +376,7 @@ p { left: 30px; }</pre> -<p>Здесь мы даем нашему среднему параграфу {{cssxref("position")}} со значением <code>relative</code> — сам по себе он ничего не делает, поэтому мы также добавляем свойства {{cssxref("top")}} и {{cssxref("left")}}. Они служат для перемещения задействованного элемента вниз и вправо — что может выглядеть как противоположность тому, чего вы ожидаете, но вам надо думать об этом так будто элемент отталкивается от левого или верхнего края, и в результате он перемещается вправо и вниз.</p> +<p>Здесь мы даём нашему среднему параграфу {{cssxref("position")}} со значением <code>relative</code> — сам по себе он ничего не делает, поэтому мы также добавляем свойства {{cssxref("top")}} и {{cssxref("left")}}. Они служат для перемещения задействованного элемента вниз и вправо — что может выглядеть как противоположность тому, чего вы ожидаете, но вам надо думать об этом так будто элемент отталкивается от левого или верхнего края, и в результате он перемещается вправо и вниз.</p> <p>Добавление этого кода даст следующий результат:</p> @@ -418,7 +418,7 @@ p { <h3 id="Absolute_positioning">Absolute positioning</h3> -<p>Абсолютное (Absolute) позиционирование используется чтобы полностью удалить элемент из нормального потока и разместить его, используя смещение от краев содержащего блока.</p> +<p>Абсолютное (Absolute) позиционирование используется чтобы полностью удалить элемент из нормального потока и разместить его, используя смещение от краёв содержащего блока.</p> <p>Возвращаясь к нашему примеру без позиционирования, мы можем добавить следующее CSS правило, чтобы реализовать абсолютное позиционирование:</p> @@ -428,7 +428,7 @@ p { left: 30px; }</pre> -<p>Здесь мы даем нашему среднему параграфу {{cssxref("position")}} со значением <code>absolute</code>, и все те же свойства {{cssxref("top")}} и {{cssxref("left")}} как ранее. Однако, добавление этого кода даст следующий результат:</p> +<p>Здесь мы даём нашему среднему параграфу {{cssxref("position")}} со значением <code>absolute</code>, и все те же свойства {{cssxref("top")}} и {{cssxref("left")}} как ранее. Однако, добавление этого кода даст следующий результат:</p> <div id="Absolute_1"> <div class="hidden"> @@ -470,7 +470,7 @@ p { <h3 id="Fixed_positioning">Fixed positioning</h3> -<p>Фиксированное (Fixed) позиционирование удаляет наш элемент из потока документа так же, как и абсолютное позиционирование. Однако, вместо смещения применяемого относительно контейнера, оно применяется относительно окна просмотра. Поскольку элемент остается зафиксированным относительно окна просмотра, мы можем создавать такие эффекты как меню, которое остается зафиксированным пока страница прокручивается под ним.</p> +<p>Фиксированное (Fixed) позиционирование удаляет наш элемент из потока документа так же, как и абсолютное позиционирование. Однако, вместо смещения применяемого относительно контейнера, оно применяется относительно окна просмотра. Поскольку элемент остаётся зафиксированным относительно окна просмотра, мы можем создавать такие эффекты как меню, которое остаётся зафиксированным пока страница прокручивается под ним.</p> <p>Для этого примера наш HTML это три параграфа текста для того, чтобы мы могли прокручивать страницу и блок, которому мы дадим <code>position: fixed</code>.</p> @@ -524,7 +524,7 @@ p { <h3 id="Sticky_positioning">Sticky positioning</h3> -<p>Липкое (Sticky) позиционирование — это последний тип позиционирования которой мы имеем в нашем распоряжении. Это микс дефолтного статического позиционирования с фиксированным позиционированием. когда элемент имеет <code>position: sticky</code> он будет прокручиваться в нормальном потоке пока не достигнет границы окна просмотра которую мы задали. С этого момента он (элемент) "прилипает", как если бы был применен <code>position: fixed</code>.</p> +<p>Липкое (Sticky) позиционирование — это последний тип позиционирования которой мы имеем в нашем распоряжении. Это микс дефолтного статического позиционирования с фиксированным позиционированием. когда элемент имеет <code>position: sticky</code> он будет прокручиваться в нормальном потоке пока не достигнет границы окна просмотра которую мы задали. С этого момента он (элемент) "прилипает", как если бы был применён <code>position: fixed</code>.</p> <div id="Sticky_1"> <div class="hidden"> @@ -569,13 +569,13 @@ p { <h2 id="Макет_таблицы">Макет таблицы</h2> -<p>HTML таблицы хороши для отображения табличных данных, но много лет назад — до того, как даже <span class="tlid-translation translation" lang="ru"><span title="">базовый CSS</span></span> <span class="tlid-translation translation" lang="ru"><span title="">надежно</span></span> поддерживался <span class="tlid-translation translation" lang="ru"><span title="">в браузерах </span></span>— веб-разработчики также использовали таблицы для разметки всей веб-страницы — размещая свои заголовки, нижние колонтитулы, различные колонки и т.д. в разных строках и столбцах таблиц. Это работало в то время, но оно имеет много проблем — разметка таблиц не гибкая, очень тяжелая в верстке, сложна в отладке, и семантически не верная. (например, пользователи скринридеров имеют проблемы с навигацией в табличном макете).</p> +<p>HTML таблицы хороши для отображения табличных данных, но много лет назад — до того, как даже <span class="tlid-translation translation" lang="ru"><span title="">базовый CSS</span></span> <span class="tlid-translation translation" lang="ru"><span title="">надёжно</span></span> поддерживался <span class="tlid-translation translation" lang="ru"><span title="">в браузерах </span></span>— веб-разработчики также использовали таблицы для разметки всей веб-страницы — размещая свои заголовки, нижние колонтитулы, различные колонки и т.д. в разных строках и столбцах таблиц. Это работало в то время, но оно имеет много проблем — разметка таблиц не гибкая, очень тяжёлая в вёрстке, сложна в отладке, и семантически не верная. (например, пользователи скринридеров имеют проблемы с навигацией в табличном макете).</p> <p><span class="tlid-translation translation" lang="ru"><span title="">То, как таблица выглядит на веб-странице при использовании разметки таблицы, обусловлено набором свойств CSS, которые определяют макет таблицы</span></span>. <span class="tlid-translation translation" lang="ru"><span title="">Эти свойства могут использоваться для размещения элементов, которые не являются таблицами, использование, которое иногда описывается как «использование CSS таблиц».</span></span></p> -<p>Пример ниже показывает одно такое использование; использование CSS таблиц для верстки должно считаться устаревшим методом на данный момент, для тех ситуаций, когда у вас старые браузеры без поддержки Flexbox или Grid.</p> +<p>Пример ниже показывает одно такое использование; использование CSS таблиц для вёрстки должно считаться устаревшим методом на данный момент, для тех ситуаций, когда у вас старые браузеры без поддержки Flexbox или Grid.</p> -<p>Давайте взглянем на пример. Во-первых, немного простой разметки, которая создает HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обернута в {{htmlelement("div")}}, для целей верстки.</p> +<p>Давайте взглянем на пример. Во-первых, немного простой разметки, которая создаёт HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обёрнута в {{htmlelement("div")}}, для целей верстки.</p> <pre class="brush: html notranslate"><form> <p>First of all, tell us your name and age.</p> @@ -633,7 +633,7 @@ form p { font-style: italic; }</pre> -<p>Это дает нам следующий результат:</p> +<p>Это даёт нам следующий результат:</p> <p>{{ EmbedLiveSample('Макет_таблицы', '100%', '170') }}</p> @@ -641,7 +641,7 @@ form p { <h2 id="Многоколоночный_макет">Многоколоночный макет</h2> -<p>Модуль многоколоночного макета (multi-column layout) дает нам способ располагать контент в столбцах, подобно тому, как текст располагается в газете. Хоть и чтение <span class="tlid-translation translation" lang="ru"><span title="">столбцов вверх и вниз менее полезно в контексте веба, так как вы не хотите заставлять пользователей прокручивать вверх и вниз, размещение контента по столбцам может быть полезной техникой.</span></span></p> +<p>Модуль многоколоночного макета (multi-column layout) даёт нам способ располагать контент в столбцах, подобно тому, как текст располагается в газете. Хоть и чтение <span class="tlid-translation translation" lang="ru"><span title="">столбцов вверх и вниз менее полезно в контексте веба, так как вы не хотите заставлять пользователей прокручивать вверх и вниз, размещение контента по столбцам может быть полезной техникой.</span></span></p> <p>Чтобы превратить блок в многоколоночный контейнер мы используем свойство {{cssxref("column-count")}}, которое говорит браузеру сколько колонок мы хотим иметь, либо свойство {{cssxref("column-width")}}, которое говорит браузеру заполнить контейнер <span class="tlid-translation translation" lang="ru"><span title="">как можно большим количеством столбцов, по крайней мере, такой ширины.</span></span></p> @@ -692,14 +692,14 @@ form p { <h2 id="В_этом_модуле">В этом модуле</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS верстку</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS вёрстку</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Многоколоночный макет</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы верстки</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы вёрстки</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li> <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Оценка понимания базовых макетов</a></li> </ul> 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 index f61c802400..a501bff3b1 100644 --- a/files/ru/learn/css/css_layout/multiple-column_layout/index.html +++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.html @@ -8,7 +8,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">Спецификация макет с несколькими столбцами дает вам метод верстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.</p> +<p class="summary">Спецификация макет с несколькими столбцами даёт вам метод вёрстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.</p> <table class="learn-box standard-table"> <tbody> @@ -31,7 +31,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <p>Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый <em>multicol. </em>Вы можете следовать за нами <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">скачав файл отправной точки multicol</a> и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.</p> -<p>Наша отправная точка содержит немного очень простого HTML; обертка с классом <code>container</code> внутри которого имеется заголовок и несколько параграфов.</p> +<p>Наша отправная точка содержит немного очень простого HTML; обёртка с классом <code>container</code> внутри которого имеется заголовок и несколько параграфов.</p> <p>{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству <code>column-count</code> столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:</p> @@ -40,7 +40,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто } </pre> -<p>Колонки, которые вы создаете имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.</p> +<p>Колонки, которые вы создаёте имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.</p> <div id="Multicol_1"> <div class="hidden"> @@ -240,7 +240,7 @@ h2 { <h2 id="Столбцы_и_фрагментация">Столбцы и фрагментация</h2> -<p>Содержимое макета нескольких столбцов является фрагментированным. <span class="tlid-translation translation" lang="ru"><span title="">По сути, он ведет себя так же, как контент в постраничных медиа </span></span>— так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.</p> +<p>Содержимое макета нескольких столбцов является фрагментированным. <span class="tlid-translation translation" lang="ru"><span title="">По сути, он ведёт себя так же, как контент в постраничных медиа </span></span>— так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.</p> <p>Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. <span class="tlid-translation translation" lang="ru"><span title="">Заголовок отделяется от текста, если столбцы разделяются между ними.</span></span></p> @@ -330,7 +330,7 @@ h2 { <p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p> -<p>Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Фрагментации</a>. Эта спецификация дает нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство {{cssxref("break-inside")}} со значением <code>avoid</code> к правилам <code>.card</code>. Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.</p> +<p>Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Фрагментации</a>. Эта спецификация даёт нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство {{cssxref("break-inside")}} со значением <code>avoid</code> к правилам <code>.card</code>. Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.</p> <p>В настоящее время также стоит добавлять старое свойство <code>page-break-inside: avoid</code> для лучшей поддержки старых браузеров.</p> @@ -440,7 +440,7 @@ h2 { <h2 id="Заключение">Заключение</h2> -<p>Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, еще один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.</p> +<p>Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, ещё один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.</p> <h2 id="См._также">См. также</h2> diff --git a/files/ru/learn/css/css_layout/normal_flow/index.html b/files/ru/learn/css/css_layout/normal_flow/index.html index e7091f2508..329bf37f99 100644 --- a/files/ru/learn/css/css_layout/normal_flow/index.html +++ b/files/ru/learn/css/css_layout/normal_flow/index.html @@ -21,12 +21,12 @@ original_slug: Learn/CSS/CSS_layout/Нормальный_поток </tr> <tr> <th scope="row">Цель:</th> - <td>Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнем вносить какие-либо изменения.</td> + <td>Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнём вносить какие-либо изменения.</td> </tr> </tbody> </table> -<p>Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путем изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.</p> +<p>Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путём изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.</p> <p>Прежде чем углубиться в разные способы компоновки, стоит пересмотреть некоторые из вещей, которые вы изучили в предыдущих модулях в отношении нормального потока документов. </p> @@ -36,11 +36,11 @@ original_slug: Learn/CSS/CSS_layout/Нормальный_поток <p>По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Встроенные элементы высоки и широки, как их содержимое. Вы не можете установить ширину или высоту на встроенные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если вы хотите контролировать размер встроенного элемента вам нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи <code>display: block;</code> (или даже, <code>display: inline-block;</code>, который смешивает характеристики обоих.).</p> -<p>Это объясняет отдельные элементы, но как насчет того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.</p> +<p>Это объясняет отдельные элементы, но как насчёт того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.</p> -<p>Встроенные элементы ведут себя по-другому — они не появляются на новых строках; они располагаются на той же строке, что и другие и любой смежной или завернутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).</p> +<p>Встроенные элементы ведут себя по-другому — они не появляются на новых строках; они располагаются на той же строке, что и другие и любой смежной или завёрнутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).</p> -<p>Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остается, а меньшее исчезает — это называется схлопывание полей (margin collapsing), и мы рассматривали это ранее.</p> +<p>Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остаётся, а меньшее исчезает — это называется схлопывание полей (margin collapsing), и мы рассматривали это ранее.</p> <p>Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:</p> diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.html index 59669413f4..da8a00b79d 100644 --- a/files/ru/learn/css/css_layout/positioning/index.html +++ b/files/ru/learn/css/css_layout/positioning/index.html @@ -47,7 +47,7 @@ translation_of: Learn/CSS/CSS_layout/Positioning background: yellow; }</pre> -<p>И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновленного цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!</p> +<p>И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!</p> <div class="note"> <p><strong>Примечание</strong>: Вы можете посмотреть живой пример на данном этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">см. исходный код</a>).</p> @@ -55,7 +55,7 @@ translation_of: Learn/CSS/CSS_layout/Positioning <h3 id="Относительное_позиционирование">Относительное позиционирование</h3> -<p>Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего свое место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление <code>position</code> в вашем коде:</p> +<p>Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего своё место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление <code>position</code> в вашем коде:</p> <pre class="brush: css notranslate">position: relative;</pre> @@ -120,7 +120,7 @@ span { <h3 id="Абсолютное_позиционирование">Абсолютное позиционирование</h3> -<p>Абсолютное позиционирование дает совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:</p> +<p>Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:</p> <pre class="brush: css notranslate">position: absolute;</pre> @@ -164,16 +164,16 @@ span { <p>{{ EmbedLiveSample('Абсолютное_позиционирование', '100%', 420) }}</p> -<p>В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своем собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; <span class="tlid-translation translation" lang="ru"><span title="">опрокидывающиеся панели; ф</span></span><span class="tlid-translation translation" lang="ru"><span title="">ункции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы;</span> <span title="">и так далее...</span></span></p> +<p>В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; <span class="tlid-translation translation" lang="ru"><span title="">опрокидывающиеся панели; ф</span></span><span class="tlid-translation translation" lang="ru"><span title="">ункции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы;</span> <span title="">и так далее...</span></span></p> <p>Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} ведут себя по-другому с абсолютным позиционированием. <span class="tlid-translation translation" lang="ru"><span title="">Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха "содержащего элемента" и 30px от левого края (В этом случае "содержащий элемент" является </span></span><strong><span class="tlid-translation translation" lang="ru"><span title="">исходным содержащим блоком</span></span></strong>. См. раздел ниже для дополнительной информации<span class="tlid-translation translation" lang="ru"><span title="">).</span></span></p> <div class="note"> -<p><strong>Примечание</strong>: Вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить <code>top: 0; bottom: 0; left: 0; right: 0;</code> и <code>margin: 0;</code> для вашего позиционируемого элемента и посмотрите, что произойдет! <span class="tlid-translation translation" lang="ru"><span title="">Потом снова все верните...</span></span></p> +<p><strong>Примечание</strong>: Вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить <code>top: 0; bottom: 0; left: 0; right: 0;</code> и <code>margin: 0;</code> для вашего позиционируемого элемента и посмотрите, что произойдёт! <span class="tlid-translation translation" lang="ru"><span title="">Потом снова все верните...</span></span></p> </div> <div class="note"> -<p><strong>Примечание</strong>: Да, margin-ы все еще влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.</p> +<p><strong>Примечание</strong>: Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.</p> </div> <div class="note"> @@ -186,7 +186,7 @@ span { <p>Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в <strong><span class="tlid-translation translation" lang="ru"><span title="">исходным </span></span>содержащем блоке</strong>. <span class="tlid-translation translation" lang="ru"><span title="">Исходный </span></span>содержащий блок <span class="tlid-translation translation" lang="ru"><span title="">имеет размеры области просмотра</span></span>, а также является блоком, содержащим элемент {{htmlelement("html")}}. <span class="tlid-translation translation" lang="ru"><span title="">Проще говоря</span></span>, абсолютно позиционируемый элемент будет отображаться за пределами элемента {{htmlelement("html")}} и будет расположен относительно исходного окна просмотра.</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на </span></span>30px от верхнего и левого края страницы. Мы можем изменить <strong>контекст </strong> <strong>позиционирования </strong>— относительно какого элемента позиционируется позиционируемый элемент. <span class="tlid-translation translation" lang="ru"><span title="">Это делается путем установки позиционирования на одном из предков элемента </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен).</span> <span title="">Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего </span></span><code>body</code><span class="tlid-translation translation" lang="ru"><span title="">:</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на </span></span>30px от верхнего и левого края страницы. Мы можем изменить <strong>контекст </strong> <strong>позиционирования </strong>— относительно какого элемента позиционируется позиционируемый элемент. <span class="tlid-translation translation" lang="ru"><span title="">Это делается путём установки позиционирования на одном из предков элемента </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен).</span> <span title="">Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего </span></span><code>body</code><span class="tlid-translation translation" lang="ru"><span title="">:</span></span></p> <pre class="brush: css notranslate">position: relative;</pre> @@ -239,7 +239,7 @@ span { <h3 id="Введение_в_z-index">Введение в z-index</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Все это абсолютное позиционирование </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">хорошее развлечение</span></span>, но кое-что чего мы еще не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы "побеждают" не позиционированные элементы. Что же насчет того, когда мы имеем более одного?</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Все это абсолютное позиционирование </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">хорошее развлечение</span></span>, но кое-что чего мы ещё не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы "побеждают" не позиционированные элементы. Что же насчёт того, когда мы имеем более одного?</p> <p>Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:</p> @@ -250,11 +250,11 @@ span { right: 30px; }</pre> -<p>На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещен чуточку выше того места, где он был исходно. А <span class="tlid-translation translation" lang="ru"><span title="">также он расположен под оригинальным параграфом </span></span><code>.positioned</code>, где они оба перекрываются. Это потому что параграф <code>.positioned</code> является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.</p> +<p>На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещён чуточку выше того места, где он был исходно. А <span class="tlid-translation translation" lang="ru"><span title="">также он расположен под оригинальным параграфом </span></span><code>.positioned</code>, где они оба перекрываются. Это потому что параграф <code>.positioned</code> является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.</p> <p><span class="tlid-translation translation" lang="ru"><span title="">Можете ли вы изменить порядок наложения?</span></span> Да, можете, используя свойство {{cssxref("z-index")}}. "z-index" это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для <span class="tlid-translation translation" lang="ru"><span title="">определения позиции для таких вещей, как фоновые изображения</span></span> и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (<span class="tlid-translation translation" lang="ru"><span title="">во всяком случае,</span></span> для языков, направленных слева на право).</p> -<p>У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (<span class="tlid-translation translation" lang="ru"><span title="">или что еще вам нравится иметь перед экраном). </span></span>Значения {{cssxref("z-index")}} влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют <code>z-index</code> <code>auto</code>, что фактически равно 0.</p> +<p>У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (<span class="tlid-translation translation" lang="ru"><span title="">или что ещё вам нравится иметь перед экраном). </span></span>Значения {{cssxref("z-index")}} влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют <code>z-index</code> <code>auto</code>, что фактически равно 0.</p> <p>Для того чтобы изменить порядок наложения, попробуйте объявить для вашего <code>p:nth-of-type(1)</code> правила:</p> @@ -341,7 +341,7 @@ p:nth-of-type(1) { padding: 10px; }</pre> -<p><code>top: 0;</code> необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даем ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.</p> +<p><code>top: 0;</code> необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.</p> <p>Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, <span class="tlid-translation translation" lang="ru"><span title="">при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним.</span></span> Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:</p> @@ -401,7 +401,7 @@ p:nth-of-type(1) { <h3 id="position_sticky">position: sticky</h3> -<p>Доступно другое значение позиции называемое <code>position: sticky</code>, которое несколько новее чем другие. <span class="tlid-translation translation" lang="ru"><span title="">По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определенной пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определенной точки, а затем задерживать в верхней части страницы.</span></span></p> +<p>Доступно другое значение позиции называемое <code>position: sticky</code>, которое несколько новее чем другие. <span class="tlid-translation translation" lang="ru"><span title="">По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.</span></span></p> <div id="Sticky_1"> <div class="hidden"> diff --git a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html index 2f5c145b3c..0e526bfc31 100644 --- a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html +++ b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html @@ -7,7 +7,7 @@ translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">Основы позиционирования, приведенные в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием.</p> +<p class="summary">Основы позиционирования, приведённые в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием.</p> <table class="learn-box standard-table"> <tbody> @@ -24,7 +24,7 @@ translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples <h2 id="Информационный_блок_с_вкладками">Информационный блок с вкладками</h2> -<p>Первый пример, который мы рассмотрим, - это классический информационный блок с вкладками - очень распространенная функция, используемая, когда вы хотите упаковать много информации в небольшую область. Сюда входят информационные приложения, такие как стратегии / военные игры, мобильные версии веб-сайтов, где экран и пространство ограничены и необходимы компактные информационные окна, где вы можете сделать много информации, не заполняя весь пользовательский интерфейс. Наш простой пример будет выглядеть так, как только мы закончим:</p> +<p>Первый пример, который мы рассмотрим, - это классический информационный блок с вкладками - очень распространённая функция, используемая, когда вы хотите упаковать много информации в небольшую область. Сюда входят информационные приложения, такие как стратегии / военные игры, мобильные версии веб-сайтов, где экран и пространство ограничены и необходимы компактные информационные окна, где вы можете сделать много информации, не заполняя весь пользовательский интерфейс. Наш простой пример будет выглядеть так, как только мы закончим:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> @@ -35,7 +35,7 @@ translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples <p>Возможно, вы думаете: «Почему бы просто не создавать отдельные вкладки в виде отдельных веб-страниц и просто иметь вкладки, переходящие на отдельные страницы, чтобы создать эффект?» Этот код был бы проще, да, но тогда каждый отдельный «просмотр страницы» на самом деле был бы вновь загруженной веб-страницей, что затрудняло бы сохранение информации между представлениями и интеграцию этой функции в более крупный дизайн пользовательского интерфейса. Кроме того, так называемые «одностраничные приложения» становятся очень популярными - особенно для мобильных веб-интерфейсов - потому что все, что обслуживается как один файл, сокращает количество HTTP-запросов, необходимых для просмотра всего содержимого, тем самым повышая производительность.</p> <div class="note"> -<p><strong>Примечание:</strong> Некоторые веб-разработчики занимаются еще более быстрыми темпами, имея только одну страницу информации, загружаемую сразу и динамическое изменение информации, отображаемой с помощью функции JavaScript, такой как <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. На этом этапе вашего обучения мы хотим сохранить все как можно проще. Впоследствии есть JavaScript, но только немного.</p> +<p><strong>Примечание:</strong> Некоторые веб-разработчики занимаются ещё более быстрыми темпами, имея только одну страницу информации, загружаемую сразу и динамическое изменение информации, отображаемой с помощью функции JavaScript, такой как <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. На этом этапе вашего обучения мы хотим сохранить все как можно проще. Впоследствии есть JavaScript, но только немного.</p> </div> <p>Для начала мы хотели бы, чтобы вы создали локальную копию исходного HTML-файла — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Сохраните это где вам удобно на локальном компьютере и откройте его в текстовом редакторе. Давайте посмотрим на HTML, содержащийся в теле:</p> @@ -101,7 +101,7 @@ body { margin: 0 auto; }</pre> -<p>Это задает конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого <code>margin: 0 auto </code>трюка. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.</p> +<p>Это задаёт конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого <code>margin: 0 auto </code>трюка. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.</p> <h3 id="Укладка_наших_вкладок">Укладка наших вкладок</h3> diff --git a/files/ru/learn/css/css_layout/responsive_design/index.html b/files/ru/learn/css/css_layout/responsive_design/index.html index 76ee65f70c..6178dfa90b 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.html +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -6,7 +6,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн --- <div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div> -<p><span class="tlid-translation translation" lang="ru"><span title="">На заре веб-дизайна страницы создавались для экрана определенного размера.</span></span> Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до<span class="tlid-translation translation" lang="ru"><span title=""> слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция <em>отзывчивого (адаптивного) веб-дизайна</em> </span></span><em>(responsive web design</em> (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">На заре веб-дизайна страницы создавались для экрана определённого размера.</span></span> Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до<span class="tlid-translation translation" lang="ru"><span title=""> слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция <em>отзывчивого (адаптивного) веб-дизайна</em> </span></span><em>(responsive web design</em> (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.</p> <table class="learn-box standard-table"> <tbody> @@ -70,7 +70,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Отзывчивый_дизайн">Отзывчивый дизайн</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Термин адаптивный дизайн был </span></span><a href="https://alistapart.com/article/responsive-web-design/">Придуман Итаном Маркоттом в 2010 году</a><span class="tlid-translation translation" lang="ru"><span title=""> и описывал использование трех методов в сочетании.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Термин адаптивный дизайн был </span></span><a href="https://alistapart.com/article/responsive-web-design/">Придуман Итаном Маркоттом в 2010 году</a><span class="tlid-translation translation" lang="ru"><span title=""> и описывал использование трёх методов в сочетании.</span></span></p> <ol> <li>Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (опубликовано в 2009 в A List Apart).</li> @@ -84,7 +84,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Media_Queries_Медиавыражения">Media Queries (Медиавыражения)</h2> -<p>Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, <span class="tlid-translation translation" lang="ru"><span title="">что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определенная ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.</span></span></p> +<p>Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, <span class="tlid-translation translation" lang="ru"><span title="">что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.</span></span></p> <p>Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору <code>.container</code> только если эти две вещи истины.</p> @@ -103,11 +103,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Гибкие_сетки">Гибкие сетки</h2> -<p>Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развернутым до максимума окном.</p> +<p>Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развёрнутым до максимума окном.</p> <p>Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.</p> -<p>В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>. Гибкий обтекаемый макет достигался путем присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. <span class="tlid-translation translation" lang="ru"><span title="">В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.</span></span></p> +<p>В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. <span class="tlid-translation translation" lang="ru"><span title="">В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.</span></span></p> <pre class="notranslate"><code>target / context = result </code> </pre> @@ -119,7 +119,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн } </code> </pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревших методов макетов</a>. В вашей работе вероятно, что вы столкнетесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревших методов макетов</a>. В вашей работе вероятно, что вы столкнётесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.</p> <p>Следующий пример демонстрирует простой отзывчивый дизайн используя Media Query и гибкие сетки. На узких экранах макет отображает блоки, сложенные друг на друга:</p> @@ -139,11 +139,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Современные_технологии_макетов">Современные технологии макетов</h2> -<p>Современные методы макетов такие как <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, и <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более легкий способ сделать так.</p> +<p>Современные методы макетов такие как <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, и <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более лёгкий способ сделать так.</p> <h3 id="Multicol">Multicol</h3> -<p>Самый старый из этих методов — это multicol, когда вы задаете <code>column-count</code>, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.</p> +<p>Самый старый из этих методов — это multicol, когда вы задаёте <code>column-count</code>, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.</p> <pre class="brush: css notranslate"><code>.container { column-count: 3; @@ -173,12 +173,12 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн </pre> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчета размера столбцов: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">исходный код</a>.</p> +<p><strong>Примечание</strong>: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчёта размера столбцов: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">исходный код</a>.</p> </div> <h3 id="CSS_grid">CSS grid</h3> -<p>В макете CSS Grid единицы измерения <code>fr</code> позволяют распределять доступное пространство между дорожками сетки. Следующий пример создает grid контейнер с тремя дорожками размером <code>1fr</code>. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Гибкие grids с единицами fr</a>.</p> +<p>В макете CSS Grid единицы измерения <code>fr</code> позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером <code>1fr</code>. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Гибкие grids с единицами fr</a>.</p> <pre class="brush: css notranslate"><code>.container { display: grid; @@ -187,12 +187,12 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн </pre> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: версия grid макета еще проще, поскольку мы можем определить столбцы в .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">исходный код</a>.</p> +<p><strong>Примечание</strong>: версия grid макета ещё проще, поскольку мы можем определить столбцы в .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">исходный код</a>.</p> </div> <h2 id="Отзывчивые_изображения">Отзывчивые изображения</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой подход к отзывчивым изображениям был описан</span></span> в ранних статьях Маркотта по отзывчивому дизайну. <span class="tlid-translation translation" lang="ru"><span title="">По сути, вы берете изображение максимального размера, которое могло понадобиться, и уменьшаете его.</span></span> Этот подход до сих пор используется и в большинстве таблиц стилей вы найдете следующий CSS:</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой подход к отзывчивым изображениям был описан</span></span> в ранних статьях Маркотта по отзывчивому дизайну. <span class="tlid-translation translation" lang="ru"><span title="">По сути, вы берете изображение максимального размера, которое могло понадобиться, и уменьшаете его.</span></span> Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:</p> <pre class="brush: css notranslate"><code>img { max-width: 100%; @@ -209,9 +209,9 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Отзывчивая_типография">Отзывчивая типография</h2> -<p>Элементом отзывчивого дизайна, не освещенного ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать большую или меньшую площадь экрана.</p> +<p>Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать большую или меньшую площадь экрана.</p> -<p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаем меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум <code>1200px</code>.</p> +<p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум <code>1200px</code>.</p> <pre class="brush: css notranslate"><code>html { font-size: 1em; @@ -228,7 +228,7 @@ h1 { } </code> </pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">Мы отредактировали наш приведенный выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод.</span> <span title="">Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Мы отредактировали наш приведённый выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод.</span> <span title="">Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.</span></span></p> <p>В мобильных версиях заголовок меньше:</p> |