diff options
Diffstat (limited to 'files/ru/web/css')
-rw-r--r-- | files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html | 70 | ||||
-rw-r--r-- | files/ru/web/css/vertical-align/index.html | 18 |
2 files changed, 44 insertions, 44 deletions
diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 1278783254..e49f1183b8 100644 --- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="onedtwod"> <div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css notranslate">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -40,7 +40,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html notranslate"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -49,7 +49,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css">.wrapper { +<pre class="brush: css notranslate">.wrapper { display: flex; flex-wrap: wrap; } @@ -65,13 +65,13 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Общий вопрос заключается в том, как заставить наши перебежавшие элементы выравняться по элементам сверху. Как раз в этом случае и нужен метод размещения элементов в двумерной системе: требуется выравнивание и по строке, и по колонке, а для этого на помощь спешит Grid.</p> -<h3 id="Те_же_яйца_вид_в_профиль_тот_же_макет_но_с_CSS_гридами">Те же яйца, вид в профиль: тот же макет, но с CSS гридами</h3> +<h3 id="Тот_же_макет_но_с_CSS_гридами">Тот же макет, но с CSS гридами</h3> -<p>В примере ниже мы создаем тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в <code>1fr</code> . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как Вы видите, наши элементы лежат в жесткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. </p> +<p>В примере ниже мы создаем тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в <code>1fr</code> . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как видите, наши элементы лежат в жесткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. </p> <div class="Two_Dimensional_With_Grid"> <div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css notranslate">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -89,7 +89,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html notranslate"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -98,7 +98,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css">.wrapper { +<pre class="brush: css notranslate">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } @@ -107,11 +107,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p> </div> -<p>Если Вы колеблетесь, что выбрать - flexbox или грид, задайте себе простой вопрос:</p> +<p>Если Вы колеблетесь, что выбрать - flexbox или grid, задайте себе простой вопрос:</p> <ul> - <li>мне нужно управлять размещением элементов в строке <u>или </u>в колонке - окей, нужен flexbox</li> - <li>мне нужно управлять размещением элементов <u>и </u>в строке, <u>и </u>в колонке – окей, нужен грид</li> + <li>нужно управлять размещением элементов в строке <em><u>или</u></em> в колонке - используем flexbox</li> + <li>нужно управлять размещением элементов в строке <em><u>и</u></em> в колонке – используем grid</li> </ul> <h3 id="Что_важнее_контент_или_макет">Что важнее: контент или макет?</h3> @@ -133,7 +133,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обертки wrapper установлено свойство {{cssxref("min-height")}}, и оно задает высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение <code>flex-end</code> , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для <code>box1</code> таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для <code>box2</code> свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.</p> <div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css notranslate">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -151,14 +151,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html notranslate"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </pre> -<pre class="brush: css">.wrapper { +<pre class="brush: css notranslate">.wrapper { display: flex; align-items: flex-end; min-height: 200px; @@ -178,7 +178,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо <code>flex-start</code> и <code>flex-end</code> мы задаем <code>start</code> и <code>end</code> . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.</p> <div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css notranslate">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -196,14 +196,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html notranslate"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </pre> -<pre class="brush: css">.wrapper { +<pre class="brush: css notranslate">.wrapper { display: grid; grid-template-columns: repeat(3,1fr); align-items: end; @@ -233,7 +233,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В примере ниже мы используем ключевое слово <code>auto-fill</code> вместо целого числа в repeat-нотации и задаем структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.</p> <div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css notranslate">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -251,14 +251,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html notranslate"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> </div> </pre> -<pre class="brush: css">.wrapper { +<pre class="brush: css notranslate">.wrapper { display: grid; grid-template-columns: repeat(auto-fill, 200px); } @@ -271,7 +271,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя <code>auto-fill</code> и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаем автозаполненные треки с помощью <code>minmax</code>. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим <code>1fr</code>. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум <code>1fr</code> как инструкцию распределить оставшееся свободное пространство между этими блоками.</p> <div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css notranslate">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -289,14 +289,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html notranslate"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> </div> </pre> -<pre class="brush: css">.wrapper { +<pre class="brush: css notranslate">.wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } @@ -317,7 +317,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В примере ниже у нас есть блок-обертка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещен в гриде с помощью привязки к грид-линиям. У грид-контейнера <code>position:</code> <code>relative</code> , поэтому он становится контекстом позиционирования для нашего третьего элемента.</p> <div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css notranslate">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -335,7 +335,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html notranslate"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3"> @@ -346,7 +346,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css">.wrapper { +<pre class="brush: css notranslate">.wrapper { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; @@ -385,7 +385,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Задаем <code>.box3</code> свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига. В данном случае контекстом позиционирования является грид-область.</p> <div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css notranslate">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -403,7 +403,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html notranslate"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three @@ -415,7 +415,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css">.wrapper { +<pre class="brush: css notranslate">.wrapper { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; @@ -453,7 +453,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="Display_Contents_Before"> <div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css notranslate">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -477,7 +477,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html notranslate"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -490,7 +490,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css">.wrapper { +<pre class="brush: css notranslate">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); @@ -509,7 +509,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="Display_Contents_After"> <div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css notranslate">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -533,7 +533,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html notranslate"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -546,7 +546,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css">.wrapper { +<pre class="brush: css notranslate">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html index c7e311b39a..45662b41ce 100644 --- a/files/ru/web/css/vertical-align/index.html +++ b/files/ru/web/css/vertical-align/index.html @@ -5,9 +5,9 @@ translation_of: Web/CSS/vertical-align --- <div>{{CSSRef}}</div> -<p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> <code>vertical-align</code> описывает вертикальное позиционирование строчных элементов (inline) или ячеек таблицы (table-cell).</p> +<p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> <code>vertical-align</code> описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).</p> -<pre class="brush: css no-line-numbers">/* ключевые значения */ +<pre class="brush: css no-line-numbers notranslate">/* ключевые значения */ vertical-align: baseline; vertical-align: sub; vertical-align: super; @@ -37,7 +37,7 @@ vertical-align: unset; </ul> <div id="vertical-align-inline"> -<pre class="hidden brush: html"><p> +<pre class="hidden brush: html notranslate"><p> top:<img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/> middle:<img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/> bottom:<img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> @@ -55,7 +55,7 @@ text-bottom:<img style="vertical-align:text-bottom" src="https://mdn.mozilla </pre> -<pre class="hidden brush: css">#* { +<pre class="hidden brush: css notranslate">#* { box-sizing: border-box; } @@ -82,7 +82,7 @@ p { </ul> <div id="vertical-align-table"> -<pre class="hidden brush: html"><table> +<pre class="hidden brush: html notranslate"><table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> @@ -92,7 +92,7 @@ p { <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо нее появится нечто еще более причудливое и необъяснимое.</p> <p>Существует и другая теория, согласно которой это уже случилось.</p></pre> -<pre class="hidden brush: css">table { +<pre class="hidden brush: css notranslate">table { margin-left: auto; margin-right: auto; width: 80%; @@ -176,13 +176,13 @@ td { <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> -<pre class="syntaxbox">{{csssyntax}}</pre> +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> <h2 id="Пример">Пример</h2> <h3 id="HTML">HTML</h3> -<pre class="brush: html"><div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по умолчанию.</div> +<pre class="brush: html notranslate"><div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по умолчанию.</div> <div>Изображение <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по верхнему краю.</div> <div>Изображение <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по нижнему краю.</div> <div>Изображение <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по центру.</div> @@ -190,7 +190,7 @@ td { <h3 id="CSS">CSS</h3> -<pre class="brush: css">img.top { vertical-align: text-top; } +<pre class="brush: css notranslate">img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } </pre> |