diff options
Diffstat (limited to 'files/ru/web/css/layout_mode/index.html')
-rw-r--r-- | files/ru/web/css/layout_mode/index.html | 28 |
1 files changed, 28 insertions, 0 deletions
diff --git a/files/ru/web/css/layout_mode/index.html b/files/ru/web/css/layout_mode/index.html new file mode 100644 index 0000000000..dcf1440cb5 --- /dev/null +++ b/files/ru/web/css/layout_mode/index.html @@ -0,0 +1,28 @@ +--- +title: Способ разметки +slug: Web/CSS/Способ_расположения +tags: + - CSS +translation_of: Web/CSS/Layout_mode +--- +<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> |