diff options
Diffstat (limited to 'files/ru/learn/css/css_layout/introduction/index.html')
| -rw-r--r-- | files/ru/learn/css/css_layout/introduction/index.html | 12 |
1 files changed, 6 insertions, 6 deletions
diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html index fd443580da..422a215b1c 100644 --- a/files/ru/learn/css/css_layout/introduction/index.html +++ b/files/ru/learn/css/css_layout/introduction/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </tbody> </table> -<p>Методы компановки страниц CSS позволяют нам использовать элементы, расположенные на веб-странице, и контролировать где они находятся относительно их позиции по умолчанию, других элементов вокруг них, их родителей или главного окна. Методы компоновки страниц, которые мы подробно рассмотрим в этой статье.</p> +<p>Методы компоновки страниц CSS позволяют нам использовать элементы, расположенные на веб-странице, и контролировать где они находятся относительно их позиции по умолчанию, других элементов вокруг них, их родителей или главного окна. Методы компоновки страниц, которые мы подробно рассмотрим в этой статье.</p> <ul> <li>Нормальный поток</li> @@ -57,7 +57,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>Заметьте, что HTML элементы здесь отображаются точно в таком порядке, как и в исходном коде — первый параграф, за ним неупорядоченный список, затем второй параграф.</p> -<p>Элементы, выводящеся один <em>под</em> другим, называются <em>блочными</em>, в противоположность <em>строчным</em>, которые выводятся один <em>вслед</em> за другим, как отдельные слова в обычном абзаце текста.</p> +<p>Элементы, выводящиеся один <em>под</em> другим, называются <em>блочными</em>, в противоположность <em>строчным</em>, которые выводятся один <em>вслед</em> за другим, как отдельные слова в обычном абзаце текста.</p> <div class="note"> <p><strong>Примечание</strong>: Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за направление отображения строковых элементов (таких как предложение).</p> @@ -68,10 +68,10 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>Методы CSS, которыми вы можете управлять разметкой элементов:</p> <ul> - <li><strong>Свойство {{cssxref("display")}} </strong>— Стандартные значениея <code>block</code>, <code>inline</code> или <code>inline-block </code>могут изменять поведение элементов в обычном потоке (см.подробнее <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a>). Также можно менять сами методы разметки такими значениями свойства <code>display</code>, как <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> или <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> + <li><strong>Свойство {{cssxref("display")}} </strong>— Стандартные значения <code>block</code>, <code>inline</code> или <code>inline-block </code>могут изменять поведение элементов в обычном потоке (см.подробнее <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a>). Также можно менять сами методы разметки такими значениями свойства <code>display</code>, как <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> или <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> <li><strong>Floats</strong> — Применение значения {{cssxref("float")}} типа <code>left</code> может заставить элемент блочного типа "прилепить" содержимое к одной стороне элемента, как иногда изображения обволакиваются текстом на газетных страницах.</li> <li><strong>Свойство {{cssxref("position")}} </strong>— Позволяет точно контролировать положение блоков внутри других блоков. <code>static</code> позиционирование является стандартным, но также можно применять другие значения свойства, например фиксированное в углу экрана.</li> - <li><strong>Макет Таблицы</strong> — свойства для разметки таблиц могут быть использованы и для нетабличных элеметов, с помощью <code>display: table</code> и соотвествующих свойств.</li> + <li><strong>Макет Таблицы</strong> — свойства для разметки таблиц могут быть использованы и для нетабличных элементов, с помощью <code>display: table</code> и соответствующих свойств.</li> <li><strong>Multi-column layout</strong> — <a href="/en-US/docs/Web/CSS/CSS_Columns">Многоколоночный макет</a> поможет расположить содержимое столбцами, как в газетах.</li> </ul> @@ -122,7 +122,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>В дополнение к свойствам, применяемым к контейнеру, существуют свойства, применяемые ко вложенным элементам. Эти свойства помимо всего прочего, могут менять размеры элемента, растягивая его и заставляя занимать всё доступное место.</p> -<p>В качестве простого примера, добавим свойство {{cssxref("flex")}} ко всем дочерним элементам, со значением <code>1</code>. Это заставит все элементы растянуться и заполнить контейнер, не оставляя свободного места в конце строки. Если освободится дополнительное пространство, элементы растянутся; если доступное местро убавится - элементы сожмутся. Также, если вы добавите дополнительный элемент, остальные элементы станут меньше, для того, чтобы все они были одного размера.</p> +<p>В качестве простого примера, добавим свойство {{cssxref("flex")}} ко всем дочерним элементам, со значением <code>1</code>. Это заставит все элементы растянуться и заполнить контейнер, не оставляя свободного места в конце строки. Если освободится дополнительное пространство, элементы растянутся; если доступное место убавится - элементы сожмутся. Также, если вы добавите дополнительный элемент, остальные элементы станут меньше, для того, чтобы все они были одного размера.</p> <div id="Flex_2"> <div class="hidden"> @@ -466,7 +466,7 @@ p { <p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p> -<p>Это совсем другое! Позиционированный элемент теперь совершенно отделен от разметки остальной страницы и располагется поверх него. Другие два параграфа теперь располагаются вместе так будто бы их позиционированный брат не существует. Свойства {{cssxref("top")}} и {{cssxref("left")}} имеют иной эффект на абсолютно позиционированные элементы, чем на относительно позиционированные элементы. В данном случае смещения были рассчитаны сверху и слева от страницы. Возможно изменить родительский элемент так что он становится контейнером, но мы рассмотрим это в уроке по <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">позиционированию</a>.</p> +<p>Это совсем другое! Позиционированный элемент теперь совершенно отделен от разметки остальной страницы и располагается поверх него. Другие два параграфа теперь располагаются вместе так будто бы их позиционированный брат не существует. Свойства {{cssxref("top")}} и {{cssxref("left")}} имеют иной эффект на абсолютно позиционированные элементы, чем на относительно позиционированные элементы. В данном случае смещения были рассчитаны сверху и слева от страницы. Возможно изменить родительский элемент так что он становится контейнером, но мы рассмотрим это в уроке по <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">позиционированию</a>.</p> <h3 id="Fixed_positioning">Fixed positioning</h3> |