diff options
Diffstat (limited to 'files/ru/learn/css/building_blocks/the_box_model/index.html')
| -rw-r--r-- | files/ru/learn/css/building_blocks/the_box_model/index.html | 26 |
1 files changed, 13 insertions, 13 deletions
diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.html index 19fb0e66d7..96ba3fb315 100644 --- a/files/ru/learn/css/building_blocks/the_box_model/index.html +++ b/files/ru/learn/css/building_blocks/the_box_model/index.html @@ -99,7 +99,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <h2 id="Что_такое_модель_коробки_CSS">Что такое модель коробки CSS?</h2> -<p>Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определенные блочной моделью. Модель определяет, как разные части элемента — поля, границы, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Чтобы добавить дополнительную сложность элементу, используются стандартные и альтернативные блочные модели.</p> +<p>Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определённые блочной моделью. Модель определяет, как разные части элемента — поля, границы, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Чтобы добавить дополнительную сложность элементу, используются стандартные и альтернативные блочные модели.</p> <h3 id="Составляющие_элемента">Составляющие элемента</h3> @@ -151,7 +151,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model box-sizing: border-box; } </code></pre> -<p>Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространенным выбором среди разработчиков, установите свойство <code>box-sizing</code> для элемента <code><html></code>, затем настройте все элементы для наследования этого значения (inherit), как показано на фрагменте ниже. Если вы хотите понять, что стоит за этим, смотрите статью <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">the CSS Tricks article on box-sizing</a>.</p> +<p>Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство <code>box-sizing</code> для элемента <code><html></code>, затем настройте все элементы для наследования этого значения (inherit), как показано на фрагменте ниже. Если вы хотите понять, что стоит за этим, смотрите статью <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">the CSS Tricks article on box-sizing</a>.</p> <pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> @@ -166,7 +166,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <h2 id="Играем_с_блочными_моделями">Играем с блочными моделями</h2> -<p>В примере ниже, вы можете видеть 2 объекта. Оба имеют класс <code>.box</code>, который дает им одинаковые параметры <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.</p> +<p>В примере ниже, вы можете видеть 2 объекта. Оба имеют класс <code>.box</code>, который даёт им одинаковые параметры <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.</p> <p><strong>Можете ли вы изменить размер второго объекта (добавляя CSS в класс <code>.alternate)</code> чтобы ширина и высота совпали с первым блоком?</strong></p> @@ -188,13 +188,13 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <h2 id="Поля_отступы_и_границы"><span class="tlid-translation translation" lang="ru"><span title="">Поля, отступы и границы</span></span></h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Вы уже видели свойства {{cssxref ("margin")}}, {{cssxref ("padding")}} и {{cssxref ("border")}} в работе в приведенном выше примере.</span> <span title="">Свойства, используемые в этом примере, являются общими и позволяют нам устанавливать все четыре стороны поля одновременно.</span> <span title="">Эти параметры также имеют эквивалентные свойства, которые позволяют индивидуально управлять разными сторонами поля.</span><br> +<p><span class="tlid-translation translation" lang="ru"><span title="">Вы уже видели свойства {{cssxref ("margin")}}, {{cssxref ("padding")}} и {{cssxref ("border")}} в работе в приведённом выше примере.</span> <span title="">Свойства, используемые в этом примере, являются общими и позволяют нам устанавливать все четыре стороны поля одновременно.</span> <span title="">Эти параметры также имеют эквивалентные свойства, которые позволяют индивидуально управлять разными сторонами поля.</span><br> <br> <span title="">Давайте рассмотрим эти свойства более подробно.</span></span></p> <h3 id="Поле_внешнего_отступа_margin">Поле внешнего отступа (margin)</h3> -<p>Margin это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Margin может быть как положительным, так и отрицательным. Негативное значение для внешнего отступа может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, margin всегда добавляется после расчета размера видимого бокса.</p> +<p>Margin это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Margin может быть как положительным, так и отрицательным. Негативное значение для внешнего отступа может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, margin всегда добавляется после расчёта размера видимого бокса.</p> <p>Мы можем контролировать все поля элемента сразу, используя свойство {{cssxref ("margin")}}, или каждую сторону индивидуально, используя эквивалентные полные свойства:</p> @@ -219,7 +219,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p> -<p>Существует ряд правил, которые определяют, когда поля уменьшаются, а когда нет. Для получения подробной информации см. <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a>. Главное, что нужно сейчас помнить, — это то, что происходит схлопывание полей. Если вы создаете пространство с полями и не получаете ожидаемого результата, вероятно, именно это и происходит. </p> +<p>Существует ряд правил, которые определяют, когда поля уменьшаются, а когда нет. Для получения подробной информации см. <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a>. Главное, что нужно сейчас помнить, — это то, что происходит схлопывание полей. Если вы создаёте пространство с полями и не получаете ожидаемого результата, вероятно, именно это и происходит. </p> <h3 id="Границы">Границы</h3> @@ -227,9 +227,9 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>Для стилизации границ существует большое количество различных свойств — имеется четыре границы, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.</p> -<p>Вы можете установить ширину, стиль или цвет всех четырех границ сразу используя {{cssxref("border")}} свойства.</p> +<p>Вы можете установить ширину, стиль или цвет всех четырёх границ сразу используя {{cssxref("border")}} свойства.</p> -<p>Чтобы установить индивидуальные свойства для каждой из четырех сторон вы можете использовать:</p> +<p>Чтобы установить индивидуальные свойства для каждой из четырёх сторон вы можете использовать:</p> <ul> <li>{{cssxref("border-top")}}</li> @@ -263,13 +263,13 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <li>{{cssxref("border-left-color")}}</li> </ul> -<p><strong>В примере ниже мы использовали различные сокращенные и длинные способы создания границ. Поиграйте с различными свойствами чтобы проверить как вы поняли принципы их работы. MDN страницы свойств границ дадут вам информацию о различных стилях, которые вы можете использовать.</strong></p> +<p><strong>В примере ниже мы использовали различные сокращённые и длинные способы создания границ. Поиграйте с различными свойствами чтобы проверить как вы поняли принципы их работы. MDN страницы свойств границ дадут вам информацию о различных стилях, которые вы можете использовать.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p> <h3 id="Padding">Padding</h3> -<p>Padding расположен между границей и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding, поэтому значения должны быть положительными или равными 0. Любой, примененный к вашим элементам фон, будет отображаться под областью padding, и поэтому он обычно используется чтобы отодвинуть контент от границы.</p> +<p>Padding расположен между границей и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding, поэтому значения должны быть положительными или равными 0. Любой, применённый к вашим элементам фон, будет отображаться под областью padding, и поэтому он обычно используется чтобы отодвинуть контент от границы.</p> <p>Вы можете контролировать значение padding для всех сторон элемента, используя {{cssxref("padding")}} свойство, или для каждой стороны индивидуально, используя используя следующие свойства:</p> @@ -282,7 +282,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p><strong>Если вы измените значения padding в классе <code>.box</code> в примере ниже, вы можете увидеть что это изменяет положение текста относительно поля.</strong></p> -<p><strong>Вы также можете изменить padding в классе <code>.container,</code> который создает пространство между контейнером и боксом. Padding может быть изменен для любого элемента, и создать пространство между этой и любой другой границей внутри элемента.</strong></p> +<p><strong>Вы также можете изменить padding в классе <code>.container,</code> который создаёт пространство между контейнером и боксом. Padding может быть изменён для любого элемента, и создать пространство между этой и любой другой границей внутри элемента.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p> @@ -290,7 +290,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>Всё, сказанное ранее, полностью применимо к блочным элементам. Некоторые из свойств могут быть также применены и к строчным (inline) элементам, например, элемент, создаваемый с помощью <code><span></code>.</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">В приведенном ниже примере у нас есть <span> внутри абзаца, и мы применили к нему </span></span><code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> и <code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Вы можете видеть, что ширина и высота игнорируются.</span> <span title="">Вертикальные поля, отступы и границы соблюдаются, но они не изменяют отношения другого содержимого к нашему строчному элементу, и поэтому отступ и граница перекрывают другие слова в абзаце.</span> <span title="">Горизонтальные отступы, поля и границы соблюдаются и заставят другой контент отодвинуться от нашего элемента.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В приведённом ниже примере у нас есть <span> внутри абзаца, и мы применили к нему </span></span><code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> и <code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Вы можете видеть, что ширина и высота игнорируются.</span> <span title="">Вертикальные поля, отступы и границы соблюдаются, но они не изменяют отношения другого содержимого к нашему строчному элементу, и поэтому отступ и граница перекрывают другие слова в абзаце.</span> <span title="">Горизонтальные отступы, поля и границы соблюдаются и заставят другой контент отодвинуться от нашего элемента.</span></span></p> <p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p> @@ -313,7 +313,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p><span class="tlid-translation translation" lang="ru"><span title="">Это может быть полезно, когда вы хотите создать ссылку с большой областью попадания, добавив </span></span><code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> </span><code><a></code><span class="tlid-translation translation" lang="ru"><span title=""> - это строчный элемент, такой же как <code><span></code>;</span> <span title="">вы можете использовать <code>display: inline-block</code>, чтобы разрешить установку отступов, что упростит пользователю переход по ссылке.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Вы довольно часто видите это на панели навигации.</span> <span title="">Приведенная ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <code><a></code>, также мы хотим чтобы изменялся </span></span><code>background-color</code><span class="tlid-translation translation" lang="ru"><span title=""> при наведении курсора на <code><a></code>.</span> <span title="">Отступы перекрывают границу элемента <code><ul></code>.</span> <span title="">Это потому, что <code><a></code> является строчным элементом.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Вы довольно часто видите это на панели навигации.</span> <span title="">Приведённая ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <code><a></code>, также мы хотим чтобы изменялся </span></span><code>background-color</code><span class="tlid-translation translation" lang="ru"><span title=""> при наведении курсора на <code><a></code>.</span> <span title="">Отступы перекрывают границу элемента <code><ul></code>.</span> <span title="">Это потому, что <code><a></code> является строчным элементом.</span></span></p> <p><strong><span class="tlid-translation translation" lang="ru"><span title="">Добавьте в правило <code>display: inline-block</code> с помощью селектора <code>.links-list a</code>, и вы увидите, как он решает эту проблему, заставляя другие элементы соблюдать отступы.</span></span></strong></p> |