diff options
Diffstat (limited to 'files/ru/web/css/block-size/index.html')
| -rw-r--r-- | files/ru/web/css/block-size/index.html | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/files/ru/web/css/block-size/index.html b/files/ru/web/css/block-size/index.html new file mode 100644 index 0000000000..413705bb6d --- /dev/null +++ b/files/ru/web/css/block-size/index.html @@ -0,0 +1,104 @@ +--- +title: block-size +slug: Web/CSS/block-size +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - Справка + - Экспериментальный +translation_of: Web/CSS/block-size +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>Свойство <strong><code>block-size</code></strong> <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> задает горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +block-size: 300px; +block-size: 25em; + +/* <percentage> values */ +block-size: 75%; + +/* Keyword values */ +block-size: 25em border-box; +block-size: 75% content-box; +block-size: max-content; +block-size: min-content; +block-size: available; +block-size: fit-content; +block-size: auto; + +/* Global values */ +block-size: inherit; +block-size: initial; +block-size: unset; +</pre> + +<p>Если режим записи (writing mode) ориентирован по вертикали, то значение <code> block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задает другое измерение элемента.</code></p> + +<p><code>{{cssinfo}}</code></p> + +<h2 id="Синтаксис"><code>Синтаксис</code></h2> + +<h3 id="Значения"><code>Значения</code></h3> + +<p><code>Свойство <code>block-size</code> принимает те же значения, что и свойства {{cssxref("width")}}, {{cssxref("height")}} </code></p> + +<h3 id="Формальный_синтаксис"><code>Формальный синтаксис</code></h3> + +<pre class="syntaxbox"><code> +{{csssyntax}}</code></pre> + +<h2 id="Пример"><code>Пример</code></h2> + +<h3 id="HTML"><code>HTML</code></h3> + +<pre class="brush: html"><code> +<p class="exampleText">Example text</p> +</code></pre> + +<h3 id="CSS"><code>CSS</code></h3> + +<pre class="brush: css"><code> +.exampleText { + writing-mode: vertical-rl; + background-color: yellow; + block-size: 200px; +}</code></pre> + +<p><code>{{EmbedLiveSample("Example")}}</code></p> + +<h2 id="Спецификация"><code>Спецификация</code></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><code>Specification</code></th> + <th scope="col"><code>Status</code></th> + <th scope="col"><code>Comment</code></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}</code></td> + <td><code>{{Spec2("CSS Logical Properties")}}</code></td> + <td><code>Initial definition</code></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами"><code>Совместимость с браузерами</code></h2> + +<div class="hidden"><code>Таблица совместимости на этой странице создается на основе структурированных данных. Если вы хотите внести свой вклад в разработку, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам соответствующий запрос.</code></div> + +<p><code>{{Compat("css.properties.block-size")}}</code></p> + +<h2 id="Смотри_также"><code>Смотри также</code></h2> + +<ul> + <li><code>Отображаемые физические свойства: {{cssxref("width")}} and {{cssxref("height")}}</code></li> + <li><code>{{cssxref("writing-mode")}}</code></li> +</ul> |