1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
---
title: Способ разметки
slug: Web/CSS/Layout_mode
tags:
- CSS
translation_of: Web/CSS/Layout_mode
original_slug: Web/CSS/Способ_расположения
---
<p><a href="/ru/docs/CSS" title="/ru/docs/CSS">CSS</a> <strong>способ разметки </strong>(или <em>раскладки,</em> или англ. <em>layout</em>) — это алгоритм определения позиции и размеров блоков, основанный на способе, которым они взаимодействуют с родственными блоками. Существует несколько типов разметки:</p>
<ul>
<li><em>Обычная</em> <em>(Normal Flow)</em> — все элементы являются частью обычного потока до тех пор, пока вы не переопределите это каким-либо образом. Обычный <em>layout </em>включает в себя <em>блочную раскладку</em>, созданную для расположения отдельных блоков, таких как параграфы, и <em>линейную,</em>—<em> </em>для строчных элементов;</li>
<li><em><a href="/ru/docs/Web/CSS/CSS_Table">Табличная</a></em>, спроектированная для расположения таблиц;</li>
<li><em>Float layout </em>— для возможности обозначить элементы <em><a href="/ru/docs/CSS/float" title="/ru/docs/CSS/float">плавающими</a>. </em>Такой<em> </em>элемент начинает позиционироваться слева или справа относительно содержимого обычного потока, элементы которого начинают обтекать него;</li>
<li><em><a href="/ru/docs/Web/CSS/CSS_Positioning">Позиционированная</a> </em>— для позиционирования элементов без особого взаимодействия с другими элементами;</li>
<li><em><a href="/ru/docs/Web/CSS/CSS_Columns">Множественные столбцы</a></em> — для расположения контента колонками, как в газетах;</li>
<li><em><a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Флексбокс</a> </em><em>(CSS Flexible Box Layout)</em> — для расположения сложных страниц, которые плавно могут изменять свой размер; {{ experimental_inline() }}</li>
<li><em><a href="/ru/docs/Web/CSS/CSS_Grid_Layout">Сеточная</a></em> — для расположения элементов относительно фиксированной сетки. {{ experimental_inline() }}</li>
</ul>
<div class="note">
<p><strong>Примечание:</strong> не все <a href="/ru/docs/Web/CSS/Reference" title="/ru/docs/Web/CSS/Reference">CSS-свойства</a> применимы ко всем способам разметки. Большинство из них применяются к одному или двум из них и не действуют, если применяются на элементе, участвующем в другом режиме разметки.</p>
</div>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{ CSS_key_concepts() }}</li>
</ul>
|
