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 | 16 |
1 files changed, 8 insertions, 8 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 74a40b9a33..27f451d650 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 @@ -8,7 +8,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> -<div>Каждый элемент в CSS заключён в коробку (английское "<em>box</em>") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом <em>коробочную модель</em> CSS, так, чтобы вы могли решать более сложные здачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.</div> +<div>Каждый элемент в CSS заключён в коробку (английское "<em>box</em>") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом <em>коробочную модель</em> CSS, так, чтобы вы могли решать более сложные задачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.</div> <div></div> @@ -66,7 +66,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>Однако, мы можем изменить внутренний тип отображения, используя такие значения <code>display</code> как <code>flex</code>. Если мы установим <code>display: flex;</code> для элемента, внешний тип отображения примет значение <code>block</code>, но внутренний тип изменится на <code>flex</code>. Любые прямые дочерние элементы этой коробки станут <em>гибкими</em> (flex) объектами и будут размещены в соответствии с правилами, изложенными в спецификации <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, о которой вы узнаете позже.</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Чтобы узнать больше о значениях display, и о том, как работают коробки при блочном или строчном расположении, посмотрите руководство MDN <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Flow_Layout/%D0%91%D0%BB%D0%BE%D1%87%D0%BD%D0%BE%D0%B5_%D0%B8_%D1%81%D1%82%D1%80%D0%BE%D1%87%D0%BD%D0%BE%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_%D0%BD%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%BC_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA%D0%B5">Блочное и cтрочное расположение</a>.</p> +<p><strong>Примечание</strong>: Чтобы узнать больше о значениях display, и о том, как работают коробки при блочном или строчном расположении, посмотрите руководство MDN <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Flow_Layout/%D0%91%D0%BB%D0%BE%D1%87%D0%BD%D0%BE%D0%B5_%D0%B8_%D1%81%D1%82%D1%80%D0%BE%D1%87%D0%BD%D0%BE%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_%D0%BD%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%BC_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA%D0%B5">Блочное и срочное расположение</a>.</p> </div> <p>Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите <code>flex</code>, и другие внутренние значения, которые могут иметь ваши элементы, например <code><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> @@ -168,7 +168,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <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> +<p><strong>Можете ли вы изменить размер второго объекта (добавляя CSS в класс <code>.alternate)</code> чтобы ширина и высота совпали с первым блоком?</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> @@ -209,9 +209,9 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p> -<h4 id="Cхлопывание_margin"> Cхлопывание margin </h4> +<h4 id="Схлопывание_margin"> Схлопывание margin </h4> -<p>Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба зничения негативны, то сумма отрицательнных значений будет вычтена из общей суммы.</p> +<p>Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения негативны, то сумма отрицательных значений будет вычтена из общей суммы.</p> <p>В примере ниже имеется два абзаца. Первый абзац имеет ширину <code>margin-bottom</code> 50 пикселей. Ширина второго параграфа — <code>margin-top</code> 30 пикселей. Поля схлопываются так, что в результате margin между двумя блоками составляет 50 пикселей, а не сумму значений отдельных значений margin.</p> @@ -225,7 +225,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>Граница располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер границы прибавляется к значениям <code>width</code> и <code>height</code> бокса. Если вы используете альтернативную блочную модель, то размер границы уменьшает поле контента данного блока, так как значения границы входит в значения <code>width</code> и <code>height</code>.</p> -<p>Для слилизации границ существует большое количество различных свойств — имеется четыре границы, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.</p> +<p>Для стилизации границ существует большое количество различных свойств — имеется четыре границы, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.</p> <p>Вы можете установить ширину, стиль или цвет всех четырех границ сразу используя {{cssxref("border")}} свойства.</p> @@ -238,7 +238,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <li>{{cssxref("border-left")}}</li> </ul> -<p>Для утановки ширины, стиля или цвета всех границ используйте:</p> +<p>Для установки ширины, стиля или цвета всех границ используйте:</p> <ul> <li>{{cssxref("border-width")}}</li> @@ -302,7 +302,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <ul> <li><span class="tlid-translation translation" lang="ru"><span title="">Применяются свойства </span></span><code>width</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>height</code><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></li> - <li>Использование <code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">, </span></span><code>margin</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>border</code><span class="tlid-translation translation" lang="ru"><span title=""> приведёт к тому, что другие элементы будут отодвинуты от нашего элемена.</span></span></li> + <li>Использование <code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">, </span></span><code>margin</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>border</code><span class="tlid-translation translation" lang="ru"><span title=""> приведёт к тому, что другие элементы будут отодвинуты от нашего элемента.</span></span></li> </ul> <p><span class="tlid-translation translation" lang="ru"><span title="">Он не прервётся на новую строку и станет больше, чем его содержимое, только если вы явно не укажите свойства </span></span><code>width</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>height</code><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p> |